TS2739 类型“any[]”缺少来自“JSON”类型的以下属性：解析、字符串化、[Symbol.toStringTag]

Question

在我的 react-typescript 项目中，当我尝试将JSON作为道具传递时遇到了打字错误。

class MainNewsFeed extends React.Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        const bitcoinJson = [...require("./feeds/newsJson.json")];
        return (
            <NewsFeedCol json={newsJson}/>
        );
    }
}

class NewsFeedCol extends React.Component<{ newsJson:JSON },  {}> {
    constructor(props: any) {
        super(props);
        let JsonData = [...props.json]
    }
    render() {
        return (
            <Row>
                <Col sm={12} md={6} lg={4}>
                    <NewsFeedItem index={1}/>
                </Col>
            </Row>
        );
    }
}


/Users/simon/Code/web/thedrewreport/frontend/thedrewreport/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/thedrewreport/frontend/thedrewreport/src/MainNewsFeed.tsx(18,26):
Type 'any[]' is missing the following properties from type 'JSON': parse, stringify, [Symbol.toStringTag]  TS2739

    17 |         return (
  > 18 |             <NewsFeedCol json={bitcoinJson}/>
       |                          ^
    19 |         );
    20 |     }
    21 | }

你如何正确处理在这里打字？

Answer 1

似乎您想将newsJson注释为newsJson类型。 但是， JSON是一个模块（具有 JSON.parse 和 JSON.stringify），而不是 type 。 要注释newsJson属性，您需要知道您想要的对象的确切形状，可能将其制作成interface 。 例如

interface NewsFeedsColProp {
  newsJson: {
     name: string;
     provider: string;
     id: number;
   }
}

class NewsFeedCol extends React.Component<NewsFeedsColProp ,  {}>

请注意字段name 、 provider和id - 我希望newsJson是具有这 3 个字段的对象。

name 、 provider和id字段只是我自己编造的； 您需要确定newsJson道具将获得的数据的确切形状。

如果您不知道确切的形状，您可以将newsJson为any类型，或“未知对象”类型： {[key: string]: any} - 这不是一个很好的做法

interface NewsFeedsColProp {
  newsJson: {
    [key: string]: any,
  }
}

// Or
interface NewsFeedsColProp {
  newsJson: any
}

class NewsFeedCol extends React.Component<NewsFeedsColProp ,  {}>

希望我说的有道理