Question

我有以下两个组成部分。我认为我无法正确声明我的数组对象与我声明的接口相匹配。为什么我的所有属性都会出现以下错误？

[0]（10,5）：错误TS2304：找不到名称＆＃39;颜色＆＃39;。
[0]（11,5）：错误TS2304：找不到姓名＆＃39; id＆＃39;。

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

这是因为您已将道具类型声明为字符串[]

声明对象的接口

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

然后宣告道具为

interface CarProps {
    cars: Car[];
}

React js Typescript字符串数组变量

1 个答案: