ReactJS 组件用 Typescript 编写

你可以在 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);

有关转换为 ES6 的更多信息，请查看此处

2）添加道具和状态接口：

interface Props {
    name:string;
    optionalParam?:number;
}

interface State {
  //empty in our case
}

class HelloMessage extends React.Component<Props, State> {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
// TypeScript will allow you to create without the optional parameter
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
// But it does check if you pass in an optional parameter of the wrong type
ReactDOM.render(<HelloMessage name="Sebastian" optionalParam='foo' />, mountNode);

现在，如果程序员忘记传递道具，TypeScript 将显示错误。或者，如果尝试传入未在界面中定义的道具。