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 badges1 Answer
Reset to default 4ment.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.