摘要：類型聲明中的函數(shù)定義，需要聲明參數(shù)和返回值的類型。其中隱藏有一個點類型推斷，箭頭函數(shù)沒有聲明返回值類型，這里編譯器不會報錯，因為它可以推斷出返回值類型。

TypeScript中的函數(shù)和JavaScript中的函數(shù)，和其他特性相比，是相差不大的。
這里會補充一點進階知識。

下面列舉一些TypeScript中函數(shù)相關(guān)的知識點。

TypeScript中的函數(shù)定義，需要聲明參數(shù)和返回值的類型。

// function add
function add(x: number, y: number): number {
    return x + y;
}
// arrow funtion add
const add = (x: number, y: number) => x + y;

上面是兩種基本用法：普通函數(shù)定義、箭頭函數(shù)定義。
其中隱藏有一個點：類型推斷，箭頭函數(shù)沒有聲明返回值類型，這里編譯器不會報錯，因為它可以推斷出返回值類型。這個特性，在數(shù)據(jù)類型學習的時候也接觸過，規(guī)則也是類似的：能推斷出類型的，不需要顯示聲明。

這兩個特性實際使用的時候是很有用的，很清晰，也省掉不少代碼。

// function log
function myLog(message: string,  level: ("info" | "warn" | "error") = "info", prefix?: string): void {
  // todo, logging
}

這里：

level參數(shù)是有一個默認值的

prefix參數(shù)是可選的

注意一點：可選參數(shù)必須放最后

剩余參數(shù)就是，剩余的其他參數(shù)，這里用到了結(jié)構(gòu)，看示例。

function myCallback(status: boolean, ...restData: any[]) {
  console.log(`${status}: ${restData.join()}`);
}

myCallback(false);
myCallback(true, "完成一個");
myCallback(true, "完成第一個", "完成第二個");

剩余參數(shù)使用起來非常靈活。

JavaScript中的this是個入門的難點，JavaScript函數(shù)的this是和調(diào)用上下文直接相關(guān)的，和定義不相關(guān)，所以很容易出現(xiàn)this指向和預期不一致的問題。

目前有幾種解決方案：this綁定、箭頭函數(shù)、閉包。

箭頭函數(shù)的出現(xiàn)，可以緩解了這個難題。箭頭函數(shù)中的this，是和定義的上下文相關(guān)（底層是利用閉包實現(xiàn)的），如下例：

const myLottery = {
  prizes: ["pen", "pencil", "notebook", "dictionary"],
  getDraw: function() {
    return (name: string) => {
      const result = Math.floor(Math.random() * 4);
      return `Bingo, ${name}, you win the ${this.prizes[result]}!`;
    }
  }
}

const myDraw = myLottery.getDraw();
console.log(myDraw("Tom"));

閉包方案就是在函數(shù)上下文中把this保存在變量中。

  ...
  getDraw: function() {
    const _this = this;
    return function (name: string) {
      const result = Math.floor(Math.random() * 4);
      return `Bingo, ${name}, you win the ${_this.prizes[result]}!`;
    }
  }
  ...

bind綁定在TypeScript里面會麻煩一點，需要聲明this類型，否則編譯不過，提示this類型不確定。

interface Lottery {
  prizes: string[];
  getDraw(): {(name: string): string};
}

const myLottery: Lottery = {
  prizes: ["pen", "pencil", "notebook", "dictionary"],
  getDraw: function() {
    return function (this: Lottery, name: string) {
      const result = Math.floor(Math.random() * 4);
      return `Bingo, ${name}, you win the ${this.prizes[result]}!`;
    }.bind(this);
  }
}

const myDraw = myLottery.getDraw();
console.log(myDraw("Tom"));

TypeScript的重載，我是感覺有點牽強的，如下示例：

function myAdd(x: number, y: number): number;
function myAdd(x: string, y: string): string;
function myAdd(x, y): any {
  if (typeof x === "number" && typeof y === "number") {
    return x + y;
  } else if (typeof x === "string" && typeof y === "string") {
    return x + y;
  }
}

myAdd(1, 2);
myAdd("Hello", "world");

這種實現(xiàn)，其實就是動態(tài)參數(shù)的分支處理，好處是代碼提示比較友好，能識別出來重載。

無法實現(xiàn)類似靜態(tài)語言的重載的原因之前也提過：靜態(tài)語言，如Java，函數(shù)重載，是生成了多個不同名的函數(shù)，同時使用的地方也會被更新成對應的函數(shù)名。TypeScript要兼容JavaScript，這個就無法實現(xiàn)。

高階函數(shù)聽起來很高大上，其實概念并不難：參數(shù)是函數(shù)或返回值是函數(shù)的函數(shù)。

我們接觸比較多的比如，數(shù)組內(nèi)置的map方法。

// 數(shù)組元素自增
let arr  = [1, 2, 3];

// 傳統(tǒng)方式
for(let i=0; i < arr.length; i++) {
    arr[i]++;
}

// map
arr = arr.map(function(item) {
    return item + 1;
});

// 結(jié)合箭頭函數(shù)
arr = arr.map(item => item + 1);

下面再學一個復雜一點的案例，前置處理器。比如，我們要在請求數(shù)據(jù)之前，記錄一些日志。

interface Request {
  (url: string, options: {[key: string]: any}): Promise;
}

function withLog(func: Request): Request {
  return function(url: string, options: {[key: string]: any}) {
    console.log("request");
    return func(url, options);
  };
}

function myRequest(url: string, options: {[key: string]: any}) {
  return new Promise(function(resolve) {
      setTimeout(() => {
        resolve("completed!")   
      }, 1000);
  });
}

withLog(myRequest)("/a", {method: "post"}).then(val => {
  console.log(val);
})

上述方案就是把請求函數(shù)通過另外一個函數(shù)包裝成一個新的函數(shù)。

再復雜一點，像這樣，參數(shù)是函數(shù)，返回值也是函數(shù)的，是可以無限嵌套的，每嵌套一次，它就多了一個功能。這在很多框架里面特別常見，用于抽象和解耦。

function withLog2(func: Request): Request {
  return function(url: string, options: {[key: string]: any}) {
    return func(url, options).then(val => {
      return `[${val}]`;
    });
  };
}

withLog2(withLog(myRequest))("/a", {method: "post"}).then(val => {
  console.log(val);
})