使用 redux-orm 和 TypeScript 的模型类定义

Question

我在JS中使用redux-orm并且一切正常，但是我在将代码从JS转换为TypeScript时遇到问题。

我已经在我的文件夹模型类中实现了 render(( 方法，但 TS 转译器说：

Property 'name' does not exist on type 'Folder'

如何指示 TypeScript 文件夹实例中存在 name 属性？

interface IFolder{
    id: number;
    name: string;
    parent: any;
}
export class Folder extends Model<ModelFields, IFolder>{
    static get modelName() {
        return 'Folder';
    }
    get render(){
        return (<p>{this.name}</p>)
    }
    static get fields() {
        return {
            id: attr(),
            name: attr(),
            parent: fk('Folder', 'children')
        };
    }
}

Answer 1

您可以在

class Folder中重复所有IFolder

export class Folder extends Model<ModelFields, IFolder> implements IFolder {
    id: number;
    name: string;
    parent: any;
...

或者使用此技巧不重复代码：

class IFolder extends Model<ModelFields, IFolder> {
    id: number;
    name: string;
    parent: any;
}
export class Folder extends IFolder {

Answer 2

Babel 转译输出在模型原型链中引入了额外的属性描述符，这会干扰 redux-orm 在模式注册期间安装的描述符。这是Maximum call stack size exceeded错误的根本原因。

@types/redux-orm redux-orm:0.13的工作方式略有不同。

提供的源缺少ModelFields，因此我将跳过这些并假设预期的字段包括：

• ID - 属性
• 名称 - 属性
• 父 - 自引用外键

例：

interface FolderFields {
  id: number;
  name: string;
  parent: Folder
  children: QuerySet<Folder>
}
export class Folder extends Model<typeof Folder, FolderFields> {
    static modelName = 'Folder' as const;
    static fields = {
        id: attr(),
        name: attr(),
        parent: fk('Folder', 'children')
    }
}

redux-orm 0.14 的类型很可能会利用声明合并来允许更清晰的Model定义。