Блог

Я создаю nuxt.js приложение с typescript и хотите отделить вызовы API от хранилища vuex. Но, похоже, я не могу использовать методы при импорте класса. Компилятор также сообщает только TS1005: ',' expected. тогда, когда я пытаюсь вызвать метод.

ApiClient.ts

 export default class apiClient {
    helloWorld() {
        console.log('Hello World');
    }
}
  

products.ts:

 import ApiClient from '../services/apiClient';

export const actions = {
  ApiClient.helloWorld();
};
  

tsconfig.json

  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./src/*"
      ],
      "@/*": [
        "./src/*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },
  

В вашем коде есть несколько проблем.

Первая проблема заключается в том, что вы не можете определить свои действия таким образом. Вы записываете свою функцию непосредственно в объект actions, а это не то, как работают объекты. Вам нужно определить ключ и назначить ему свою функцию, например:

 export const actions = {
  helloWorld: ApiClient.helloWorld,
};
  

Обратите внимание на отсутствующие круглые скобки, поскольку вы назначаете свою функцию, а не выполняете ее.

Но этот код все равно не будет компилироваться, поскольку вы определили свои методы в классе. В этом нет ничего плохого, но если вы сделаете это таким образом, вам придется создать экземпляр вашего класса с new помощью ключевого слова (или вы можете сделать свой класс статическим, если знаете, как это сделать):

 import ApiClient from '../services/apiClient';
const client = new ApiClient();

export const actions = {
  helloWorld: client.helloWorld,
};
  

В вашем случае я бы вообще не стал использовать класс. Вы можете экспортировать свои функции напрямую, что намного проще:

 export const helloWorld = () => {
  console.log('Hello World');
};
  

Импорт теперь тоже намного проще. Вы также можете опустить ключ, если сохраните его с тем же именем, с которым вы его экспортировали:

 import { helloWorld } from '../services/apiClient';

export const actions = {
  helloWorld,
  // or use a different name:
  hello: helloWorld,
};
  

Я надеюсь, что это исправит вашу проблему, и вы поймете, почему это не сработало.