Typescript學習手札（持續更新）

前言

    做爲大前端浪潮中激流勇進的小碼農，持續性的去更新本身的技術棧，是極其重要與必要的。做爲浪尖上的typescript，新晉之星vue也邁開兼容推廣ts的步伐，更是讓人必須去see一see的了。記得在vue爬坑之路時，曾在sf遇到個前端大牛說過，老鳥都是從菜鳥過來的，學習的整理和積累是不斷成長起來的利劍。這也是我在整理學習手札的緣由之一。

正文

學習主要以文檔爲主，參考ts官方文檔 https://www.tslang.cn/docs/ha...

1. 數據類型及變量聲明

    ts變量聲明定義語法 let[做用規則] param[變量名]：String[類型名] = value[值]
    ts相較原生js，數據類型明顯細化了不少，增長了數據類型校驗，使編碼更規範，我的感受更像java了。ts提供的類型主要包括： 布爾值（boolean）、字符串（string）、數值（number）、數組（[] || Array<>）、元組（[dataType，number]）、枚舉（Enum）、Any(any)、Void(void)、Null（null）、Underfined(underfined)、Never(never)、Object（object）

    類型斷言（<> || as）相似java的類型轉換，主要有兩種寫法，一種是<>語法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另外一種是 as語法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

    肯定賦值斷言容許!放置在屬性或變量聲明以後，ts在解析時，明確聲明變量或屬性是有值的，例如：let x!:number，變量x後置!，未賦值直接引用x!沒毛病；而?則和!相對，ts在解析時會提示可能爲underfined;

    let和const是es6引進的兩個重要的關鍵字，引進以前，變量的聲明主要是var。var做用域能夠是包含它的函數、模塊、命名空間或全局域，能夠在做用域的任意位置訪問該聲明。var聲明不在意多少次，所以在不少邏輯比較複雜，層次比較深的代碼中，很容易出現同一個變量重複聲明重定義覆蓋而不報錯，這也是一個較爲頭疼的BUG。
    let則是詞法或塊做用域，此做用域更貼切邏輯處理時的嚴謹；const的做用域和let同樣，只是const通常做只讀聲明，主要用於聲明常量，引用的值不可改變。

2. 接口

    官方定義，接口的做用是爲那些對值所具備結構進行檢查的類型命名和爲你的代碼或第三方代碼定義契約。
    聲明形式：

interface ifName{
}

    接口是面向對象編程和程序設計一個極爲重要的工具。ts中接口的實用與java比較類似（或許jdk就是js的超集導向吧~_~）。ts接口主要能夠分爲屬性類型、函數類型、可索引類型和類類型。

     屬性對象類型
    ts接口只關注值的外形，這也是ts接口的獨到之處。類檢查器在檢查方法調用時，編譯器會檢查引用對象是否知足接口的要求，便是否包含接口屬性且類型是否匹配。

    通常屬性聲明：

interface ifName{
    name:string
}

    可選屬性 是非必須的，能夠做爲可能出現的屬性預約義，即引用對象可根據需求決定是否須要實現（雖然官網不推薦這個詞）接口可選屬性：

interface DomItem{
    name?: string,
    value?: string
}
function getDom(ifObj: DomItem):{value: string, color: string}{
    console.log(ifObj.value)
}
let dom = getDom({color:'red'})

    只讀屬性 readonly如其名，定義後不可修改，和const的性質類似，區分在於readonly聲明屬性，const聲明常量：

interface DomItem{
    readonly name: string,
    readonly value: string
}
let dom: DomItem = {name: '節點', value: '1'};
dom.value = '2'; //Error,只讀屬性不能被修改

    額外屬性檢查 是一個查錯機制，說白了就是傳參類型不匹配，例如：

interface DomItem{
    name?: string,
    value?: string
}
function getDom(ifObj: DomItem):{value: string, color: string}{
    console.log(ifObj.value)
}
let dom = getDom({name: '節點', vla:'1'})//Error

能夠發現調用getDom()傳參對象屬性與getDom聲明時的參數對象屬性不一致，與其說是新的屬性，倒不如說是個新類型，所以這邊須要對方法調用的參數作類型轉換：

let dom = getDom({name: '節點', vla:'1'} as DomItem)

