reactjs - Modellklassdefinition med redux-orm och TypeScript

Jag använder redux-orm med JS och allt fungerar bra, men jag har problem med att översätta min kod från JS till TypeScript.

Jag har redan implementerat metoden render() i min Folder Model-klass, men TS-transpilatorn säger:

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

Hur kan jag indikera för TypeScript att name-egenskapen finns i Folder-instansobjekt?

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

Svar #1

Du kan upprepa alla IFolder i class Folder

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

eller använd detta trick för att inte upprepa kod:

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

export class Folder extends IFolder {

Svar #2

Babel-transpileringsutdata introducerar ytterligare egenskapsbeskrivare i Model-prototypkedjan, vilket stör beskrivare som installerats av redux-orm under registrering av schemat. Detta är den grundläggande orsaken till felet Maximum call stack size exceeded.

@types/redux-orm för redux-orm:0.13 fungerar lite annorlunda.

Källan som tillhandahålls saknar ModelFields, så jag kommer att hoppa över dessa och anta att de förväntade fälten inkluderar:

  • id - attribut
  • name - attribut
  • parent - själv-refererande främmande nyckel

Exempel :

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

Typer för redux-orm 0.14 kommer sannolikt att utnyttja deklarationssammanfogning för att möjliggöra renare Model-definitioner.

Relaterade artiklar