javascript - 类型 'undefined' 不能用作索引类型

Question

我正在关注 WintellectNow React with TypeScript 教程。在第五部分排序和过滤中，作者创建了一个具有如下可选属性的接口(interface):

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

有一个名为 WidgetTableCols 的枚举，如下所示:

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

在一个函数中，作者像这样获取枚举的值:

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

这里我得到类型 undefined cannot used as an index type。如果我从界面中删除 ? 它会起作用，但后来作者创建了另一个函数，该函数仅设置一个状态值，TypeScript 表示并非所有状态属性都已设置。

谁能告诉我如何解决这个问题？

Answer 1

编译器只是告诉您 this.state.sortCol 可能没有值，因为您打开了 strictNullChecks 标志。

您可以先检查它是否存在:

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

这将消除错误(但您随后需要处理 fName 可以为 null 的事实)。

您还可以使用 Non-null assertion operator :

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

如果您确定它存在。