5

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.

1 Answer 1

4

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks. Creating separate interfaces solved the problem. Looking at the transpiled JS helped also, basically <Comment author="Pete Hunt">Some comment</Comment> becomes React.createElement(Comment, {"author": "Pete Hunt"}, "Some comment"). So a prop in JavaScript is just {"author": "Pete Hunt"}. So TypeScript was telling me I never used the data property on Comment? I'm still a little fuzzy on how interfaces work in TypeScript. Basically why are there two MyProps?
Two separate interfaces for two separate contracts for two separate components
Thanks. I guess contract is the key word. The first parameter (P) to React.Component<P, S> defines the shape of properties, so I need to make sure the properties I use matches with that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.