Question

我正在将 redux-orm 与JS一起使用，并且一切正常，但是在将代码从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

您可以重复IFolder中的所有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编译输出在 Model 原型链中引入了其他属性描述符，这会干扰模式注册期间 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定义。

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

2 个答案: