发生这种情况是因为您尝试plotOptions
使用string 访问属性name
。TypeScript理解它name
可能具有任何值,不仅是来自的属性名称plotOptions
。因此,TypeScript需要向其中添加索引签名plotOptions
,因此它知道您可以在中使用任何属性名称plotOptions
。但我建议更改的类型name
,因此它只能是plotOptions
属性之一。
interface trainInfo {
name: keyof typeof plotOptions;
x: Array<number>;
y: Array<number>;
type: string;
mode: string;
}
您还必须稍微更改代码。
首先将数组分配给一些临时变量,因此TS知道数组类型:
const plotDataTemp: Array<trainInfo> = [
{
name: "train_1",
x: data.filtrationData.map((i: any) => i["1-CumVol"]),
y: data.filtrationData.map((i: any) => i["1-PressureA"]),
type: "scatter",
mode: "lines"
},
// ...
}
然后过滤:
const plotData = plotDataTemp.filter(({ name }) => plotOptions[name]);
如果您要从API获取数据并且无法在编译时键入检查道具,则唯一的方法是在您的索引中添加索引签名plotOptions
:
type tplotOptions = {
[key: string]: boolean
}
const plotOptions: tplotOptions = {
train_1: true,
train_2: true,
train_3: true,
train_4: true
}