關於 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 是開源的。
拆分一下關鍵詞簡單通俗的理解如下:
先來看一組數據:
TypeScript 月下載量
數據來源:npm 包下載量
Developer Survey Results 2018
數據來源:stackoverflow
TypeScripts Popularity Over Time
數據來源:StateOfJs 2018
從上面的數據來看,TypeScript 毫無疑問是當下非常受喜愛的編程語言。通過上述 TypeScript 的定義,我們知道 TypeScript 的核心是基於 JavaScript 弱類型 的特性提供了 靜態類型系統。JavaScript 是一門弱類型語言,變數的數據類型具有動態性,可以被改變,只有在執行時才能確定變數的類型,這意味著有些錯誤只有在運行時才會發生。而 TypeScript 提供的類型機制則可以在編譯時有效的解決這類問題,在編譯時就暴露問題;同時基於類型定義加上 IDE 的智能提示,在開發和閱讀代碼時會非常的方便。在選擇使用 TypeScript 時,你可以享受它帶來的以下特性:
無論是框架還是技術的演進,事物往往都存在兩面性,在無限接近好的一方面,也會有瑕疵的一方面,TypeScript 解決 JavaScript 弱類型問題的同時,也引入自身的一些複雜度;從學習成本來講,需要理解諸如 Generics(泛型)、Interfaces(介面)、Enums(枚舉) 等概念;從開發效率上來講,在前期開發階段需要多寫一些類型定義代碼,需要一定的適應期,但從長期可維護性來看這些多的開發時間是值得的;從工具上來看,工欲善其事必先利其器,需要了解周邊的工具生態系統,當然這些也算不上缺點。
.jsx
.tsx
# Before npm i react @types/react -S
=>
# After npm i react -S
通過 TypeScript 寫 React 組件,主要區別就是 Props 和 State 的定義,如下兩種寫法:
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, };
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, };
近兩年來 TypeScript 在前端社區的發展越來越火熱,也有越來越多的應用採用 TypeScript 編寫,與此同時,飛冰(ICE)也在積極的擁抱 TypeScript 社區。ICE 提供了基於 TypeScript 的基礎模板,該模板將飛冰(ICE)本身的能力和 TypeScript 能力做了很好的融合:
你只需要在 Iceworks 模板界面選擇對應模板進行初始化:
初始化完成之後,接下來就是使用 TypeScript 編寫代碼了,所有以 .tsx 或者 .ts 結尾的文件都支持其語法。
.ts
遷移步驟如下:
# ice-scripts 最新版支持 TypeScript 的語法構建 $ npm update ice-script
$ npm install typescript -D
{ "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 語法檢測可能會不通過。
.js
如果將 src/index.js 的後綴做了修改,那麼同步需要修改 package.json 裏的 entry 欄位:
src/index.js
package.json
// packgae.json buildConfig: { - entry: ./src/index.js + entry: ./src/index.ts }
按照以上步驟,可按需遷移項目到 TypeScript 工程。如有疑問,請通過飛冰釘釘羣聯繫我們。
推薦閱讀: