Model Class definiton using redux-orm and TypeScript

Question

I'm using redux-orm with JS and all is working ok, but I having problems translating my code from JS to TypeScript.

I already implemented the method render() in my Folder Model Class, but the TS transpiler says:

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

How can I indicate TypeScript that the name property exists in Folder instances?

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')
        };
    }
}

score 0 · Answer 1 · answered Jun 10 '19 at 21:16

0

You can repeat all IFolder in class Folder

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

or use this trick to not repeat code:

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

export class Folder extends IFolder {

answered Jun 10 '19 at 21:16

aquz

246
1
3

Thanks @aquz I already tried that solution but when I make that I get this error when I want to create an instance of Folder using this line that works ok in using JS: **Folder.create(sf)** `index.js:1375 RangeError: Maximum call stack size exceeded at SessionBoundModel.update (Model.js:538) at SessionBoundModel.set (Model.js:518) at SessionBoundModel.set [as id] (descriptors.js:25) at new Folder (index.tsx:107)` – Matias Benedetto Jun 10 '19 at 21:35

score 0 · Answer 2 · answered Jul 19 '19 at 15:49

Babel transpilation output introduces additional property descriptors in Model prototype chain, which interfere with descriptors installed by redux-orm during schema registration. This is the root cause for Maximum call stack size exceeded error.

@types/redux-orm for redux-orm:0.13 work a bit differently.

The source provided is missing the ModelFields, so I'll skip these and assume that the expected fields include:

id - attribute
name - attribute
parent - self-referencing foreign key

Example:

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')
    }
}

Types for redux-orm 0.14 will most likely leverage declaration merging to allow for cleaner Model definitions.

Model Class definiton using redux-orm and TypeScript

2 Answers2