TypeScript In ICE

注：圖片來源於 Google Image

目錄

• TypeScript 是什麼
• 為什麼要使用 TypeScript
• 使用 TypeScript 編寫 React 元件
• 在 ICE 中如何使用 TypeScript
• 已有專案如何遷移到 TypeScript

TypeScript 是什麼

關於 TypeScript 是什麼，應該大部分人都已經知道，其 官網 的定義如下:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

翻譯成中文即是：

TypeScript 是 JavaScript 的型別的超集，它可以編譯成純 JavaScript。編譯出來的 JavaScript 可以執行在任何瀏覽器上。TypeScript 編譯工具可以執行在任何伺服器和任何系統上。TypeScript 是開源的。

拆分一下關鍵詞簡單通俗的理解如下：

1. TypeScript 是 JavaScript 的 強型別 版本。
2. 提供了 靜態型別系統 和支援 最新的不斷髮展的 JavaScript 新特性。
3. 在編譯期去掉型別和特有語法，生成 純粹的 JavaScript 程式碼。
4. 由於最終在瀏覽器中執行的仍然是 JavaScript，所以 TypeScript 並不依賴於瀏覽器的支援，也並不會帶來相容性問題。

為什麼要使用 TypeScript

先來看一組資料：

TypeScript 月下載量

資料來源：npm 包下載量

Developer Survey Results 2018

資料來源：stackoverflow

TypeScript's Popularity Over Time

資料來源：StateOfJs 2018

從上面的資料來看，TypeScript 毫無疑問是當下非常受喜愛的程式語言。通過上述 TypeScript 的定義，我們知道 TypeScript 的核心是基於 JavaScript 弱型別 的特性提供了 靜態型別系統。JavaScript 是一門弱型別語言，變數的資料型別具有動態性，可以被改變，只有在執行時才能確定變數的型別，這意味著有些錯誤只有在執行時才會發生。而 TypeScript 提供的型別機制則可以在編譯時有效的解決這類問題，在編譯時就暴露問題；同時基於型別定義加上 IDE 的智慧提示，在開發和閱讀程式碼時會非常的方便。在選擇使用 TypeScript 時，你可以享受它帶來的以下特性：

TypeScript 特性

• 靜態型別檢查 ：靜態型別可以幫助我們在執行前發現潛在的未知問題，當你呼叫函式時，編輯器會提示引數型別，那些引數是可選的等等，以下程式碼在編譯時也會直接編譯失敗，可以讓我們在開發階段感知錯誤。

• IDE 提示功能 ：增強了編輯器和 IDE 的功能，包括程式碼補全，介面文件提示，快速跳轉等。

• **可讀性：**通過型別定義，程式碼之間的關係相對明確，使程式碼更容易閱讀和理解，整個應用都是基於型別定義，也使協作變得更為方便和高效，型別就是最好的註釋，本質上相當於強制約定寫了一份文件。

TypeScript 缺點

無論是框架還是技術的演進，事物往往都存在兩面性，在無限接近好的一方面，也會有瑕疵的一方面，TypeScript 解決 JavaScript 弱型別問題的同時，也引入自身的一些複雜度；從學習成本來講，需要理解諸如 Generics(泛型)、Interfaces(介面)、Enums(列舉) 等概念；從開發效率上來講，在前期開發階段需要多寫一些型別定義程式碼，需要一定的適應期，但從長期可維護性來看這些多的開發時間是值得的；從工具上來看，工欲善其事必先利其器，需要了解周邊的工具生態系統，當然這些也算不上缺點。

周邊生態

• 編輯器：TypeScripts 是微軟製造，目前流行的編輯器 VSCode 也出自微軟，兩者有著非常好的結合
• 外掛市場：在 VSCode 外掛市場搜尋 TypeScript 可以看到非常多的基於 TypeScript 外掛可以使用
• 前端框架：
  • React 生態：React 和 TypeScript 融合可以非常好的融合，只需要將 .jsx 替換成 .tsx   Adding TypeScript
  • Vue 生態： Vue 3.0 基於 TypeScript 以及尤雨溪針對 TypeScript 和 Vue 的官方回答， Plans for the Next Iteration of Vue.js
  • Angular ：許可權的設計和基於 TypeScript 的編碼設計，Angular 2: Built on TypeScript
