經過一個小案例瞭解 TypeScript 函數重載和類型保護

時間 2019-11-06

標籤經過一個案例瞭解 typescript 函數重載類型保護简体版

原文原文鏈接

一個小需求

咱們想作一個這樣的函數
- 參數 number 默認值爲 1
- number 只能輸入 1，2，3 三種類型

一、開始籌劃

code

// 聲明一個 number 的特殊類型，限制參數
type numberType = 0 | 1 | 2;

function test(a:numberType = 1){
    console.log(a)
}

test();
// 1

test(2);
// 2
複製代碼

什麼是聯合類型？

認識和複習一下聯合類型
聯合類型表示一個值能夠是幾種類型之一。咱們用豎線（|）分隔每一個類型，因此number | string | boolean表示一個值能夠是number，string，或boolean。

二、使用函數重載

function test(a?: numberType):number; function test(a = 1):number | void {
    console.log(a)
}

test();
// 1

test(2)
// 2
複製代碼

函數重載的幾個常見問題？

所謂函數重載就是同一個函數，根據傳遞的參數不一樣，會有不一樣的表現形式。

JavaScript 模擬實現css

function test(){ 
  if(arguments.length==0){ 
    console.log(a)("alert!");  
  } 
  else if(arguments.length==1){ 
    console.log(a)(arguments[0]) 
  } 
} 

test(); 
// alert!

test(2);
// 2
複製代碼

爲何我會獲得 Supplied parameters do not match any signature 的錯誤？(因爲 JavaScript 沒有函數重載)html
函數實現簽名，它並非重載的一部分：git

function createLog(message: string): number; function createLog(source: string, message?: string): number {
  return 0;
}

createLog('message'); // OK
createLog('source', 'message'); // ERROR: Supplied parameters do not match any signature

複製代碼

當至少具備一個函數重載的簽名時，只有重載是可見的。最後一個聲明簽名（也能夠被稱爲簽名的實現）對簽名的形狀並無貢獻，所以，要得到所需的行爲，你須要添加額外的重載：

function createLog(message: string): number;
function createLog(source: string, message: string): number;
function createLog(source: string, message?: string): number {
  return 0;
}
複製代碼

三、或許可使用類型保護

function isNumberType(type: number | numberType): type is numberType {
    return (number as numberType) !== undedined;
}

function test(number = 1){
    if(isNumberType(number)){
        console.log(number)
    }else{
        // 咱們作更多的類型保護能夠在格式錯誤的時候手動作一些用戶提示的操做。
        console.error('error number!')
    }
}

test(1);
// 1
複製代碼