中文網：https://www.tslang.cn/

官網：http://www.typescriptlang.org/

目錄：

• Typescript 學習筆記一：介紹、安裝、編譯
• Typescript 學習筆記二：資料型別
• Typescript 學習筆記三：函式
• Typescript 學習筆記四：回憶Es5 中的類
• Typescript 學習筆記五：類
• Typescript 學習筆記六：介面
• Typescript 學習筆記七：泛型

函式的定義

• ES5 函式定義：函式宣告、匿名函式、傳參

// 函式宣告
function fn1 () {
    return 123;
}
fn1(); // 呼叫

// 匿名函式
let fn2 = function () {
    console.log(456);
}
fn2();

// 傳參
function fn3 (name, age) {
    return `姓名：${name}，年齡：${age}`;
}
fn3('張三', 25);
 

• ts 函式定義：函式宣告、匿名函式、傳參

// 函式宣告
function fn1 ():number { // number 是函式返回值型別，沒有返回值為 void
    return 123;
}
fn1();

// 匿名函式
let fn2 = function ():void {
    console.log(456);
}
fn2();

// 傳參
function fn3 (name:string, age:number):string {
    return `姓名：${name}，年齡：${age}`;
}
fn3('張三', 25);

可選引數

ES5 裡面方法的實參和行參可以不一樣，但是 ts 中必須一樣，如果不一樣就需要配置可選引數。

注意：可選引數必須配置到引數的最後面

function getInfo (name:string, age?:number):string { // age 為可選引數
    if (age) {
        return `姓名：${name}，年齡：${age}`;
    } else {
        return `姓名：${name}，年齡：保密`;
    }
}
console.log(getInfo('張三', 23));
console.log(getInfo('李四'));

// 錯誤的寫法
function getInfo (name?:string, age:number):string { // name 為可選引數
    if (name) {
        return `姓名：${name}，年齡：${age}`;
    } else {
        return `姓名：不知道，年齡：${age}`;
    }
}
console.log(getInfo('李四', 23));
 

預設引數

ES5 裡面沒法設定預設引數，ES6 和 ts 中都可以設定預設引數。

function getInfo (name:string, age:number=25):string { // age 預設為25
    if (age) {
        return `姓名：${name}，年齡：${age}`;
    } else {
        return `姓名：${name}，年齡：保密`;
    }
}
console.log(getInfo('張三', 23)); // 姓名：張三，年齡：23
console.log(getInfo('李四')); // 姓名：李四，年齡：25

剩餘引數

ES6 中的三點運算子

function sum (a:number, b:number, ...nums:number[]):number {
    let sum = a + b;
    nums.forEach((n) => {
        sum += n;
    });
    return sum;
}
console.log(sum(1, 2, 3, 4, 5, 6)); // 21

函式過載

java 中方法的過載：過載指的是兩個或者兩個以上同名函式，但它們的引數不一樣，這時會出現函式過載的情況。

Typescript 中的過載：通過為同一個函式提供多個函式型別定義來實現多種功能的目的。

ts 為了相容 ES5 以及 ES6 過載的寫法和 java 中有區別。

ES5 中出現同名方法，下面的會替換上面的方法。

function getInfo (name) {

}
function getInfo (name, age) {

}

ts 中的過載

// 單個引數，不同型別
function getInfo (name:string):string;
function getInfo (age:number):string;
function getInfo (str:any):any {
  if (typeof str === 'string') {
    return `姓名：${str}`;
  } else {
    return `年齡：${str}`;
  }
}
getInfo('張三');
getInfo(25);
getInfo(true); // 錯誤的寫法

// 多個引數，可選引數
function getInfo (name:string):string;
function getInfo (name:string, age:number):string;
function getInfo (name:string, age?:number):string {
  if (age) {
    return `姓名：${str}，年齡：${str}`;
  } else {
    return `姓名：${str}`;
  }
}
getInfo('張三');
getInfo(25); // 錯誤
getInfo('李四', 26);

箭頭函式

同 ES6 中一樣，修復 this 指向的問題，箭頭函式裡面的 this 指向上下文，即外層第一個不為箭頭函式的 this。