• 型別宣告包：類似 React、Lodash 等庫都有提供 TS 型別宣告。如果你使用 VSCode，可以安裝 types-autoinstaller 外掛，可以自動安裝相應的型別檔案

# Before
npm i react @types/react -S

=> 

# After
npm i react -S
複製程式碼

使用 TypeScript 編寫 React 元件

通過 TypeScript 寫 React 元件，主要區別就是 Props 和 State 的定義，如下兩種寫法：

• ES6 語法

import React from 'react';

class App extends React.PureComponent {
  state = {
    name: 'ice',
    age: 1,
  };

  render() {}
}

App.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};
複製程式碼

• TypeScript 語法

import * as React from 'react';

interface IProps {
  name: string;
  age: number;
}

interface IState {
  name: string;
  age: number;
}

class App extends React.PureComponent<IProps, IState> {
  state = {
    name: 'ice',
    age: 1,
  };

  render() {}
}
複製程式碼

在 ICE 中使用 TypeScript

近兩年來 TypeScript 在前端社群的發展越來越火熱，也有越來越多的應用採用 TypeScript 編寫，與此同時，飛冰（ICE）也在積極的擁抱 TypeScript 社群。ICE 提供了基於 TypeScript 的基礎模板，該模板將飛冰（ICE）本身的能力和 TypeScript 能力做了很好的融合：

• 內建 @alifd/next 基礎元件
• 支援元件按需載入
• 支援 css-modules 語法
• 支援 TypeScript 語法
• 支援熱更新

你只需要在 Iceworks 模板介面選擇對應模板進行初始化：

初始化完成之後，接下來就是使用 TypeScript 編寫程式碼了，所有以 .tsx 或者 .ts 結尾的檔案都支援其語法。

已有專案如何遷移到 TypeScript

遷移步驟如下：

• 升級構建工具 ice-scripts

# ice-scripts 最新版支援 TypeScript 的語法構建
$ npm update ice-script
複製程式碼

• 專案安裝 TypeScript 開發依賴

$ npm install typescript -D
複製程式碼

• 新增 .tsconfig 檔案

{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "outDir": "build",      // 指定輸出目錄
    "module": "esnext",     // 指定使用模組: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "target": "es6",        // 指定 ECMAScript 目標版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "jsx": "react",        // 允許編譯 javascript 檔案
    "moduleResolution": "node", // 選擇模組解析策略
    "allowSyntheticDefaultImports": true,
    "lib": ["es6", "dom"],
    "sourceMap": true,     // 生成相應的 '.map' 檔案
    "allowJs": true,       // 副檔名可以是 .js/.jsx
    "noUnusedLocals": true // 有未使用的變數時，丟擲錯誤
  },
  "include": ["src/*"],  // 需要編譯的檔案目錄
  "exclude": ["node_modules", "build", "public"] // 排除編譯的檔案目錄
}
複製程式碼

• 按需修改檔案字尾

在 TypeScript 工程中推薦使用 .tsx 替代 .jsx、使用 .ts 替代 .js，這裡可以根據自身需求按需更改，一般情況下更改字尾之後需要修改部分語法，否則 ts 語法檢測可能會不通過。

• 按需修改 Entry 入口

如果將 src/index.js 的字尾做了修改，那麼同步需要修改 package.json 裡的 entry 欄位：

// packgae.json
buildConfig: {
-  entry: './src/index.js'
+  entry: './src/index.ts'
}
複製程式碼

按照以上步驟，可按需遷移專案到 TypeScript 工程。如有疑問，請通過飛冰釘釘群聯絡我們。

資料

• TypeScript Roadmap: January - June 2019
• awesome-typescript
• TypeSearch
• TypeScript 解決了什麼痛點？
• Typescript配合React實踐
• TypeScript-React-Starter

ICE 相關連結

• 官網地址
• 這，就是飛冰物料
• 模板市場
• Iceworks
• alibaba/ice