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

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上已經有大量的項目選用，投入生產.
于是報著嘗試的心態，開始了遷徙。

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

假設目錄結構是這樣的

├── 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",//模塊規范
        "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" //忽略指定類型文件
    ] 
}

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

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

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

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" 監聽.ts文件 實時編譯

屬于開發時依賴放在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環境)

其它比如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 語法

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
//應用程序工具庫
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
}

遷徙到typescript并沒有想象的那么復雜

除了個別注意點，比如

新的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的基本半天就能玩的溜    

正在使用babel編譯的項目

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

特別適合nodejs項目

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

所有的大型JS項目

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

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

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

前端項目:react,vue,angular2

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

angular2的默認開發語言

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

html5游戲項目

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

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