js進化，遷徙到typescript

js進化，遷徙到typescript

TypeScript

---

歷史

• TypeScript是一種由微軟開發的自由和開源的編程語言

• 它是JavaScript的一個超集，並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程

• 2012年十月份，微軟發佈了首個公開版本的TypeScript

• 當前最新版本v2.3.3

前言

js圈的,不論是前端仍是nodejs開發者，大多都據說過typescript,但真正使用它的人並非這麼多，根據個人觀察，通常不瞭解人會有如下見解：

• 不就是一個能編譯成js的語言麼，沒什麼特別的！

• 這個確定也會像coffeeScript同樣死掉

• 有了babel，前端也能夠寫es6,還要typescript作什麼

• js最大的優點就是靈活，用typescript就沒有靈活性了

以上這裏聲音都是在論壇看到的其餘人的印象，以及向身邊人推薦時的回覆。

本人一開始並非typescript的擁護者，甚至有點排斥，那時候ts的開發工具也好，普及度也好，都是很稚嫩的。
直到最近在公司作了一些項目，由於是nodejs後端，在一開始使用babel方案轉換es7->es5進行開發，在過程當中，老是出現調試的時候沒法進行斷點，不少隱藏性的bug會在運行的過程當中忽然暴露，這之類的問題。
我開始從新瞭解一下typescript的現狀，沒想到已經徹底走上正軌了，在github上已經有大量的項目選用，投入生產.
因而報着嘗試的心態，開始了遷徙。

---

遷徙到typescript

首先推薦一個對JS最友好，性能最棒的開發工具vscode

開始覺得遷徙過來是一件很困難的事情，只是稍作嘗試，並無報太大但願能快速無痛的切換過來.

假設目錄結構是這樣的

├── src
|  ├── app.js
.
.
.
├── package.json
├── README.md

一，首先使用重命名工具renamex-cli將項目目錄./src中的全部js文件後綴 批量改爲.ts

npm i -g renamex-cli
//then
renamex start -p "src/**/*.js" -r "[name].ts" -t no

二，根目錄新建tsconfig.json

{
    "compilerOptions": {
        "target": "es2017",//將編譯的.ts文件編譯爲指定標準js
        "module": "commonjs",//模塊規範
        "sourceMap": true, //生成資源映射，以便於調試
        "noEmitHelpers": true,//不生成輔助方法，對應importHelpers
        "importHelpers": true,//引用外部的輔助方法 
        "allowUnreachableCode": true,//容許代碼中途return產生沒法執行代碼
        "lib": ["es2017"],//定義編譯時依賴 
        "typeRoots": ["node_modules/@types"],//定義類型定義文件的根目錄
        "types": [ 
         //添加新的類型定義庫如 @types/lodash 須要在此處定義
        "lodash"
        ],
        "outDir": "./build",//編譯輸出文件目錄，默認等於rootDir
        "rootDir": "./src" //源代碼目錄在這個目錄裏編寫你的ts文件
    },
    "exclude": [
        "node_modules", //忽略目錄
        "**/*.test.ts" //忽略指定類型文件
    ] 
}

三，typescript配置tsconfig.json

https://tslang.cn/docs/handbo...

compilerOptions -> target 配置項，代表須要將typescript編譯到哪個js標準
能夠根據本身的實際需求配置 es5|es6|es7...
因爲個人項目的是nodejs項目
當前nodejs 7.10已經原生支持es7,配置爲es2017
若是應用在前端能夠改成es5

四，代碼風格規範tslint.json

https://palantir.github.io/ts...
現代化的js項目,必定要有代碼風格規範

• npm install --save-dev tslint

{
    "scripts": {  
        "lint": "tslint \"src/**/*.ts\" "
    }
}

五，安裝typescript

1. npm install --save-dev typescript

   • 能夠在npm run scripts裏使用tsc命令將.ts文件編譯爲.js文件

   • "tsc": "tsc" 編譯.ts文件

   • "tsc:w": "tsc -w" 監聽.ts文件 實時編譯

   • 屬於開發時依賴放在devDependencies配置裏

{
    "scripts": { 
        "tsc": "npm run clear && tsc",
        "tsc:w": "npm run clear && tsc -w", 
        "lint": "tslint \"src/**/*.ts\" "
    }
}

1. npm install --save tslib 從外部引入額外的輔助方法集

• 會在編譯後的.js文件裏自動require('tslib')

• 編譯後的代碼更美觀,不用在每一個編譯後的.js文件都生成輔助方法

• 減小前端場景中打包體積

• 屬於運行時依賴,無須主動引用,必須放在dependencies配置裏

• 須要配置tsconfig.js -> compilerOptions -> importHelpers:true

六，安裝 typescript 類型定義(@types/[package])

