React js Typescript字符串数组变量

Question

我有以下两个部分。我认为我在正确声明数组对象以匹配我声明的接口时遇到麻烦。为什么我的所有属性都收到以下错误？

[0]（10,5）：错误TS2304：找不到名称“颜色”。
[0]（11,5）：错误TS2304：找不到名称“ id”。

app.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

const cars = [
    { id: 1, make: "Make1",  year: 2016, color: "black" },
    { id: 2, make: "Make2",  year: 2006, color: "gray" },
    { id: 3, make: "Make3",  year: 2012, color: "purple" },
];

ReactDOM.render(<CarTool cars={cars} />, document.querySelector("main"));

汽车零件

import * as React from "react";    
import * as ReactDOM from "react-dom";

interface CarProps {
    cars: string[];
}    

export class Car extends React.Component<CarProps, void> {
    public render() {
        return <div>
            <h1>Car Tool</h1>
            <table>
                <thead>
                    <tr>
                        <td>Make</td>
                        <td>Year</td>
                        <td>Color</td>
                    </tr>
                </thead>
                <tbody>
                    {this.props.cars.map((car) => <tr><td>car.make</td></tr>)}
                </tbody>
            </table>
        </div>;
    }
}

Answer 1

这是因为您已经声明道具类型为string []

声明对象的接口

interface Car
{
    id: number, 
    make: string,
    year: number,
    color: string,
}

然后声明你的道具为

interface CarProps {
    cars: Car[];
}