最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React + Typescript: Property * is missing in type * - Stack Overflow

programmeradmin3浏览0评论

I'm trying to go through the React Tutorial, but there is an error occurring that I don't understand.

The error messages are:

ment.tsx(30,5): error TS2324: Property 'data' is missing in type 'MyProps'.
ment.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'.

Here is main.tsx:

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

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

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

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

And ment.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="ment">
                 <h2 className="mentAuthor">
                   {this.props.author}
                 </h2>
                 <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
               </div>;
    }
}

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

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

I remember reading that interfaces are only for type checking and do not exist in the transpiled code. However, I still don't fully understand why I'm getting these errors.

Also, I'm using the type definitions from DefinitelyTyped.

I'm trying to go through the React Tutorial, but there is an error occurring that I don't understand.

The error messages are:

ment.tsx(30,5): error TS2324: Property 'data' is missing in type 'MyProps'.
ment.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'.

Here is main.tsx:

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

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

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

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

And ment.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="ment">
                 <h2 className="mentAuthor">
                   {this.props.author}
                 </h2>
                 <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
               </div>;
    }
}

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

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

I remember reading that interfaces are only for type checking and do not exist in the transpiled code. However, I still don't fully understand why I'm getting these errors.

Also, I'm using the type definitions from DefinitelyTyped.

Share Improve this question asked Sep 7, 2015 at 4:06 Jesse GoodJesse Good 52.4k14 gold badges130 silver badges173 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

ment.tsx(30,5): error TS2324: Property 'data' is missing in type 'MyProps'. ment.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'.

You are probably confusing MyProps for CommentList (does not contain .author) and MyProps for Comment (does not contain .data).

Better if you use different Prop interfaces for the two ponents.

发布评论

评论列表(0)

  1. 暂无评论