2020你應(yīng)該知道的TypeScript學(xué)習(xí)路線【函數(shù)類型】
公眾號(hào)：前端微服務(wù)
GitHub：https://github.com/yongbolu
作 ?者：子奕
一、概述
函數(shù)是JavaScript應(yīng)用程序的基礎(chǔ)。它幫助你實(shí)現(xiàn)抽象層，模擬類，信息隱藏和模塊。它在編程范式中為我們控制行為，抽象某些實(shí)現(xiàn)有著較大的幫助，因此 TypeScript 在 JavaScript 的基礎(chǔ)之上添加了一些額外的功能，輔助我們更好的使用函數(shù)。在TypeScript里，雖然已經(jīng)支持類，命名空間和模塊，但函數(shù)仍然是主要的定義 行為的地方。TypeScript為JavaScript函數(shù)添加了額外的功能，讓我們可以更容易地使用。今天小編就帶大家一起來學(xué)習(xí)下TypeScript的函數(shù)。如果大家覺得有幫助，記得給小編點(diǎn)個(gè)贊，如果想獲取更多干貨請(qǐng)關(guān)注前端微服務(wù)公眾號(hào)，不定期為大家?guī)砀韶洝?/p>
二、與JavaScript區(qū)別
和JavaScript一樣，TypeScript函數(shù)可以創(chuàng)建有名字的函數(shù)和匿名函數(shù)。你可以隨意選擇適合應(yīng)用程序的方式，不論是定義一系列API函數(shù)還是只使用一次的函數(shù)。
三、函數(shù)定義
函數(shù)就是包裹在花括號(hào)中的代碼塊，前面使用了關(guān)鍵詞 function,語(yǔ)法格式如下所示：
function function_name()
{
// 執(zhí)行代碼
}
四、調(diào)用函數(shù)
函數(shù)只有通過調(diào)用才可以執(zhí)行函數(shù)內(nèi)的代碼。語(yǔ)法格式如下所示：
function_name()
五、使用案例
5.1 基礎(chǔ)聲明
// javascript
function sum(x,y) {
return x + y;
}
// typescript
function sum(x: number, y: number): number {
return x + y;
}
// 表達(dá)式
const sum = function (x: number, y: number): number {
return x + y;
}
不過由于 TypeScript 可以根據(jù) return 來推斷返回的類型，因此有時(shí)候返回類型 number 并不是一定要書寫的，不過為了給人閱讀時(shí)不增加不必要的開支，寫上明確的返回類型，是一種非常好的習(xí)慣。還有一點(diǎn)的是，雖然上述的代碼我們已經(jīng)為其添加了類型，不過這還不是一個(gè)很完整的類型書寫，但往往我們可以忽略它，如：
type Sum = (x: number, y: number) => number;
const sum: Sum = function(x: number, y: number): number {
return x + y;
}
以往我們寫 JavaScript 時(shí)調(diào)用 sum 函數(shù)，也許我們什么都不傳，或者只傳一個(gè)，但在 TypeScript 的世界中參數(shù)是必須真實(shí)存在的，我們調(diào)用時(shí)必須傳遞兩個(gè)參數(shù)，因此我們可以使用 可選參數(shù) 和 默認(rèn)參數(shù) 的方式來處理這個(gè)問題，如：
function sum(x: number, y?: number): number {
}
function sum(x: number, y = 0): number {
}
5.2 TypeScript中arguments 處理
function sum(...num: number[]): number {
return num[0] + num[1];
}
5.3 TypeScript中this的使用
let obj = {
a: 1,
b: function (){
return () => {
return this.a;
}
}
}
如果你沒有使用箭頭函數(shù)，那么這里的 this.a 會(huì)得到一個(gè)錯(cuò)誤，因?yàn)榇藭r(shí)的 this 會(huì)被設(shè)置為一個(gè)全局的對(duì)象，瀏覽器中是 window ，Node.js里是 global。
5.4 TypeScript重載功能
function sync(x: number): number;
function sync(x: { code: number, sig: string}): string;
function sync(x: any): any {
if (typeof x === "number") {
return 0;
}
if (typeof x === "string") {
return "0";
}
}
sync(0);
5.5 TypeScript中的e
const divDom = document.getElementById("div");
if (divDom) {
const pay = function(current: number, discount: number): number{
return current * (discount/100);
}
divDom.addEventListener("click", function(this: HTMLElement ,e: MouseEvent){
pay(1000, 20);
});
}
在這個(gè)例子中不僅用到了函數(shù)的類型，還有一個(gè)特別有意思的 this 的問題，請(qǐng)看下面代碼：
divDom.addEventListener("click", function(this: HTMLElement ,e: MouseEvent){
pay(1000, 20);
});
this: HTMLElement
其實(shí)是非常明確的指明 addEventListener 的 handler 函數(shù)的 this 的問題，這個(gè) this 是指向了一個(gè) HTML 元素對(duì)象，舉個(gè)具體的例子，假設(shè)我們自己寫了一個(gè)UI組件，提供了一個(gè) addEventListener ，在處理 handler 函數(shù)時(shí)，應(yīng)該將 this 指向這個(gè)這個(gè)UI組件實(shí)例，在 TypeScript 中寫法如下:
class UI {
public name: string;
constructor(){
this.name = "id";
}
public addEventListener(type: string, handler: (this: UI, e: string) => void) {
///
handler.call(this, this.name);
}
}
const ui = new UI();
const onClick = ui.addEventListener("click", function(e: string){
console.log(this.name);
})
六、關(guān)注我們
點(diǎn)擊下方關(guān)注我???