React + Typescript: Property * is missing in type *

Question

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

The error messages are:

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'.

Here is 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'));
});

And 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>;
    }
}

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.

Answer 1

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'.

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 components.