类型“未定义”不能用作索引类型

IT技术 reactjs typescript
2021-04-01 22:04:10

我正在关注 WintellectNow React 和 TypeScript 教程。在第五部分排序和过滤中,作者创建了一个具有可选属性的界面,如下所示:

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

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

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

在一个函数中,作者像这样获取 enum 的值:

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

在这里我得到类型“未定义”不能用作索引类型。如果我删除?从接口它工作但后来作者创建了另一个函数,它只设置一个状态值,typescript说不是所有的状态属性都被设置。

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

提前致谢。

1个回答

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

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

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

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

您还可以使用非空断言运算符

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

如果你确定它存在。

Javascript 允许将 undefined 用作索引类型。所以下面的工作: x = {}; x[未定义] = 3; 为什么typescript不允许?
2021-06-11 22:04:10
即使事先有严格的检查,为什么会出现这种情况?if (this.state.sortCol && !!this.state.sortCol && etc..) WidgetTableCols[this.state.sortcol]
2021-06-11 22:04:10
感谢您的解释。将使用非空断言运算符。
2021-06-14 22:04:10
@Aaron 在对象的 js 键中总是字符串,当你这样做时,你x[undefined] = 3;基本上得到了 this x["undefined"] = 3;typescript只是强迫你承认这一点。
2021-06-15 22:04:10