TypeScript 函式可選引數和預設引數

JavaScript中的函式引數是非常靈活的，實參和形參的數目可以不必相同。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function func(a,b){
  // code
}
func(1);

函式宣告規定了兩個引數，實際呼叫卻傳遞了一個引數。

TypeScript對於引數的要求則相對嚴格，程式碼例項如下:

[typescript] 純文字檢視 複製程式碼
function func(webName: string, age: 4){
  // code
}
func("螞蟻部落",4);//程式碼正確
func("螞蟻部落",4,"青島市南區");//程式碼錯誤
func(5,4);//程式碼錯誤
func("螞蟻部落");//程式碼錯誤

TypeScript函式傳參的一個基本規則總結：給一個函式的引數個數必須與函式期望的引數個數一致。

為了應用的靈活性，TypeScript函式增加了可選引數和預設引數，下面分別做一下介紹:

（1）.可選引數:

[typescript] 純文字檢視 複製程式碼
function func(webName: string, age?: 4){
  // code
}
func("螞蟻部落",4);//程式碼正確
func("螞蟻部落",4,"青島市南區");//程式碼錯誤
func(5,4);//程式碼錯誤
func("螞蟻部落");//程式碼錯誤

在引數名稱後面加一個問號(?)可以規定此引數為可選引數，那麼此引數可以省略。

特別說明：可選引數必須位於必需引數後面。

（2）.預設引數:

可以為引數提供一個預設值，當沒有傳遞引數值或傳遞的值是undefined時，就使用預設引數值。

程式碼例項如下:

[typescript] 純文字檢視 複製程式碼
function func(webName: string, age= 4){
  // code
}
func("螞蟻部落")//age引數將使用預設值4
func("螞蟻部落",5)//age引數預設值不會生效，使用傳遞的值
func("螞蟻部落",undefined)//傳遞undefined時，使用預設引數值

與可選引數不同的是，帶預設值的引數不需要放在必須引數的後面。 

如果帶預設值的引數出現在必須引數前面，使用者必須明確的傳入 undefined值來獲得預設值。 

特別說明:

可選引數與末尾的預設引數共享引數型別，程式碼如下:

[typescript] 純文字檢視 複製程式碼
function func(webName: string, age= 4):string{
  // code
}
function func(webName: string, age?:number):string{
  // code
}

共享同樣型別(webName: string, age?: number) => string，預設引數的預設值消失，保留一個可選引數資訊。

strictNullChecks:true的影響:

如果在tsconfig.json檔案中配置"strictNullChecks":true，那麼可選引數會被自動地加上| undefined。

程式碼例項如下:

[typescript] 純文字檢視 複製程式碼
function func(x: number, y?: number) {
    return x + (y || 0);
}
func(1, 2);
func(1);
func(1, undefined);

截圖如下: