Building a Model Class with redux-orm and TypeScriptCreating a new Model Class with

Question

Building a Model Class with redux-orm and TypeScriptCreating a new Model Class with

I've been successfully using redux-orm with JavaScript, however, I'm facing issues when trying to convert my code to TypeScript.

Even though I have already implemented the render() method in my Folder Model Class, the TypeScript transpiler is showing an error message:

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

How can I inform TypeScript that the name property exists in instances of the Folder class?

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

reactjs typescript redux redux-orm

Answer 1

Answer №1

If you want to avoid repeating all instances of IFolder within class Folder, you can utilize the following trick:

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

Alternatively, you could use this workaround to prevent duplicating code:

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

export class Folder extends IFolder {

Answer 2

If you want to avoid repeating all instances of IFolder within class Folder, you can utilize the following trick:

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

Alternatively, you could use this workaround to prevent duplicating code:

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

export class Folder extends IFolder {

Answer 3

Answer №2

When Babel transpiles code, it adds extra property descriptors to the prototype chain of the Model, causing conflicts with existing descriptors set by redux-orm during schema registration. This is why the "Maximum call stack size exceeded" error occurs.

@types/redux-orm for version redux-orm:0.13 functions differently.

The provided source code lacks the definition of ModelFields, so we will assume that the expected fields consist of:

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

Here's an 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')
    }
}

In redux-orm version 0.14, it is anticipated that types will use declaration merging to facilitate cleaner Model definitions.

Answer 4

When Babel transpiles code, it adds extra property descriptors to the prototype chain of the Model, causing conflicts with existing descriptors set by redux-orm during schema registration. This is why the "Maximum call stack size exceeded" error occurs.

@types/redux-orm for version redux-orm:0.13 functions differently.

The provided source code lacks the definition of ModelFields, so we will assume that the expected fields consist of:

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

Here's an 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')
    }
}

In redux-orm version 0.14, it is anticipated that types will use declaration merging to facilitate cleaner Model definitions.

Building a Model Class with redux-orm and TypeScriptCreating a new Model Class with

Answer №1

Answer №2

Similar questions

Error message: "Context is being utilized outside of the provider - nextjs 13"

Learn how to easily set a radio button using Angular 4 and JavaScript

The deletion of property '1' from the [object Array] is not possible

Customize the date format of the Datepicker in Angular by implementing a personalized pipe

Is utilizing React's useEffect hook along with creating your own asynchronous function to fetch data the best approach

React Material-UI background image not covering entire screen

Adding an exception for ClickAwayListener in React-MUI

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

Steps to incorporate multiple line selections in a select dropdown using Material UI

React component state remains static despite user input

Leveraging nginx for serving dynamic content

Show the React component upon clicking the Add button

Error encountered when trying to start ReactJS with npm. Issue with the project's dependency tree

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

Having trouble downloading files in React and Node.js

Is there a way to conceal 'private' methods using JSDoc TypeScript declarations?

Are there any possible resolutions to the issues plaguing Next.Js?

My React app is facing challenges in production due to issues with webpack

Encountering a problem with React components displaying incorrect sizes while utilizing flexbox styling

An issue occurred while attempting to retrieve Firebase data using an HTTP GET request