ReactJS 组件用 Typescript 编写

实际上你可以像在 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 extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);

2）接下来添加 Props 和 State 接口：

interface IHelloMessageProps {
    name:string;
}

interface IHelloMessageState {
  //empty in our case
}

class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {
  constructor(){
    super();
  }  
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

如果程序员忘记传递道具，现在 Typescript 将显示错误。或者，如果他们添加了未在界面中定义的道具。