或者：

let dom = getDom(<DomItem>{name: '節點', vla:'1'})

     函數類型
    函數類型和屬性類型不一樣，描述的是函數，方法是給接口定義一個調用簽名，包括參數列表和返回值類型。

interface GetDom{
    (name: string, value: string): object
}

let getDom: GetDom;
getDom = function(name: string, value: string)：object{
    //...
}

    函數參數列表裏的參數會被逐個進行檢查，參數名能夠不用相同，參數類型和返回值類型必須可以兼容，或者無需定義，ts的類型系統會推斷出參數類型和返回值類型，並作出相應的處理。例如，上面的方法能夠重寫爲：

let getDom: GetDom;
getDom = function(n, v){
    //...
}

或者：

let getDom: GetDom;
getDom = function(n: any, v: any): any{
    //...
}

     可索引類型
    可索引類型描述的是具備索引屬性的類型，最直觀的例子是數組。可索引類型須要定義索引簽名，包括索引類型和返回值類型。

interface Dom{
    [x: string]: string
}
let dom: Dom= {
    name: '節點'
}
interface DomArray{
    [index: number]: string
}
let domArray: DomArray= ['city','country']

    索引的類型有兩種，字符串和數值。字符串索引是對對象數據的約束，數值索引是對數組數據的約束，我的感受可索引類型的應用場景會比較少，js已經存在屬性寫法，不必額外添加約束，可能有我沒遇到的特例，歡迎指出。

     混合類型
    混合類型是以上幾種的集成形式，既能夠描述函數，也能夠描述屬性對象，使用起來比較靈活。

interface DomHandle{
    (name: string): string,
    name: string,
    reset: void
}
let domHandle = function(){
    let domHandle = function(name: string): DomHandle;
    domHandle.name = 'dom';
    domHandle.reset = function(){
        //...
    }
}
let d = domHandle();

3. 函數

    函數被用來定義行爲，ts和js同樣，分爲具名函數和匿名函數。

/*---function聲明---*/
function getDom1(): string {
    return 'inode'
}

/*---函數類型聲明---*/
let getDom2: () => string //此處=>標識返回類型，並不是es6的箭頭函數，須要作區分，不能混淆

/*---變量別名類型推斷式聲明---*/
let getDom3 = (): void => {
}

/*---接口類型聲明---*/
interface GetDom4 {
    (n: string, v: string): string
}

     函數參數
    和js相比，ts函數在傳參時必須知足聲明時參數列表的要求，即傳參列表的數量和類型要和聲明函數的參數列表一致。

    js中函數調用時若未傳參，它的值會是underfined，若要達到這樣的效果，能夠在參數變量後置?或者聲明時給出默認值來達到可選參數的效果。注意：必選參數必須在可選參數以前！

/*--- 可選參數 ---*/
function getDom1(name: string, value: string): string {
    return 'inode'
}

/*--- 默認參數 ---*/
function getDom2(value = '1', name: string): string {
    return 'inode'
}
let result = getDom2(underfined, 'node')

    共享參數類型時，默認參數即爲可選參數的類型。
    若是參數未知切數量不定時，可使用剩餘參數語法，剩餘參數能夠被當作個數不定的可選參數。

/*--- 剩餘參數 ---*/
function getDom1(name: string, ...params): string {
    return 'inode'
}

    this指針是老生常談的話題了，不管是浸淫js多年的牛牛們，仍是業界新入的白白們，this指向問題都是避免不了的。詳細講解連接https://yehudakatz.com/2011/0...，this是在函數調用時肯定值，通常指向函數調用的對象，若是沒有調用對象，this值爲window(嚴格模式下是underfined)；es6通常使用箭頭函數來聲明定義，箭頭函數中的this的值是定義中this的值，而不是函數調用時的this值。

    函數重載
    函數重載經過統一個函數來進行多個函數定義來處理不一樣類型的數據。 注意：定義重載時必定要把最精確的定義放在最前面

/* 函數重載 */
function getDom(name?: string): void;
/* 下面函數有實現，因此不須要declare關鍵字 */
function getDom(name = '1'):any {//此處x參數爲共享狀態類型，默認參數將轉換爲可選參數
    //...
}