Category of ambiguous attributes

Question

Category of ambiguous attributes

I am currently working on developing a class that will store values for rows and columns, with each row/column identified by a string. I have provided some code below as an example:

class TMatrix<TYPE>{

    [idRow: string]: { [idCol: string]: TYPE };

    fnset(nmRow: string, nmCol: string, value: TYPE ) {
      if (!this[nmRow]) 
          this[nmRow] = {};
      this[nmRow][nmCol] = value;
    }

    buildHtmlTable(){
    ...
    }
}

Although the code above is functional, typescript is generating an error related to the methods:

Property 'fnset' of type '(nmRow: string, nmCol: string, value: TYPE) => void' is not assignable to string index type '{ [idCol: string]: TYPE; }'.ts(2411)

What could be a potential solution or the correct approach to resolve this issue?

typescript dynamic properties

Answer 1

Answer №1

It is crucial for the index signature to be compatible with all members of the type, including the methods of the class.

To avoid accidental overriding of class methods, a better approach is to use a separate dedicated object to store dynamic values instead of directly utilizing the class. This way, you can prevent situations where someone might inadvertently override a class method by calling fnset('fnset', '', 0) for example.

class TMatrix<TYPE>{

    data: { [idRow: string]: { [idCol: string]: TYPE } } = {};

    fnset(nmRow: string, nmCol: string, value: TYPE ) {
    if (!this.data[nmRow]) 
        this.data[nmRow] = {};
    this.data[nmRow][nmCol] = value;
    }

    buildHtmlTable(){

    }
}

If the decision is to maintain the data within the class, the index signature must be adjusted to be compatible with all members:

class TMatrix<TYPE>{

    [idRow: string]: { [idCol: string]: TYPE } | TMatrix<TYPE>[keyof TMatrix<TYPE>]

    fnset(nmRow: string, nmCol: string, value: TYPE) {
        const data = this[nmRow];
        if (!data) {
            this[nmRow] = data;
        }
        if (typeof data === 'function') { // guard against overriding members, depending on class members this may need modification to exclude other members, this setup works if only extra methods are present, no other fields
            throw  "don't override methods"
        }
        data[nmCol] = value
    }

    buildHtmlTable(){

    }
}

Answer 2

It is crucial for the index signature to be compatible with all members of the type, including the methods of the class.

To avoid accidental overriding of class methods, a better approach is to use a separate dedicated object to store dynamic values instead of directly utilizing the class. This way, you can prevent situations where someone might inadvertently override a class method by calling fnset('fnset', '', 0) for example.

class TMatrix<TYPE>{

    data: { [idRow: string]: { [idCol: string]: TYPE } } = {};

    fnset(nmRow: string, nmCol: string, value: TYPE ) {
    if (!this.data[nmRow]) 
        this.data[nmRow] = {};
    this.data[nmRow][nmCol] = value;
    }

    buildHtmlTable(){

    }
}

If the decision is to maintain the data within the class, the index signature must be adjusted to be compatible with all members:

class TMatrix<TYPE>{

    [idRow: string]: { [idCol: string]: TYPE } | TMatrix<TYPE>[keyof TMatrix<TYPE>]

    fnset(nmRow: string, nmCol: string, value: TYPE) {
        const data = this[nmRow];
        if (!data) {
            this[nmRow] = data;
        }
        if (typeof data === 'function') { // guard against overriding members, depending on class members this may need modification to exclude other members, this setup works if only extra methods are present, no other fields
            throw  "don't override methods"
        }
        data[nmCol] = value
    }

    buildHtmlTable(){

    }
}

Category of ambiguous attributes

Answer №1

Similar questions

Button for enabling and disabling functionality, Delete list in Angular 2

Angular 2 - Beginner's guide to updating the header when navigating to a new route or page

Securing routes in Angular without relying on LocalStorage or Cookies by implementing an Auth Guard

Discover how to access JSON data using a string key in Angular 2

Yes, indeed - Entering the schema of a retrieved field from an Object schema

If the table spans multiple pages, a top margin will be added to ensure proper formatting. This feature is implemented using jspdf-autotable

The Intersection Observer API is caught in a never-ending cycle of rendering

Top choice for React with TypeScript CodeMirror integration

Expanding Arrays in TypeScript for a particular type

What is causing the TypeScript error in the MUI Autocomplete example?

What could be the reason for the react hook form failing to capture the data upon submission?

The expected function is being executed, yet none of the inner functions are invoked

Is it possible to loop through a subset of a collection using *ngFor?

Click function for mat-step event handler

React does not allow _id to be used as a unique key

What is the importance of specifying a language version when parsing a TypeScript source file?

Dayjs is failing to retrieve the current system time

Error: Attempting to access the 'subscribe' property of an undefined value (Observable)

The real file that was brought in after indicating a module in the node_modules directory that was coded in Typescript

Incorporate a Custom Icon into NbSelect