Use string as variable name in Angular 2+ and Typescript

Question

In regular JavaScript we can add a property to window global object with name from string, like this:

const str = "myVar";
window[str] = "Value";
console.log(myVar);

But is there a way to do the similar job in Angular 2/4 and Typescript? We can store regular variables in component using this.myVar, but is there a way to create the same variable using string for the variable name? Something like:

const str = "myVar";
this[str] = "Value";
// the result should be the similar as this.myVar = "Value";

Technically, this doesn't "create a variable" but add a property to the window object. — Henry
– Henry, Commented Sep 29, 2017 at 6:07
Henry is right, this will work but typescript will give the error in typechecking. I don't think there's a way to make it work like this. — eko
– eko, Commented Sep 29, 2017 at 6:08

yurzui · Accepted Answer · 2017-09-29 06:33:15Z

10

You can allow dynamic properties on your class:

class Test {
  [key: string]: any;

  constructor() {
    const str = "myVar";
    this[str] = "Value";
    console.log(this.myVar);
  }
}

But make sure you really need it because you're loosing typechecking with it:

class Test {

  [key: string]: any;

  constructor() {
    this.teet(); // typo and therefore you will get an error in runtime
  }

  test() {

  }
}

edited Sep 29, 2017 at 6:33

answered Sep 29, 2017 at 6:28

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

notnotundefined · Accepted Answer · 2017-09-29 06:20:58Z

9

I think you can access using the following & Typescript accepts this syntax

this["myVar"]

instead of

this.myVar

answered Sep 29, 2017 at 6:20

notnotundefined

3,8314 gold badges35 silver badges39 bronze badges

6 Comments

P.S. Over a year ago

It's a little unexpected behavior for me, but yes, it works! And without compile errors! So are this["myVar"] and this.myVar different? In my understanding for now they should be the same...

eko Over a year ago

@CommercialSuicide i don't think this answers the question, this is just using this[str] in another manner. You should check yurzui's answer.

notnotundefined Over a year ago

@echonax, right! yurzui 's answer is better than mine ;)

notnotundefined Over a year ago

@CommercialSuicide also dynamic addition of properties should be avoided as it defeats the purpose of Typescript

P.S. Over a year ago

@Thabung, just one time, when I will need to use object properties as variable names ;)

|

Collectives™ on Stack Overflow

Use string as variable name in Angular 2+ and Typescript

2 Answers 2

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Related