用Typescript编写的ReactJS组件
示例
实际上，您可以像在Facebook的示例中那样在Typescript中使用ReactJS的组件。只需将“jsx”文件的扩展名替换为“tsx”：
//helloMessage.tsx:
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);但是为了充分利用Typescript的主要功能（静态类型检查），应该做几件事：
1）将React.createClass示例转换为ES6类：
//helloMessage.tsx:
class HelloMessage extendsReact.Component{
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);2）接下来添加Props和State接口：
interface IHelloMessageProps {
name:string;
}
interface IHelloMessageState {
//在我们的情况下是空的
}
class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {
constructor(){
super();
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);如果程序员忘记传递道具，现在Typescript将显示错误。或者，如果他们添加了接口中未定义的道具。