摘要：它有時被稱做鴨式辨型法或結(jié)構(gòu)性子類型化。在里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。賦值后，和再也不能被改變了。函數(shù)的返回值類型是通過其返回值推斷出來的此例是和。技術(shù)本身沒有好壞，長遠看，弱類型語言并不是那么的友好。

TypeScript不是一個高深的技術(shù)，它不過是一個javascript的超集，那么什么是超集呢？

所謂的超集 其實就是最終將你寫的TypeScript編譯成javascript去執(zhí)行，因為瀏覽器上能跑的腳本語言是javascript，這個本質(zhì)要搞清楚

無法在編寫時察覺出同一個變量的類型是否保持一致

比如：

var a = 1 

//如果這個b的值是“1”，字符串
var b = "1"

console.log(a+b)

結(jié)果：

特別是ES6之前存在全局變量，var會給全局狀態(tài)下添加屬性以及污染全局加上ES5的變量提升作用域等混合情況，很容易導致變量查找時出現(xiàn)undefined的問題，但是這個問題需要代碼運行才能報錯

例如：

    var a;

    function test() {
        a = 1
    }
    
    console.log(a) //undefined
    console.log(window.a)//undefined
 
    
    -------------------
    
    
    var a;

    function test() {
        a = 1
    }

    test()

     console.log(a)    // 1 
     console.log(window.a) //1

像上面這種情況，如果遇到了，項目很大，排查起來還是很煩的

特別是在書寫Node.js的時候，往往這種偏后臺類型的代碼，高并發(fā)場景出現(xiàn)一個小問題都是致命的，如果是一個超大型項目，排查問題起來非常困難

傳統(tǒng)的javascript

這段代碼，變量a根本就沒有定義，但是根本沒有報錯，這種場景可以在項目中可能是右查詢沒有查詢到，然后輸出undefined. 可是如果是在使用這個變量去做某些事情

例如：

這個a變量是一個用戶很核心的數(shù)據(jù)，但是它是undefined。然后又經(jīng)過若干的類型轉(zhuǎn)換，被js轉(zhuǎn)換成不知道是什么的數(shù)據(jù)展示給了客戶，那么炸了，可能會引起整個項目出現(xiàn)致命性錯誤直接奔潰

例如 ：

你的同事A寫了一個模塊，大概5個文件，一共1000行代碼

經(jīng)過1000行代碼的處理，最終輸出好幾個值（變量）給了你

如下代碼：

export default {
    store,
    checkPassWord,
    applyMiddleWare,
    //....
}

一個不合格的同事 給你的沒有注釋的代碼 于是你 ：

一個合格的同事：

/**
   @params store //數(shù)據(jù)對象
   @params checkPassWord //檢查密碼函數(shù)
   @params applyMiddleWare //應(yīng)用中間間

*/
export default {
    store,
    checkPassWord,
    applyMiddleWare,
    //....
}

如果你用到他的暴露對象內(nèi)容特別多的時候，就要一個一個去看注釋，而且關(guān)鍵是：

這里面每個函數(shù)的傳入?yún)?shù)，返回的參數(shù)，注釋不一定那么完整詳細。

那么只有去溝通了，一旦溝通起來。時間成本上升，并且如果大家開發(fā)任務(wù)都特別緊急的時候，炸了～

TypeScript 3.1 現(xiàn)已發(fā)布

最新版本文檔地址 最新TypeScript版本文檔地址

TypeScript并不能說是一門完全全新的語言，可以說它是一個基于javaScipt的超集

什么是超集？ 其實就是原生ES6語法+Type類型

強烈建議閱讀阮一峰老師的ES6入門

我們來看下 TypeScript的工作方式：

全局下載TypeScript 手動編譯TS文件變成js文件

 npm install -g typescript

用全局安裝的typescript來編譯輸出一把剛才的文件

還沒有編譯，現(xiàn)在已經(jīng)開始報出問題，但是報出問題可以繼續(xù)編譯嗎？

即使靜態(tài)校驗出現(xiàn)問題，最終還是編譯成功：

這里特別注意，TS里面的靜態(tài)類型，以及枚舉等，編譯成js后是不存在的

上面并沒有體現(xiàn)typeScript的特殊價值

TypeScript的核心原則之一是對值所具有的結(jié)構(gòu)進行類型檢查。 它有時被稱做“鴨式辨型法”或“結(jié)構(gòu)性子類型化”。 在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

//接口名為LabelledValue
interface LabelledValue {
  label: string;
}


//函數(shù)傳入的參數(shù) labelledObj遵循 LabelledValue接口 

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

以上代碼經(jīng)過ts編譯后,所有接口和靜態(tài)類型都沒有了 ：

function printLabel(labelledObj) {
    console.log(labelledObj.label);
}
var myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

