0

I'm trying to access a variable with type indexing in Angular 13 and am getting a TS7053 error. This stackblitz shows exactly what I'm doing however it works perfectly fine in there with no error.

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 I'm using V13 while stackblitz still uses V12. I looked at my VS Code extensions and saw Ts Lint was deprecated in favor of Es Lint so I disabled it and rebooted VS Code but this[prop] still throws an error that says

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've done this in older versions of Angular so I don't understand what's making it not work all of a sudden, anyone know why this is?

Optiq
  • 2,835
  • 4
  • 33
  • 68

2 Answers2

0

I would suggest creating an enum with those variable names:

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

Component:

import {myEnum} from './myEnums.ts'

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 as MyEnum] = value;
    console.log(this[prop as myEnum]); // true or false, whatever your send
  }
}

Angular v12 was the first version it included strict mode enable (which is really good) by default, so it's pretty much being strict asking you to create a signature for accessing that parameter.

You could do that in older versions since strict mode was not enable there unless you set it "on" manually

Andres2142
  • 2,622
  • 2
  • 14
  • 19
  • that's not working in angular 13. The enum through errors saying "no duplicates". I tried defining them with `=` instead of `:` and the error went away, but I'm back to the same ts error as before. – Optiq Dec 22 '21 at 06:34
0

As you are using 3 separate variables instead of an object (for objects there are plenty of questions and answers to, e.g: Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; })

In your case with your variables I would use a type with your variable names declared and then you can call as for your type. So something like:

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

and then your function:

private setProp(prop: string, value: boolean): void {
  this[prop as PropType] = value;
}
AT82
  • 71,416
  • 24
  • 140
  • 167
  • Ok I just tried this and unfortunately I still get the same error. – Optiq Dec 22 '21 at 08:33
  • Hmm.... how does your project setup look like? Here is Angular13 with strict mode and works with the above: https://stackblitz.com/edit/angular-ktgqmt?file=tsconfig.json The stackblitz you shared did not have strict mode setup, so that's why it didnt cause error. If you could replicate this in my stackblitz with your configs, that would be great. BTW, need to run my stackblitz in Chrome. – AT82 Dec 22 '21 at 08:41