摘要：我開始重新了解一下的現(xiàn)狀，沒想到已經(jīng)完全走上正軌了，在上已經(jīng)有大量的項目選用，投入生產(chǎn)于是報著嘗試的心態(tài)，開始了遷徙。

TypeScript

TypeScript是一種由微軟開發(fā)的自由和開源的編程語言

它是JavaScript的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?/p>

2012年十月份，微軟發(fā)布了首個公開版本的TypeScript

當前最新版本v2.3.3

js圈的,不管是前端還是nodejs開發(fā)者，大多都聽說過typescript,但真正使用它的人并不是這么多，根據(jù)我的觀察，一般不了解人會有以下看法：

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

這個肯定也會像coffeeScript一樣死掉

有了babel，前端也可以寫es6,還要typescript做什么

js最大的優(yōu)勢就是靈活，用typescript就沒有靈活性了

以上這里聲音都是在論壇看到的其他人的印象，以及向身邊人推薦時的回復(fù)。

本人一開始并不是typescript的擁護者，甚至有點排斥，那時候ts的開發(fā)工具也好，普及度也好，都是很稚嫩的。
直到最近在公司做了一些項目，因為是nodejs后端，在一開始使用babel方案轉(zhuǎn)換es7->es5進行開發(fā)，在過程中，總是出現(xiàn)調(diào)試的時候無法進行斷點，很多隱藏性的bug會在運行的過程中突然暴露，這之類的問題。
我開始重新了解一下typescript的現(xiàn)狀，沒想到已經(jīng)完全走上正軌了，在github上已經(jīng)有大量的項目選用，投入生產(chǎn).
于是報著嘗試的心態(tài)，開始了遷徙。

首先推薦一個對JS最友好，性能最棒的開發(fā)工具vscode                
開始以為遷徙過來是一件很困難的事情，只是稍做嘗試，并沒有報太大希望能快速無痛的切換過來.

假設(shè)目錄結(jié)構(gòu)是這樣的

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

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

{
    "compilerOptions": {
        "target": "es2017",//將編譯的.ts文件編譯為指定標準js
        "module": "commonjs",//模塊規(guī)范
        "sourceMap": true, //生成資源映射，以便于調(diào)試
        "noEmitHelpers": true,//不生成輔助方法，對應(yīng)importHelpers
        "importHelpers": true,//引用外部的輔助方法 
        "allowUnreachableCode": true,//允許代碼中途return產(chǎn)生無法執(zhí)行代碼
        "lib": ["es2017"],//定義編譯時依賴 
        "typeRoots": ["node_modules/@types"],//定義類型定義文件的根目錄
        "types": [ 
         //添加新的類型定義庫如 @types/lodash 需要在此處定義
        "lodash"
        ],
        "outDir": "./build",//編譯輸出文件目錄，默認等于rootDir
        "rootDir": "./src" //源代碼目錄在這個目錄里編寫你的ts文件
    },
    "exclude": [
        "node_modules", //忽略目錄
        "**/*.test.ts" //忽略指定類型文件
    ] 
}

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

compilerOptions -> target 配置項，表明需要將typescript編譯到哪一個js標準
可以根據(jù)自己的實際需求配置 es5|es6|es7...
由于我的項目的是nodejs項目
當前nodejs 7.10已經(jīng)原生支持es7,配置為es2017
如果應(yīng)用在前端可以改為es5

https://palantir.github.io/ts...
現(xiàn)代化的js項目,一定要有代碼風格規(guī)范

npm install --save-dev tslint

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

npm install --save-dev typescript

可以在npm run scripts里使用tsc命令將.ts文件編譯為.js文件

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

"tsc:w": "tsc -w" 監(jiān)聽.ts文件 實時編譯

屬于開發(fā)時依賴放在devDependencies配置里

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

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

會在編譯后的.js文件里自動require("tslib")

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

減少前端場景中打包體積

屬于運行時依賴,無須主動引用,必須放在dependencies配置里

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

npm install --save-dev @types/node (nodejs環(huán)境)

其它比如lodash,react,vue,koa,jquery都已經(jīng)有了相關(guān)的類型定義庫

配置類型定義庫,需要將tsconfig.json->compilerOptions->types添加對應(yīng)的庫名

    {
    "compilerOptions": {
        "strictNullChecks": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true, 
        "target": "es6",
        "lib": [
        "dom", //如果是前端環(huán)境需要添加此配置
        "es7" //適配es7的語法
        ],
        "types": ["lodash"]
    },
    "exclude": ["node_modules"]
}

5. 接下來你就可以在開發(fā)工具里看到對應(yīng)的智能提示了,`lodash`:

現(xiàn)在引用模塊推薦的寫法是 import 語法

nodejs 原生或者 webpack 默認環(huán)境并不支持

通常我們使用babel來實現(xiàn) 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定義的默認導(dǎo)出

混合寫法

//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
//應(yīng)用程序工具庫
declare var appUtils: any 
//指向 src/common 的絕對路徑
declare var COMMON_PATH: string
//node程序的運行環(huán)境狀態(tài) development | test | production
declare var NODE_ENV: string

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

遷徙到typescript并沒有想象的那么復(fù)雜

除了個別注意點，比如

新的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文檔反復(fù)對比,寫著盲人摸象搬的代碼
*  很多以前容易發(fā)生的錯誤,現(xiàn)在在編譯階段就可以暴露出來,大大提高了項目的穩(wěn)定性
*  typescript語法學(xué)習(xí)成本比想象的低的多,能理解ES6的基本半天就能玩的溜    

正在使用babel編譯的項目

無論是配置友好度,編譯效率,語法兼容,都完全找不到理由選擇babel

特別適合nodejs項目

完全兼容ES5,6...N版的代碼,低成本遷徙,靜態(tài)類型檢測,接口interface定義,大大增強了代碼健壯性

所有的大型JS項目

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

越大的項目,產(chǎn)生的作用越明顯,完成遷徙之后,你基本可以立即找到埋的很深的坑

為js而生的開發(fā)工具 vscode ,微軟出品的IDE,你懂的,覺得項目大了太卡,你可以試試

前端項目:react,vue,angular2

國內(nèi)很火的react antd源碼使用typescript編寫

angular2的默認開發(fā)語言

typescript相關(guān)vue項目在github上也層出不窮

html5游戲項目

typescript是熱門的egret(白鷺)引擎唯一開發(fā)語言，egret5.0.0 6月1號發(fā)布！

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