如果ts在代碼編寫階段出現(xiàn)了類型的校驗錯誤，那么會直接提示：

我將接口的string改成了number類型

我們僅僅改變了接口的類型，就立刻檢驗到了錯誤，這樣不必等到開發(fā)模式下的熱更新調(diào)試后再報錯。

當然 你在接口定義時候，可以在變量后加上?號

這樣是一個可選屬性

例如：

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

還有只讀屬性的接口定義：

interface Point {
    readonly x: number;
    readonly y: number;
}

你可以通過賦值一個對象字面量來構(gòu)造一個Point。 賦值后， x和y再也不能被改變了。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

用得比較多的函數(shù)類型檢查

先編寫接口

interface SearchFunc {
  (source: string, subString: string): boolean;
}

定義函數(shù)

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

對于函數(shù)類型的類型檢查來說，函數(shù)的參數(shù)名不需要與接口里定義的名字相匹配。 比如，我們使用下面的代碼重寫上面的例子：

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

函數(shù)的參數(shù)會逐個進行檢查，要求對應(yīng)位置上的參數(shù)類型是兼容的。 如果你不想指定類型，TypeScript的類型系統(tǒng)會推斷出參數(shù)類型，因為函數(shù)直接賦值給了 SearchFunc類型變量。 函數(shù)的返回值類型是通過其返回值推斷出來的（此例是 false和true）。 如果讓這個函數(shù)返回數(shù)字或字符串，類型檢查器會警告我們函數(shù)的返回值類型與 SearchFunc接口中的定義不匹配。

let mySearch: SearchFunc;
mySearch = function(src, sub) {
    let result = src.search(sub);
    return result > -1;
}

鴨式辨形法，說的是：一個動物長得看起來像鴨子，叫起來也像鴨子，那么它就可以被認為是鴨子

定義類的類型：

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

一個接口可以繼承多個接口，創(chuàng)建出多個接口的合成接口。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

照本宣科寫了這么多，其實這些就是TS的最有用的地方。文檔寫得比較好，建議多去看幾遍，前提是一定要學好ES6！

any類型有太多不可預(yù)測的后果

function identity(arg: T): T {
    return arg;
}

我們給identity添加了類型變量T。 T幫助我們捕獲用戶傳入的類型（比如：number），之后我們就可以使用這個類型。 之后我們再次使用了 T當做返回值類型。現(xiàn)在我們可以知道參數(shù)類型與返回值類型是相同的了。 這允許我們跟蹤函數(shù)里使用的類型的信息。

typescript遇上了webpack

React官方推薦使用typescript

使用傳統(tǒng)的 react腳手架

在 Create React App 中使用 TypeScript

npx create-react-app my-app --typescript

typescript遇上webpack

切記 所有的ts的依賴，都必須是@types開頭的 否則用不了

配置tsconfig.json文件

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

npm install --save react react-dom @types/react @types/react-dom

webpack.config.js配置文件

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    devtool: "source-map",

    resolve: {
  
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
         
            { test: /.tsx?$/, loader: "awesome-typescript-loader" },

            
            { enforce: "pre", test: /.js$/, loader: "source-map-loader" }
        ]
    },

    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

大家可能對externals字段有所疑惑。 我們想要避免把所有的React都放到一個文件里，因為會增加編譯時間并且瀏覽器還能夠緩存沒有發(fā)生改變的庫文件。

webpack 4.39版配置typeScript

我們不妨總結(jié)一下：

TS最核心的優(yōu)勢 :

靜態(tài)類型檢查+校驗,代碼并沒有運行編譯，就已經(jīng)知道哪里有問題了，無論是變量查找還是類型錯誤

TS給我們解決了什么問題

減少了開發(fā)溝通成本，打開你的代碼就知道傳入的是什么參數(shù)，返回什么參數(shù)。編譯后代碼量并沒有增加

TS給我們帶來了什么麻煩

多寫了很多接口，類型，一些快速開發(fā)的小項目感覺用上更麻煩。如果是比較古老的js插件第三方庫，還用不了，要另想其他辦法去支持。

大型項目，可以上ts，還是要上ts，中小型項目，看工期，看你是否打算在時間允許情況下嘗試使用ts。

技術(shù)本身沒有好壞，長遠看，弱類型語言并不是那么的友好。谷歌的Go語言，寫法就跟TypeScript很像，如果想要擁有更廣闊的技術(shù)視野，建議前端是可以從TS學起，他們的思想大都差不多。

最后，歡迎大家加入我們的segmentFault前端交流群，我的個人微信是:CALASFxiaotan，加我會拉你進群哦～

群里大把小姐姐等你們～

覺得寫得好，記得點個贊哦，永不脫發(fā)