基于redux-orm和TypeScript的模型类定义

Question

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

我已经在我的文件夹模型类中实现了呈现()方法，但是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中重复所有的class Folder

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在模式注册期间安装的描述符。这是导致Maximum call stack size exceeded错误的根本原因。

@types/redux-orm for 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 0.14的类型最有可能利用声明合并，以支持更干净的Model定义。