Typescript + React 新手篇
前言
TS是什么
TypeScript = Type + Script(標準JS)。
TS的官方網站：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript。TypeScript是一個編譯到純JS的有類型定義的JS超集。
TS優點
- TS 最大的優勢是它提供了強大的靜態分析能力，結合 TSLint 能對代碼做到更加嚴格的檢查約束。傳統的 EcmaScript 由于沒有靜態類型，即使有了 ESLint 也只能做到很基本的檢查，一些 typo 問題可能線上出了 Bug 后才被發現。
- TS 讓代碼更加健壯，尤其是對于大型項目，編譯通過幾乎就代表運行正常，也給重構增加了很多信心。
- TS 類型聲明提高了代碼的可讀性、結構清晰
- IDE的提示更加智能
目標
- 完成td的媒體模塊(基于react+umi+ant design),重構以前的ES6代碼為TS代碼
- umi-typescript 腳手架
- 跑通代碼
- 新建媒體頁面
- 創建媒體model
- 媒體service
- charles
- 接入dev環境
- 接入鑒權
- 頁面列表
- 路由配置提取出來
- 結合td umi/webpack/ dva 配置
- 全局錯誤信息從接口讀取
- 更換主題
- 深入代碼(最重要的部分)
花了大概兩天時間實現以上勾選內容，主要是熟悉TS的配置文件、構建配置、ts語法、以及react、dva如何寫。
安裝依賴
基本配置
tsconfig.json
這個文件指定了用來編譯這個項目的根文件和編譯選項
JSX參數指定工作模式：preserve 模式、 react 模式以及 react-native 模式。這三個模式只影響編譯策略。preserve 模式生成代碼中會保留 JSX ，以供后續的轉換操作使用(比如：Babel)，輸出的文件是 .jsx 格式的;而 react模式則會直接編譯成 React.createElement，在使用前就不需要再進行 JSX 轉換了，輸出的文件是 .js 格式的;react-native模式相當于preserve，它也保留了所有的JSX，但是輸出文件的擴展名是.js。
jsconfig.json
指定根文件和JavaScript語言服務提供的功能選項。
提示：如果您不使用JavaScript，則無需擔心jsconfig.json。
提示：jsconfig.json源于tsconfig.json，是TypeScript的配置文件。jsconfig.json相當于tsconfig.json的“allowJs”屬性設置為true。
webpack配置
文件后綴改成ts或者tsx
文件名為ts和tsx(React)后綴的代碼了，它可以和現有的ES6代碼共存，IDE會自動校驗這部分代碼，webpack打包也沒問題了。
業務代碼
目錄截圖
data.d.ts
定義業務對象數據結構接口(interface)，字段類型可以是number，string，boolean，也可以是業務對象(下方的Member)，也可以是多個值中的一個(下方的status，可以設置成枚舉)，不確定類型的時候用any，數組的話用‘類型[]’，字段不一定存在用‘?’
model.ts
處理數據和邏輯，包含同步更新 state 的 reducers，處理異步邏輯的 effects，訂閱數據源的 subscriptions 。
Partial 作用是將傳入的屬性變為可選項。
Readonly 作用是將傳入的屬性變為只讀。
service.ts
定義接口請求的路徑、方法和參數，返回為Promise。
類組件
connect
connect dva 和 react component
函數組件
在@types/react中已經預定義一個類型type SFC，它也是類型interface StatelessComponent 的一個別名，此外，它已經有預定義的children和其他(defaultProps、displayName等等…)，所以我們不用每次都自己編寫!
form組件
高階函數
最后
TS 使得代碼變得非常清晰、可讀、規范，雖然改起來有些工作量。希望后續的項目中可以應用起來。
推薦文章
1. ts文檔 https://www.tslang.cn/docs/handbook/basic-types.html
2. ts2.8終極react組件 https://juejin.im/post/5b07caf16fb9a07aa83f2977#heading-6
3. ant design pro ts 版本 https://github.com/ant-design/ant-design-pro
4.<TypeScript，初次見面，請多指教> https://zhuanlan.zhihu.com/p/57958328
【本文是51CTO專欄機構“AiChinaTech”的原創文章，微信公眾號( id: tech-AI)”】
