用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将显示错误。或者，如果他们添加了接口中未定义的道具。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短