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
• 釘釘答疑羣