title: React + Typescript: Property * is missing in type *
body: <p>I'm trying to go through the <a href="https://facebook.github.io/react/docs/tutorial.html">React Tutorial</a>, but there is an error occurring that I don't understand.</p>
  
  <p>The error messages are:</p>
  
  <pre><code>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'.
  </code></pre>
  
  <p>Here is <code>main.tsx</code>:</p>
  
  <pre><code>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&lt;MyProps, {}&gt; {
      render() {
          return &lt;div className="commentBox"&gt;
                  &lt;h1&gt;Comments&lt;/h1&gt;
                  &lt;CommentList data={this.props.data} /&gt;
                  &lt;CommentForm /&gt;
                  &lt;/div&gt;;
      }
  }
  
  $(() =&gt; {
      React.render(&lt;CommentBox data={data} /&gt;, document.getElementById('content'));
  });
  </code></pre>
  
  <p>And <code>comment.tsx</code>:</p>
  
  <pre><code>import * as React from 'react';
  
  export interface MyProps extends React.Props&lt;any&gt; {
      author: string;
      data: Array&lt;any&gt;;
  }
  
  export class Comment extends React.Component&lt;MyProps, {}&gt; {
      render() {
          let rawMarkup = marked(this.props.children.toString(), {sanitize: true});
          return &lt;div className="comment"&gt;
                   &lt;h2 className="commentAuthor"&gt;
                     {this.props.author}
                   &lt;/h2&gt;
                   &lt;span dangerouslySetInnerHTML={{__html: rawMarkup}} /&gt;
                 &lt;/div&gt;;
      }
  }
  
  export class CommentList extends React.Component&lt;MyProps, {}&gt; {
      render() {
          return &lt;div className="commentList"&gt;
                  &lt;Comment author="Pete Hunt"&gt;Some comment&lt;/Comment&gt;
                  &lt;Comment author="Jordan Walke"&gt;Another *comment*&lt;/Comment&gt;
                  &lt;/div&gt;;
      }
  }
  
  export class CommentForm extends React.Component&lt;{}, {}&gt; {
      render() {
          return &lt;div className="commentForm"&gt;
                 A CommentForm
                 &lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Also, I'm using the type definitions from <a href="https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react.d.ts">DefinitelyTyped</a>.</p>