如何學慣用Typescript寫Reactjs?

tsc


tsc命令會自動根據tsconfig.json裡面配置的情況, 自動幫你把代碼編譯成js, 這是編譯後的js文件

10. 打開demo.html可以看到效果了;

React.createClass 和 Backbone.View.extend 等都是工廠方法創建子類


文字斷了。。。。

class MyView extends React.Component {
render() {
return &hello {this.state.name}&; //會拋異常,因為state是null
}
//不起作用的
getInitialState:(){
return {name:"",age:20};
}
}


需要改成如下方式，下面是官網給出的方案（這裡TypeScript和ES6情況是一樣的）

class MyView extends React.Component {
constructor(props, context) {
super(props, context);

this.state = {
name: "",
};
}
render() {
return &hello {this.state.name}&;
}
}


16、當組件化遇到強類型：

待續...下面會配上實例。

-----------------時間軸 到2016-01-05-------------------

18、關於生產力再拋一個概念：無障礙編程；

說一些小細節吧。

- 用@types去安裝react的聲明文件後，可能會發現 ` import React from "react" ` 會報一個沒有默認導出的錯，你需要在tsconfig.json裡面新增一條` "allowSyntheticDefaultImports":true `的配置。tsx解析出錯的話記得` "jsx":"react" `的配置。

- typescript配合react的話，**不需要**proptypes，typescript的類型檢查比他強多了……

- 如果使用redux的話，為state建立一個類型聲明會讓你方便很多，記得盡量減少對象層級嵌套，不僅僅在使用typescript時方便，而且本身也是最佳實踐。

- redux的connect可以當作裝飾器使用。如果不追求pure function的話，類繼承的寫法可能會很漂亮。

- 如果使用webpack，可以考慮用` awesome-typescript-loader `，據說比` ts-loader `好（但是我沒試過）。

終極技巧：如果可以自由選型、又是個稍重的項目，先去試試Angular……（逃

Fula Li 寫得很全了, 我想補充幾點:

- 對於純新手, 考慮到學習曲線, 不建議同時學React和TS. 最好分開學再一起用.
- 現在 (2017-3) 可以不用tsd或typings了. TS開發者把第三方的 .d.ts 包推到了npm. 使用這些類型定義時 npm install @types/xyz 就行.
- 現在的前端開發往往還用webpack等工具做資源打包. 有志於此的建議也了解一下.

---------

以下是廣告:

我自己做了一個TypeScript模板repo, 歡迎使用 https://github.com/jokester/typescript-boilerplate

用TS寫React的請從 webpack-react 分支開始. 其他還有webpack-preact, heroku (express.js) 等分支.

這個repo的定位是適合小項目和新手, 不追求大和全. 所以不像一些大boilerplate會有 webpack + react + redux + hotload + E2E測試等很多東西.

webpack-react分支的內容就只有webpack / react / 單元測試.

如果使用中遇到問題, 提issue或私信問我都可以.