• npm install --save-dev @types/node (nodejs環境)

• 其它好比lodash,react,vue,koa,jquery都已經有了相關的類型定義庫

• 配置類型定義庫,須要將tsconfig.json->compilerOptions->types添加對應的庫名

{
    "compilerOptions": {
        "strictNullChecks": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true, 
        "target": "es6",
        "lib": [
        "dom", //若是是前端環境須要添加此配置
        "es7" //適配es7的語法
        ],
        "types": ["lodash"]
    },
    "exclude": ["node_modules"]
}

5. 接下來你就能夠在開發工具裏看到對應的智能提示了,`lodash`:

七，修改 import 語法

如今引用模塊推薦的寫法是 import 語法

• nodejs 原生或者 webpack 默認環境並不支持

• 一般咱們使用babel來實現 import 語法支持

• typescript支持更爲標準的 import 語法

• 普通export寫法

//a.ts
module.export = { a: 1, b: 2 }
//a2.ts
export let data = { x: 1, y: 2 }
//b.ts
//這種寫法通常用於引用node_modules上安裝的其餘庫
import * as aData from './a'
import { data } from './a2'

• 默認export寫法

//x.ts
export default { a: 1, b: 2 }
//y.ts
import data from './x'
//>這種寫法用於引入咱們使用export default定義的默認導出

• 混合寫法

//x.ts
export let data = { a: 1, b: 2 }
export default { c: 3 }
//y.ts
import other, { data } from './x' 
console.log(data) // { a : 1 , b : 2 }
console.log(other) // { c : 3 }

• 別名

//m.ts
export let data = { o: 1, p: 2 }
export default { u: 3 }
//n.ts
import data, { data as data2 } from './m'
console.log(data)//{ u : 3 }
console.log(data2)//{ o : 1 , p : 2 }

• 修改項目中的引庫語法由require('libName')改成import * as libName from 'lib'

八，爲項目中的全局變量建立自定義類型定義文件globals.d.ts

//globals.d.ts
//應用程序工具庫
declare var appUtils: any 
//指向 src/common 的絕對路徑
declare var COMMON_PATH: string
//node程序的運行環境狀態 development | test | production
declare var NODE_ENV: string

//shims.d.ts 第三方插件變量全局定義 
import * as lodash from 'lodash'
declare global {
    /**
     * lodash
     */
    const _: typeof lodash
}

八，這時候咱們的新項目再排除一些小問題就能跑起來了

1. 遷徙到typescript並無想象的那麼複雜

2. 除了個別注意點，好比

   • 新的import語法 http://www.tuicool.com/articl...

   • class語法與es6略有不一樣 http://www.cnblogs.com/whitew...

   • 全局變量須要定義globals.d.ts http://www.cnblogs.com/ys-ys/...

   • 個別變量提示類型錯誤，須要將它定義爲any:

//會提示錯誤
let x=1
x="aaa"

//修改爲這樣  
let x:any=1
x="aaa"

---

總結

使用感覺

*  typescript的配置比babel簡單多了,只有一兩個庫依賴,卻讓咱們直接能夠寫上最新的ECMA語法及功能
*  可選擇性的編譯生成ES5以及其它更高ES版本,徹底不用擔憂實際運行問題
*  強化的語法提示,讓咱們根本不用在源碼與API文檔反覆對比,寫着盲人摸象搬的代碼
*  不少之前容易發生的錯誤,如今在編譯階段就能夠暴露出來,大大提升了項目的穩定性
*  typescript語法學習成本比想象的低的多,能理解ES6的基本半天就能玩的溜

什麼項目場景適合使用typescript?

1. 正在使用babel編譯的項目

   • 不管是配置友好度,編譯效率,語法兼容,都徹底找不到理由選擇babel

2. 特別適合nodejs項目

   • 徹底兼容ES5,6...N版的代碼,低成本遷徙,靜態類型檢測,接口interface定義,大大加強了代碼健壯性

3. 全部的大型JS項目

   • typescript是由 Anders Hejlsberg 大神(C#之父)開發,編譯效率驚人

   • 越大的項目,產生的做用越明顯,完成遷徙以後,你基本能夠當即找到埋的很深的坑

   • 爲js而生的開發工具 vscode ,微軟出品的IDE,你懂的,以爲項目大了太卡,你能夠試試

4. 前端項目:react,vue,angular2

   • 國內很火的react antd源碼使用typescript編寫

   • angular2的默認開發語言

   • typescript相關vue項目在github上也層出不窮

5. html5遊戲項目

   • typescript是熱門的egret(白鷺)引擎惟一開發語言，egret5.0.0 6月1號發佈！

附上本人用typescript搭建的koa2種子項目https://github.com/githbq/hbq...