CODEWITHSUNDEEP
reactjstypescriptreduxredux-orm
Matias Benedetto
Matias Benedetto

Reputation: 341

Model Class definiton using redux-orm and TypeScript

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

Upvotes: 4

Views: 756

Answers (2)

Tomasz Zabłocki
Tomasz Zabłocki

Reputation: 417

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.

Upvotes: 0

aquz
aquz

Reputation: 256

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 {

Upvotes: 0

Related Questions