React プロジェクトで TypeScript を試しているのですが、次のエラーが発生します。
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'.
No index signature with a parameter of type 'string' was found on type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'
これは、コンポーネント内の配列をフィルタリングしようとすると表示されます
.filter(({ name }) => plotOptions[name]);
これまで私は「TypeScriptでのオブジェクトのインデックス作成」という記事を見てきました(https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi) も同様のエラーが発生したため、type にインデックス署名を追加しようとしましたがplotTypes
、それでも同じエラーが発生します。
私のコンポーネントコード:
import React, { Component } from "react";
import createPlotlyComponent from "react-plotly.js/factory";
import Plotly from "plotly.js-basic-dist";
const Plot = createPlotlyComponent(Plotly);
interface IProps {
data: any;
}
interface IState {
[key: string]: plotTypes;
plotOptions: plotTypes;
}
type plotTypes = {
[key: string]: boolean;
train_1: boolean;
train_2: boolean;
train_3: boolean;
train_4: boolean;
};
interface trainInfo {
name: string;
x: Array<number>;
y: Array<number>;
type: string;
mode: string;
}
class FiltrationPlots extends Component<IProps, IState> {
readonly state = {
plotOptions: {
train_1: true,
train_2: true,
train_3: true,
train_4: true
}
};
render() {
const { data } = this.props;
const { plotOptions } = this.state;
if (data.filtrationData) {
const plotData: 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"
},
{
name: "train_2",
x: data.filtrationData.map((i: any) => i["2-CumVol"]),
y: data.filtrationData.map((i: any) => i["2-PressureA"]),
type: "scatter",
mode: "lines"
},
{
name: "train_3",
x: data.filtrationData.map((i: any) => i["3-CumVol"]),
y: data.filtrationData.map((i: any) => i["3-PressureA"]),
type: "scatter",
mode: "lines"
},
{
name: "train_4",
x: data.filtrationData.map((i: any) => i["4-CumVol"]),
y: data.filtrationData.map((i: any) => i["4-PressureA"]),
type: "scatter",
mode: "lines"
}
].filter(({ name }) => plotOptions[name]);
return (
<Plot
data={plotData}
layout={{ width: 1000, height: 1000, title: "A Fancy Plot" }}
/>
);
} else {
return <h1>No Data Loaded</h1>;
}
}
}
export default FiltrationPlots;
ベストアンサー1
将来これに遭遇する人のために:
TypeScriptエラーが発生した場合
'...文字列型の式はインデックスに使用できません...'
次に、単に「文字列型の式」がそのオブジェクトの型のキーであることを指定します。たとえば、
const someObj:ObjectType = data;
const field = 'username';
// This gives an error
const temp = someObj[field];
// Solution 1: When the type of the object is known
const temp = someObj[field as keyof ObjectType]
// Solution 2: When the type of the object is not known
const temp = someObj[field as keyof typeof someObj]