Typescript 學習筆記三：函數

中文網：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。