40

I am following WintellectNow React with TypeScript Tutorial. In the fifth part Sorting and filtering the author creates an interface with optional properties like below :

interface IWidgetToolState {
   filterCol?: WidgetTableCols;
   filterValue?: string;
   sortCol?: WidgetTableCols;
}

There is an enum called WidgetTableCols as below :

enum WidgetTableCols {
    None, Name, Color, Size, Quantity, Price,
}

In a function the author gets the value of enum like this :

const fName: string = 
WidgetTableCols[this.state.sortCol].toLocaleLowerCase();

Here I am getting Type undefined cannot be used as an index type. If I remove ? from the interface it works but later the author creates another function that only sets one of the state values and TypeScript says not all of the state properties are set.

Can anybody let me know how to solve this issue?

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
Abhilash D K
  • 1,223
  • 1
  • 23
  • 39

1 Answers1

63

The compiler just tells you that this.state.sortCol might not have a value because you have the strictNullChecks flag on.

You can first check for its existence:

const fName = this.state.sortCol != null ? 
WidgetTableCols[this.state.sortCol].toLocaleLowerCase() : null;

Which will remove the error (but you will then need to deal with the fact that fName can be null).

You can also use the Non-null assertion operator:

const fName: string = 
WidgetTableCols[this.state.sortCol!].toLocaleLowerCase();

If you're sure that it exists.

Nick Heiner
  • 119,074
  • 188
  • 476
  • 699
Nitzan Tomer
  • 155,636
  • 47
  • 315
  • 299
  • Thanks for the explanation. Will go with non null assertion operator. – Abhilash D K May 07 '17 at 21:20
  • 4
    Javascript allows undefined to be used as an index type. So the following works: x = {}; x[undefined] = 3; Why doesn't typescript allow it? – Aaron Sep 04 '17 at 19:12
  • 13
    @Aaron in js keys of objects are **always** strings, when you're doing this `x[undefined] = 3;` you are basically getting this `x["undefined"] = 3;`. Typescript just forces you to acknowledge that. – Nitzan Tomer Sep 04 '17 at 20:05
  • 4
    Why would this situation occur even if you have strict checks beforehand? i.e. `if (this.state.sortCol && !!this.state.sortCol && etc..) WidgetTableCols[this.state.sortcol]` ? – Milan Velebit Jun 01 '21 at 11:42
  • 1
    Honestly I disagree with Typescript here. Undefined and null CAN be used as index, they just get cast to string. The same is true for numbers. For example `x[4] = 'something'` works just fine but here 4 is also cast to string and is the same as `x['4'] = 'something'`. I don't understand why it would be different for null and undefined. – Marnix Feb 17 '23 at 12:05
  • When reading, seems like `object[undefined]` returns `undefined`. I'm wondering if there is a way in typescript to let me index by a potentially undefined value, and handle the potentially undefined return, instead of having to check for the value – Shachar Har-Shuv Jun 30 '23 at 20:57