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

Question

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

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

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

如何指示 TypeScript 在 Folder 实例中存在 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

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

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

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

• id - 属性
• 名称 - 属性
• parent - 自引用外键

例子：

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 定义。

Answer 2

你可以在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 {