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