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

Question

我正在使用TypeScript Tutorial关注WintellectNow React.在第五部分中,作者进行排序和过滤,创建一个具有可选属性的界面,如下所示:

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();

这里我得到Type'undefined'不能用作索引类型.如果我删除？从接口工作,但后来作者创建了另一个只设置状态值和打字稿之一的函数,表示并未设置所有状态属性.

任何人都可以让我知道如何解决这个问题.

提前致谢.

Answer 1

编译器只是告诉你this.state.sortCol可能没有值,因为你有strictNullChecks标志.

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

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

这将删除错误(但您将需要处理fName可以为null 的事实).

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

如果你确定它存在.

老实说，我不同意 Typescript 的观点。Undefined 和 null 可以用作索引，它们只是转换为字符串。对于数字也是如此。例如，`x[4] = 'something'` 工作得很好，但这里 4 也被转换为字符串，并且与 `x['4'] = 'something'` 相同。我不明白为什么 null 和 undefined 会有所不同。 (3认同)
Javascript 允许使用 undefined 作为索引类型。所以下面的工作： x = {}; x[未定义] = 3; 为什么打字稿不允许？ (2认同)
对象的js键中的@Aaron始终是字符串，当您执行x [undefined] = 3;时，基本上就得到了x [“ undefined”] = 3;`。打字稿只是迫使您承认这一点。 (2认同)
为什么事前检查得很严格，还是会出现这种情况呢？即 `if (this.state.sortCol && !!this.state.sortCol && 等..) WidgetTableCols[this.state.sortcol]` ？ (2认同)