Question

我正在尝试浏览React Tutorial，但发生了一个我不理解的错误。

错误消息是：

comment.tsx(30,5): error TS2324: Property 'data' is missing in type 'MyProps'.
comment.tsx(31,5): error TS2324: Property 'data' is missing in type 'MyProps'.
main.tsx(20,17): error TS2324: Property 'author' is missing in type 'MyProps'.
main.tsx(27,18): error TS2324: Property 'author' is missing in type 'MyProps'.

以下是main.tsx：

import * as React from 'react';
import 'jquery';
import { CommentList, CommentForm, MyProps } from './comment';

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

class CommentBox extends React.Component<MyProps, {}> {
    render() {
        return <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.props.data} />
                <CommentForm />
                </div>;
    }
}

$(() => {
    React.render(<CommentBox data={data} />, document.getElementById('content'));
});

comment.tsx：

import * as React from 'react';

export interface MyProps extends React.Props<any> {
    author: string;
    data: Array<any>;
}

export class Comment extends React.Component<MyProps, {}> {
    render() {
        let rawMarkup = marked(this.props.children.toString(), {sanitize: true});
        return <div className="comment">
                 <h2 className="commentAuthor">
                   {this.props.author}
                 </h2>
                 <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
               </div>;
    }
}

export class CommentList extends React.Component<MyProps, {}> {
    render() {
        return <div className="commentList">
                <Comment author="Pete Hunt">Some comment</Comment>
                <Comment author="Jordan Walke">Another *comment*</Comment>
                </div>;
    }
}

export class CommentForm extends React.Component<{}, {}> {
    render() {
        return <div className="commentForm">
               A CommentForm
               </div>;
    }
}

我记得读过接口仅用于类型检查，并且在转换后的代码中不存在。但是，我仍然不完全理解为什么我会收到这些错误。

另外，我正在使用DefinitelyTyped中的类型定义。

Answer 1

comment.tsx（30,5）：错误TS2324：属性＆＃39;数据＆＃39;类型＆＃39; MyProps＆＃39;中缺少。 comment.tsx（31,5）：错误TS2324：属性＆＃39;数据＆＃39;类型＆＃39; MyProps＆＃39;中缺少。 main.tsx（20,17）：错误TS2324：属性＆＃39;作者＆＃39;类型＆＃39; MyProps＆＃39;中缺少。 main.tsx（27,18）：错误TS2324：属性＆＃39;作者＆＃39;类型＆＃39; MyProps＆＃39;。
中缺少

MyProps CommentList（.author} MyProps和Comment .data可能会让vagrant up感到困惑（不包含vagrant up）。

如果您为这两个组件使用不同的 Prop接口，那就更好了。

React + Typescript：类型中缺少属性

1 个答案:

React + Typescript：类型*中缺少属性*

1 个答案:

React + Typescript：类型中缺少属性