TypeScript 初探（一）

什麼是 TypeScript

它是JavaScript的一個超集（微軟開發的自由和開源的編程語言）。
（等等，超集是什麼？）以下圖：

爲何選擇 TypeScript

1. Angular2.x 開始用TypeScript語言來開發（若是你要用這個框架）

2. TypeScript 很是包容 .js 文件能夠直接重命名爲 .ts

3. 靜態語言、強類型語言的TypeScript
   這裏得先了解一下幾個名詞：動態語言和靜態語言，強類型語言和弱類型語言；

動態語言：動態語言是指在運行期間纔去作數據類型檢查的語言，也就是說，在用動態類型的語言編程時，永遠也不用給任何變量指定數據類型，該語言會在你第一次賦值給變量時，在內部將數據類型記錄下來。

靜態語言：靜態語言與動態類型語言恰好相反，它的數據類型是在編譯其間檢的，也就是說在寫程序時要聲明全部變量的數據類型.

強類型定義語言：強制數據類型定義的語言。也就是說，一旦一個變量被指定了某個數據類型，若是不通過強制轉換，那麼它就永遠是這個數據類型了。

弱類型定義語言：數據類型能夠被忽略的語言。它與強類型定義語言相反, 一個變量能夠賦不一樣數據類型的值。

遇到的問題：
用動態語言、弱類型語言的JavaScript開發時，運行js以前，想確認下數據的類型用的是否正確，變量有沒有重複定義，相互覆蓋難等等，這些正確性判斷基本得靠人爲來了，出錯的可能性那固然高了，並且對人的高求高呀。

解決問題：
那是否考慮下換一種開發方式呢? 用一種相似靜態語言，強類型語言的開發方式來進行javascript的開發會更好一點呢? 有的那就是TypeScript。

TypeScript的使用

變量聲明（let ，const）

首先咱們先來看下這個例子：

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}
//結果  10 10 10 10 10 10 10 10 10 10 10

for (let i = 0; i < 10 ; i++) {
    setTimeout(function() {console.log(i); }, 100 * i);
}
//結果  0 1 2 3 4 5 6 7 8 9

特色：

1. 塊級做用域

   function f(input: boolean) {
   let a = 100;
   if (input) {
       let b = a + 1;
       return b;
   }
   return b;  // Error: 'b' doesn't exist here
   }

2. 不能在被聲明以前定義

   a++; // illegal to use 'a' before it's declared;let a;

3. 重定義及屏蔽

   function sumMatrix( {
   let sum = 0;
   for (let i = 0; i < matrix.length; i++) {
       var currentRow = matrix[i];
       for (let i = 0; i < currentRow.length; i++) {
           sum += currentRow[i];
       }
   }
   return sum;
   }

const 與let聲明類似，變量被賦值後不能再改變。

const foo = {
      a: 1
    }
    foo.a = 2; 值會變嗎？

let 與 var 的異同點比較

---

枚舉（enum）

概念：在程序設計語言中，通常用一個數值來表明某一狀態，這種處理方法不直觀，易讀性差。若是能在程序中用天然語言中有相應含義的單詞來表明某一狀態，則程序就很容易閱讀和理解。也就是說，事先考慮到某一變量可能取的值，儘可能用天然語言中含義清楚的單詞來表示它的每個值，這種方法稱爲枚舉方法，用這種方法定義的類型稱枚舉類型。

• 例子：

  enum Direction {
      Left  = 37,  //向上的按鍵代碼是37，用Direction.up通俗易懂的名詞來描述
      Up,
      Right,
      Down         
  }

  ts＝＝＝＝＝＝＝＝＝＝>js

  var Direction;
  (function (Direction) {
    Direction[Direction["Left"] = 37] = "Left";
    Direction[Direction["Up"] = 38] = "Up";
    Direction[Direction["Right"] = 39] = "Right";
    Direction[Direction["Down"] = 40] = "Down";
  })(Direction || (Direction = {}));

解構

解構賦值容許你使用相似數組或對象字面量的語法將數組和對象的屬性賦給各類變量。這種賦值語法極度簡潔，同時還比傳統的屬性訪問方法更爲清晰。

一般來講，你極可能這樣訪問數組中的前三個元素：

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

若是使用解構賦值的特性，將會使等效的代碼變得更加簡潔而且可讀性更高:

var[first, second, third]= someArray;

經常使用於：數組，對象

函數

箭頭函數

箭頭函數在簡單的函數使用中更爲簡潔直觀。

1. const fn = () => {...}
2. const fn = foo => `${foo} world `      模版字符串  
3. const fn = (foo, bar) => foo + bar
4. const fn = (foo,bar) => {…}

this 穿透： 函數內部的this延伸至上一層做用域中。

let obj = {
    hello: 'world',
    foo() {
        let bar = () => this.hello;
        return bar
    }
}

不能隨意在頂層做用域使用箭頭函數

let obj = {
    hello: 'world',
    foo：() => this.hello;
}

函數重載

函數根據傳入不一樣的參數而返回不一樣類型的數據

function pickCard(x: {suit: string; card: number; }[]): number;

function pickCard(x: number): {suit: string; card: number; };

function pickCard(x): any {}

類

TypeScript基於類的面向對象的開發方式。談到面向對象就會談到它的三大特性是：封裝,繼承,多態 。
這裏討論一下多態：

多態：同一操做做用於不一樣的對象，能夠有不一樣的解釋，產生不一樣的執行結果。在運行時，能夠經過指向基類的指針，來調用實現派生類中的方法。
把不一樣的子類對象都看成父類來看，能夠屏蔽不一樣子類對象之間的差別，寫出通用的代碼，作出通用的編程，以適應需求的不斷變化。

舉個例子：

class Animal {
        constructor(){}
        call() {}
}

class Dog extends Animal {
    constructor() {
        super();
    }
    call() {
        console.log("wangwang");
    }
}
class Cat extends Animal {
    constructor() {
        super();
    }
    call() {
        console.log("miaomiao");
    }
}
let tom: Animal = new Dog();    
tom.call();    //tom 是Animal類型，可是它調用 Dog的call方法

類有3個成員：

1. 屬性

2. 構造函數

3. 方法。

繼承

extends關鍵字

class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
}
class Snake extends Animal {
    constructor(name: string) { super(name); }
}

包含構造函數的派生類必須調用super()，它會執行基類的構造方法

public,private,protected 修飾符

public ：公共（默認）
private：不能在聲明它的類的外部訪問（包括派生類）
protected：protected修飾符與private修飾符的行爲很類似，但有一點不一樣，protected成員在派生類中仍然能夠訪問.

存取器getters/setters

目的：對象成員的讀取操做。

只帶有get不帶有set的存取器自動被推斷爲readonly。

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

靜態屬性

這些屬性存在於類自己上面而不是類的實例上。

class Grid {
    static origin = {x: 0, y: 0};
    constructor () { }
}

ts================>js

var Grid = (function () {
    function Grid() {
    }
    return Grid;
}());
Grid.origin = { x: 0, y: 0 };

抽象類

抽象類作爲其它派生類的基類使用。 它們通常不會直接被實例化。 不一樣於接口，抽象類能夠包含成員的實現細節。 abstract關鍵字是用於定義抽象類和在抽象類內部定義抽象方法。

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('roaming the earch...');
    }
}