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 將顯示錯誤。或者,如果他們新增了未在介面中定義的道具。