摘要：聲明和結(jié)構(gòu)在中，支持和這樣的聲明方式。解構(gòu)就是將聲明的一組變量與相同結(jié)構(gòu)的數(shù)組或者對象的元素數(shù)值一一對應(yīng)，并將變量相對應(yīng)元素進行賦值。

學(xué)習(xí)Angular 2 ， 《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構(gòu)建語音，這意味著掌握 TypeScript 語音將更有利于高效地開發(fā) Angular 應(yīng)用。

在TypeScript 中，支持var、let 和 const 這樣的聲明方式。

let 聲明

let 與 var 聲明變量的寫法類似，示例代碼如下：

let hello = "Hello Angular";

不同于var， let 聲明的變量旨在塊級作用域內(nèi)有效，示例代碼如下：

function f(input: boolean) {
    let a = 100;
    if(input) {
        let b = a + 1; // 運行正確
        return b;
    }
    return b; // 錯誤， b沒有被定義
}

這里定義了兩個變量 a 和 b ，a 的作用域是在f()函數(shù)體內(nèi)，而b是在if這個語句塊中。塊級作用域還有幾點需要注意的：

不能在它的聲明之前被讀取或賦值

在同樣的作用域中，let 不允許變量被重復(fù)聲明

還需要注意 let 聲明在下面兩種函數(shù)入?yún)⒌膶Ρ龋?/p>

function funA(x) {
    let x = 100;    // 報錯，x已經(jīng)在函數(shù)入?yún)⒙暶?}

// 增加了判斷條件組成的新的塊級作用域
function funB(condition, x) {
    if(condition) {
        let x = 100;     // 運行正常
        return x;
    }
    return x;    
}

funB(false, 0);    // 返回 0
funB(true, 0);    // 返回 100

const 聲明

const 聲明與 let 聲明相似，它與 let 擁有相同的作用域規(guī)則，但 const 聲明的是常量，常量不能被重新賦值。但是如果定義的常量是對象，對象里的屬性值是可以被重新賦值的。示例代碼如下：

const CAT_AGE = 9;

const cat = {
    name: "kitty",
    age: CAT_AGE
}
// 錯誤
CAT_AGE = 10;
// 錯誤
cat = {
    name: "Danie",
    age: CAT_AGE
}

cat.name = "Jason";    // 正確

解構(gòu)

解構(gòu)是ES6中一個重要特性。解構(gòu)就是將聲明的一組變量與相同結(jié)構(gòu)的數(shù)組或者對象的元素數(shù)值一一對應(yīng)，并將變量相對應(yīng)元素進行賦值。

在 TypeScript 中支持?jǐn)?shù)組解構(gòu)和對象解構(gòu)。

數(shù)組解構(gòu)

數(shù)據(jù)結(jié)構(gòu)是最簡單的解構(gòu)類型，示例代碼如下：

let input = [1, 2];
let [first, second] = input;
console.log(first); // 相當(dāng)于 input[0]: 1;
console.log(second); // 相當(dāng)于 input[1]: 2

// 也可作用于已聲明的變量：
[first, second] = [second, first];    // 變量變換

// 或作用于函數(shù)參數(shù)
function f([first, second] = [number, number]) {
    console.log(first + second);
}
f([1, 2]);    // 輸出 3

有時，我們會看到如 let[first, ...rest] 使用 “...” 這樣的語句，“...” 三個連續(xù)小數(shù)點表示的是展開操作符，用于創(chuàng)建可變長的參數(shù)列表，使用起來非常方便，示例代碼如下：

let [first, ...rest] = [1, 2, 3, 4];
console.log(first);    // 輸出 1
console.log(rest);    // 輸出 [2, 3, 4];

對象解構(gòu)

對象解構(gòu)讓我們的代碼更加簡潔，可讀性強，示例代碼如下：

let test = { x: 0, y: 10, z: 20 };
let {x, y, z} = test;
console.log(x, y, z);    // 輸出 0, 10, 20

函數(shù)定義

在TypeScript中支持函數(shù)聲明和函數(shù)表達式的寫法，示例代碼如下：

// 函數(shù)聲明寫法
function maxA(x: number, y: number): number {
    return x > y? x : y;
}

// 函數(shù)表達式寫法
let maxB = function(x: number, y: number): number {
    return x > y? x : y;
}

在上例中，參數(shù)類型和返回值類型這兩部分都會被檢查。在調(diào)用時，只做參數(shù)類型和個數(shù)的匹配，不做參數(shù)名的校驗。

可選參數(shù)

在 TypeScript 中，被調(diào)函數(shù)的每個參數(shù)都是 必傳 的，也就是說傳遞給函數(shù)的參數(shù)個數(shù)必須和函數(shù)定義時的參數(shù)一致，示例代碼如下：

function max(x: number, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    // 報錯
let result2 = max(2, 4);    // 正常

但是，在現(xiàn)實開發(fā)中，我們需要根據(jù)實際情況來決定是否傳入某個參數(shù)的情況，TypeScript 也提供了可選參數(shù)語法，即在參數(shù)名旁邊加上 ？ 來使其變成可變參數(shù)，需要注意的是，可選參數(shù)必須位于必選參數(shù)的 后面 ，示例代碼如下：

function max(x: number, y?: number): number {
    if(y) {
        return x > y? x: y;
    } else {
        return x;
    }
}
let result1 = max(2);    // 正常
let result2 = max(2, 4);    // 正常
let result3 = max(2, 4, 7);    // 報錯

默認(rèn)參數(shù)

TypeScript 還支持初始化默認(rèn)參數(shù)，如果函數(shù)的某個參數(shù)設(shè)置了默認(rèn)值，當(dāng)該函數(shù)被調(diào)用時，如果沒有給這個參數(shù)傳值或者傳的值為 undefined 時，這個參數(shù)的值就是設(shè)置的默認(rèn)值，示例代碼如下：

function max(x: number, y = 4): number {
    return x > y? x: y;
}

let result1 = max(2);    // 正常
let result2 = max(2, 4);    // 正常
let result3 = max(2, undefined);    // 正常

帶默認(rèn)值的參數(shù)不必放在必選參數(shù)后面，但如果默認(rèn)值參數(shù)放到了必選參數(shù)前面，用戶必選顯式地傳入 undefined, 示例代碼如下：

function max(x = 2, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    // 報錯
let result2 = max(undefined, 4);    // 正常
let result3 = max(2, 4);    // 正常

剩余參數(shù)

當(dāng)我們需要同時操作多個參數(shù)，或者不知道會有多少個參數(shù)傳遞進來的時候，就需要用到 TypeScript 里的剩余參數(shù)。示例代碼如下：

function sum(x:number, ...restOfNumber:number[]): number {
    // 是不是覺得...特別熟悉，就是上面說的展開操作符
    let result = x;
    for(let i = 0; i < restOfNumber.length; i++) {
        result += restOfNumber[i];    
    }
    return result;
}

let result = sum(1, 2, 3, 4, 5);
console.log(result);    // 輸出 15

函數(shù)重載

函數(shù)重載是通過為同一個函數(shù)提供多個函數(shù)類型定義來達到實現(xiàn)多種功能的母的。TypeScript 可以支持函數(shù)的重載，示例代碼如下：

function css(config: {});
function css(config: string, value: string);

在上面的例子種，這個函數(shù)有2種重載方法，編譯器會根據(jù)參數(shù)類型來判斷該調(diào)用哪個函數(shù)。TypeScript 的函數(shù)重載通過查找重載列表來實現(xiàn)匹配，因此，在實現(xiàn)重載方法時，建議將最精確的定義放在最前面。