Encountering TS7053 error while trying to access component variables using type indexing in Angular 13

Question

Encountering TS7053 error while trying to access component variables using type indexing in Angular 13

When trying to access a variable with type indexing in Angular 13, I encountered a TS7053 error. However, in this Stackblitz example, the same code works without any errors.

export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  Prop01 : boolean = false;
  Prop02 : boolean = false;
  Prop03 : boolean = false;

  private setProp(prop: string, value: boolean): void {

    this[prop] = value;   // this works in the Stackblitz but not in my project

  }
}

The only difference is that I'm using version 13 while Stackblitz still uses version 12. I checked my VS Code extensions and noticed that Ts Lint was deprecated in favor of Es Lint. I disabled it and restarted VS Code, but this[prop] still triggers an error that states:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'MyComponent'. No index signature with a parameter of type 'string' was found on type 'MyComponent'.

I have successfully done this in older Angular versions, so I'm puzzled by why it is not working suddenly. Does anyone have an insight into why this is happening?

angular typescript

Answer 1

Answer №1

To improve your code, I recommend defining an enum containing those variable names:

export enum PropertyEnums {
  Prop01: 'Prop01',
  Prop02: 'Prop02',
  Prop03: 'Prop03'
}

Component:

import { PropertyEnums } from './propertyEnums.ts'

export class AppContainer  {
  name = 'Vue';
  Prop01 : boolean = false;
  Prop02 : boolean = false;
  Prop03 : boolean = false;

  private setProperty(prop: string, value: boolean): void {
    this[prop as PropertyEnums] = value;
    console.log(this[prop as PropertyEnums]); // true or false, depending on the value set
  }
}

Starting from Angular version 12, strict mode is enabled by default, ensuring stronger typing. It is advisable to define a signature for accessing parameters in order to comply with this strict mode. In earlier versions, strict mode had to be manually enabled.

Answer 2

To improve your code, I recommend defining an enum containing those variable names:

export enum PropertyEnums {
  Prop01: 'Prop01',
  Prop02: 'Prop02',
  Prop03: 'Prop03'
}

Component:

import { PropertyEnums } from './propertyEnums.ts'

export class AppContainer  {
  name = 'Vue';
  Prop01 : boolean = false;
  Prop02 : boolean = false;
  Prop03 : boolean = false;

  private setProperty(prop: string, value: boolean): void {
    this[prop as PropertyEnums] = value;
    console.log(this[prop as PropertyEnums]); // true or false, depending on the value set
  }
}

Starting from Angular version 12, strict mode is enabled by default, ensuring stronger typing. It is advisable to define a signature for accessing parameters in order to comply with this strict mode. In earlier versions, strict mode had to be manually enabled.

Answer 3

Answer №2

When working with three separate variables instead of an object, like in your scenario, it is recommended to use a type declaration for your variable names. By defining a type for your variables, you can then use the as keyword to specify the type when setting the variables. Here's an example:

type PropType = 'Prop01' | 'Prop02' | 'Prop03';

private setProp(prop: string, value: boolean): void {
  this[prop as PropType] = value;
}

Answer 4

When working with three separate variables instead of an object, like in your scenario, it is recommended to use a type declaration for your variable names. By defining a type for your variables, you can then use the as keyword to specify the type when setting the variables. Here's an example:

type PropType = 'Prop01' | 'Prop02' | 'Prop03';

private setProp(prop: string, value: boolean): void {
  this[prop as PropType] = value;
}

Encountering TS7053 error while trying to access component variables using type indexing in Angular 13

Answer №1

Answer №2

Similar questions

Angular is not rendering styles correctly

Is it necessary to continue utilizing PropTypes when incorporating Typescript into a React application?

Difficulty with Angular 11 Material Theme showing Purple/Green color combination

Encountering a memory issue while trying to read and display Excel data in an Angular 2 application

Type Conversion in Typescript

Is there a way to verify that my transition from angular 2 to angular 4 in my app was successful?

Angular 2: Finding the object with the highest attribute value in an array of objects

Creating a feature that automatically determines the data type of a value using the provided key

Insert a new item into an Observable within Ionic 4

Executing the cucumberjs + playwright tests after starting the angular app using the ng serve command

Drizzle ORM retrieve unique string that is not a database column

Error: 'directive' element is unrecognized in the test environment

Variables for Angular Material themes

In Angular components, data cannot be updated without refreshing the page when using setInterval()

Validating dynamic textboxes in Angular with custom rules

Is it possible to pass a Styled Components Theme as Props to a Material UI element?

Implementing a unit test in Angular for an HTTP interceptor that adds an XCSRF token to the header

Implementing the click event in angular2-openlayers will display the information for the selected marker

Recommendations for Organizing Multiple "Isolated" Applications Using MVC 5 and Angular 2

Tips for bringing in an enum from TypeScript?