reactjs - Type 'undefined' cannot be used as index type

Question

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 interface it works but later the author creates another function that only sets one of the state value and typescript says not all of the state properties are set.

Can anybody let me know how to solve this issue.

Thanks in advance.

Answer 1

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 it's 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.