打字稿中对象数组接口的问题

Question

我有一个数组，它是我在生命周期钩子中填充的状态条目componentDidMount

它非常简单：

state{
array:[{a:0,b:0},{a:1,b:1},{a:2,b:2}]
}

但是当我尝试访问它时，我总是收到错误：

Property 'a' does not exist on type 'never'.

我想我在这里声明接口时遇到了麻烦，找不到合适的方法来做到这一点。 像这样的事情可能会做：

interface IState{
array: object[]
}

组件完整版：

import * as React from "react";
import phrasalVerbs from "../data/phrasalVerbs";
interface IAnswerOptions {
pVerb: string;
meaning: string;
}
interface IState {
pVerbs: object;
progress: number;
answerOptions: IAnswerOptions[];
}
class PhrasalVerbs extends React.Component<{}, IState> {
public state = {
pVerbs: phrasalVerbs,
progress: 0,
answerOptions: []
};
public componentDidMount() {
this.randomVariants();
}
public randomVariants = () => {
let randomVariants: any[] = [];
const currentVerbs = this.state.pVerbs.data;
const shuffledVerbs = currentVerbs
.map(a => [Math.random(), a])
.sort((a: any, b: any): any => a[0] - b[0])
.map(a => a[1]);
randomVariants = [shuffledVerbs[0], shuffledVerbs[1], shuffledVerbs[2]];
this.setState({
...this.state,
answerOptions: randomVariants
});
};
public render() {
const { pVerbs, progress } = this.state;
return (
<div>
<div>{pVerbs.data[progress].pVerb}</div>
{/* <div>
{this.state.answerOptions
? this.state.answerOptions[0].meaning
: null}
</div> */}
</div>
);
}
}
export default PhrasalVerbs;

Answer 1

您可以为对象定义类型：

interface IMyObject {
a: number;
b: number;
}
interface IState {
array: IMyObject[];
}
class MyComponent extends React.Component<any, IState> {
state = {
array:[{a:0,b:0},{a:1,b:1},{a:2,b:2}]
};
render() {
// should be OK
const firstA: number = this.state.array[0].a;
return <h1>{firstA}</h1>;
}
}

编辑：查看您的代码，您似乎不小心覆盖了state的类型。Typescript 将自动(有时无济于事(允许您覆盖类中的字段类型，因此，尽管您根据 IState 定义了组件，但内部state属性的类型由您为其提供的默认值定义。

在这种情况下，空数组具有推断类型的never[]，因此您最终会得到一个无法使用其元素的数组。

Answer 2

嗯，你在tsconfig中设置了strictPropertyInitialization吗？