自從TypeScript宣布支援React之後，就打算要把React專案的寫法改為使用TypeScript。無奈事情太多，一直延宕到現在。最近才有時間去學習瞭解如何整合這兩個技術，試著用一個簡單的Hello World來驗證可行性。
[TypeScript]使用TypeScript寫React.JS
自從TypeScript宣布支援React之後，就打算要把React專案的寫法改為使用TypeScript。無奈事情太多，一直延宕到現在。最近才有時間去學習瞭解如何整合這兩個技術，試著用一個簡單的Hello World來驗證可行性。
初始化專案
這個Lab使用的編輯器是Visual Studio Code，因為Visual Studio太Friendly，所以很多事情可能都被它背地裡做掉，所以可能做完了，還是搞不清楚怎麼一回事。
要用Visual Studio Code 寫TypeScript，需要一些前置作業。請參考－[TypeScript]在Visual Studio Code中使用TypeScript。簡單來說，就是需要設定好兩個檔案：tsconfig.json與tasks.json。
列出其內容如下：
tsconfig.json
注意到，這裡的最後一個參數設定-"jsx": "react"非常重要，是讓要TypeScript可以編譯tsx檔，也就是用TypeScript寫的jsx檔。沒有這個參數，編譯器會無法編譯jsx語法。如果需要瞭解Compiler的參數，可以參考Microsoft的TypeScript Compiler Options說明。
{
"compilerOptions": {
"target": "es5",
"module": "amd",
"sourceMap": true,
"jsx": "react"
}
}
tasks.json
基本上沒什麼變動，只有一個地方要注意：args這個參數要設定為空白－"args": []。這樣tsconfig.json的參數才能正確的被tsc所使用。
{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"showOutput": "silent",
"args": [],
"problemMatcher": "$tsc"
}
TypeScript定義檔-tsd.json
使用TypeScript寫React，會需要React的定義檔以取得型別定義及支援IntelliSense。最簡單的管理方式，就是使用TypeScript定義檔管理程式-Typings或是tsd。我目前使用tsd，可以參考[TypeScript]使用TSD管理TypeScript定義檔。
建立一個檔案-tsd.json，其內容如下所示。有了這個設定檔之後，在windows的命令提示字元，或是Mac的終端機，在該檔案同目錄下，執行指令-tsd install。這樣，就可以輕鬆的取得所需的TypeScript定義檔。
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"react/react.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-dom.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-create-fragment.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-global.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-css-transition-group.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-linked-state-mixin.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-transition-group.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-perf.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-pure-render-mixin.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-update.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
},
"react/react-addons-test-utils.d.ts": {
"commit": "3a86e056dc018541d82dd74639fca18ba8d605da"
}
}
}
開始寫程式
開發環境設定好之後，接下來就簡單了，唯一的障礙就是瞭解TypeScript的語法。
app.tsx
React是使用JSX語法，在TypeScript中，可以建立tsx檔，以在裡面寫JSX語句。
建立一個檔案-app.tsx，輸入以下程式碼。這段程式碼定義了一個React的Compoent-Demo，以及供Demo使用的props的定義。
/// <reference path="typings/tsd.d.ts" />
class DemoProps {
public name: string;
}
class Demo extends React.Component<DemoProps, any> {
constructor(props: DemoProps) {
super(props);
}
render() {
return <div>Hello {this.props.name}</div>
}
}
ReactDOM.render(
<Demo name="World" />,
document.getElementById('example')
);
index.html
另外再建立一個網頁-index.html，用來檢視TypeScript產生的React結果。
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.14.7.js"></script>
<script src="http://fb.me/react-dom-0.14.7.js"></script>
</head>
<body>
<div id="example"></div>
<script src="app.js" ></script>
</body>
</html>
在Visual Studio Code中按下Ctrl+Shift+B組合鍵，以進行編譯。如果沒意外的話，Visual Studio Code就會依據我們建立的app.tsx檔產生對應的app.js檔。
然後在瀏覽器上開啟index.html，就可以看到Hello World出現在畫面上了。
