文章目錄
- 介紹
- 函式定義
- JavaScript函式定義
- TypeScript函式定義
- TypeScript完整函式
- 可選引數
- 默認引數
- 剩余引數
- 函式多載
介紹
函式是JavaScript應用程式的基礎， 它幫助你實作抽象層，模擬類，資訊隱藏和模塊，同時也是JavaScript中的一等公民，
在TypeScript里，雖然已經支持類，命名空間和模塊，但函式仍然是主要的定義行為的地方，
TypeScript為JavaScript函式添加了 額外的功能，讓我們可以更容易地使用，
在TypeScript里，函式也分為命名函式和匿名函式，
不過只要有一些JavaScript的基礎的話,對于TypeScript中的函式知識應該都不會覺得難學
函式定義
JavaScript函式定義
在JavaScript中，函式定義分為函式宣告和函式運算式兩種：
- 函式宣告（Function Declaration）
- 函式運算式（Function Expression）
// 函式宣告
function abc() { }
// 函式運算式 將匿名函式賦值給變數
let def = function() { }
TypeScript函式定義
在 typescript中也可以使用這兩種方式定義函式，不過需要進行約束，在之前的博客中曾經說過型別定義，使用型別定義是最簡單的函式約束，
// 函式存在輸入輸出，在TS中要是約束，需要使用型別定義
// 讓addNum的引數和回傳值都必須是number型別
function addNum( a: number, b: number ): number {
return a + b;
}
如果定義的函式無回傳值，可以使用void空值， 這個在之前的函式型別https://juejin.cn/post/6992001689867780126中也有提到過，
下面的例子，如果現在寫了回傳值 return a;，就會發生報錯 Type 'number' is not assignable to type 'void'.
let say = function(a: number):void {
}
注意： 與JavaScript不同，使用約束后，
addNum不能輸入多余的（或者少于要求的）引數， 如果使用?對引數進行可選宣告，在呼叫傳參時可不輸入
TypeScript完整函式
函式型別包含兩部分：引數型別和回傳值型別， 當寫出完整函式型別的時候，這兩部分都是需要的，函式中使用的捕獲變數不會體現在型別里， 實際上，這些變數是函式的隱藏狀態并不是組成API的一部分，
在TypeScript中，也是存在=>的， 不過這與es6中的箭頭函式=>是兩種不同的定義，
在 TypeScript 的型別定義中，=> 用來表示函式的定義，左邊是輸入型別，需要用括號括起來，右邊是輸出型別，
例子：
let fun2:() => number = function():number {
return 10;
}
當然，如果不給函式定義回傳型別，其實也可以成功，這是因為ts中存在推斷型別，按背景關系歸類”，是型別推論的一種， 它幫助我們更好地為程式指定型別，
可選引數
函式的可選引數就是在方法定義時，引數后添加?，可選引數要放在最后面，必選引數、默認引數放在其前面
例子：
function add( a?: number, b?: number ): void { }
默認引數
這里JavaScript與TypeScript的差別只是多了個型別約束
使用默認引數時，可選引數要放在最后面，
function sort( a: number, b: number = 30 ): boolean {
return a > b;
}
sort(5); // 默認引數如果不傳參就會取默認的值， 也就是 5與30比較
sort(5, 3); // 默認引數傳參，會覆寫默認的值，也就是 5 與 3比較
剩余引數
有時，你想同時操作多個引數，或者你并不知道會有多少引數傳遞進來， 在JavaScript里，你可以使用arguments來訪問所有傳入的引數，
在typescript中，可以把所有引數收集到一個變數， 在es6中有一個名為...的擴展運算子，此運算子主要用于函式操作時呼叫
這里定義...擴展運算子時，型別可以設定成陣列
下面是一個累加方法的例子：
let add = (...arr: number[]):number => {
let all:number = 0;
arr.map((item)=>{
all += item as number;
})
return all;
}
console.log(add(1, 2, 3)); // 6
函式多載
typescript中多載： 通過為同一個函式提供多個函式型別定義來實作多種功能的目的
例子：
function css( config:string ):void{ } // error: Duplicate function implementation.
function css( config:string, value:number ):void { } // error: Duplicate function implementation.
在JavaScript里， 如果遇到相同的方法名，會將以下面的方法來覆寫上面的方法，不會出錯， 但是在typescript中，這種定義方式是會出錯的，錯誤原因是函式重復實作
TS多載實作：
function css( config:string ):string;
function css( config:string, value:number ):string;
// 對上面兩個css進行多載
function css( ...str:any[] ):any {
if (str.length == 1) {
return `${str[0]}`
} else {
return `${str[0]} + ${str[1]}`
}
}
console.log(css('4', 5));
其實我個人覺得，typescript的多載寫起來不舒服，所以盡量減少重復命名的方法吧
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295197.html
標籤：其他
上一篇：4.事件及影片