属性“ typeof CommonStore”类型不存在。 mobx反应的

Question

I am new to TypeScript and I try to call an action from another class and I get such an error, maybe it's not possible to use functions through import but only through @inject ? What could be the problem I do not understand

PS established @types :

"@types/react": "^16.8.22",
"@types/react-dom": "^16.8.4",
"@types/react-router-dom": "^4.3.4",

import {
  observable,
  action,
  autorun,
  set,
  toJS,
  extendObservable
} from "mobx";
import commonStore from "./common";

export default class Authentication {
  @action login = async() => {
    this.inProgress = true;
    this.errors = undefined;
    try {
      const token = await requestApi({
        method: "post",
        url: `/auth/login`,
        data: {
          login: this.username,
          pass: this.password
        }
      });

      commonStore.setToken(token); // Property 'setToken' does not exist on type 'typeof CommonStore'
    } catch (error) {
      axiosErrorHandler(error);
    }
  }
}

CommonStore

export default class CommonStore {
  @observable token = window.localStorage.getItem("jwt");
  constructor() {
    reaction(
      () => this.token,
      token => {
        if (token) {
          localStorage.setItem("jwt", token);
        } else {
          localStorage.removeItem("jwt");
        }
      }
    );
  }

  @action setToken(token: string) {
    this.token = token;
  }
}

index.ts store

import Authentication from "./models/authentication";
import Common from "./models/common";

class ObservableListStore {
  @observable authentication = new Authentication();
  @observable common = new Common();
}

export const store = new ObservableListStore();

Answer 1

You exported a class ( CommonStore ) but you're trying use it like an object that already created.

You need to create the instance and then you could use it.

import commonStore from "./common";

const commonStoreInstance = new commonStore();

commonStoreInstance.setToken('token');

But probably you want the same instance wherever you import the commonStore . If so, you need to create the instance inside the module and export that.

Like this:

class CommonStore {
  @observable token = window.localStorage.getItem("jwt");
  constructor() {
    reaction(
      () => this.token,
      token => {
        if (token) {
          localStorage.setItem("jwt", token);
        } else {
          localStorage.removeItem("jwt");
        }
      }
    );
  }

  @action setToken(token: string) {
    this.token = token;
  }
}

export const commonStore = new CommonStore();

Then

import commonStore from "./common";

commonStore.setToken('token');

https://k94n.com/es6-modules-single-instance-pattern