首页 > 解决方案 > 如何使用 Mobx 状态树库解决 React 应用程序中 linter 和类型冲突的问题?

问题描述

我有一个与 mobx-state-tree 和工作 linter 一起使用的 React 应用程序。在这个应用程序中,我遇到了我试图在三天内解决的问题。这是引发错误的代码,我描述了我在模型文件中描述的项目列表的模型。该错误位于 getFirst() 函数附近,该函数将数组中的第一项返回给我。出现此错误 - Mobx 库无法识别项目函数返回的类型并抛出我放在照片上的错误。错误截图。当我删除返回函数的类型时 - linter 会抛出该函数没有返回类型的错误。该错误的照片。我还附上了我的消息模型的代码。

import { types } from 'mobx-state-tree';
import ItemList from './itemList';

const Message = types
  .model('Message', {
    chatId: types.integer,
    text: types.string,
    time: types.Date,
    isSent: false,
  })
  .actions((self) => ({
    send(): void {
      self.isSent = true;
    },
  }))
  .views((self) => ({
    status(): boolean {
      return self.isSent;
    },
  }));

export default Message;

在 getFirst 方法附​​近触发错误的函数代码。

import {
  ISimpleType,
  IType,
  ModelInstanceType,
  ModelPropertiesDeclarationToProperties,
  types,
  _NotCustomized,
} from 'mobx-state-tree';
import Message from './models';
const ItemList = types
  .model('ItemList', {
    items: types.array(Message),
  })
  .actions((self) => ({
    add(
      message: ModelInstanceType<
        ModelPropertiesDeclarationToProperties<{
          chatId: ISimpleType<number>;
          text: ISimpleType<string>;
          time: IType<number | Date, number, Date>;
          isSent: false;
        }>,
        { send(): void } & { status(): boolean },
        _NotCustomized,
        _NotCustomized
      >,
    ): void {
      self.items.push(message);
    },
    pop(): void {
      self.items.shift();
    },

    empty(): boolean {
      return self.items.length === 0;
    },
    getFirst(): ModelInstanceType<
      ModelPropertiesDeclarationToProperties<{
        chatId: ISimpleType<number>;
        text: ISimpleType<string>;
        time: IType<number | Date, number, Date>;
        isSent: false;
      }>,
      { send(): void } & { status(): boolean },
      _NotCustomized,
      _NotCustomized
    > {
      return self.items[0];
    },
    getLen(): number {
      return self.items.length;
    },
  }));

export default ItemList;

标签: reactjsmobxmobx-state-tree

解决方案


推荐阅读