实际上,您可以像在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将显示错误。或者,如果他们添加了接口中未定义的道具。