TypeScript 中函數的理解?與 JavaScript 函數的區別?


 

 

 

一、是什么

函數是JavaScript 應用程序的基礎,幫助我們實現抽象層、模擬類、信息隱藏和模塊

TypeScript 里,雖然已經支持類、命名空間和模塊,但函數仍然是主要定義行為的方式,TypeScript 為 JavaScript 函數添加了額外的功能,豐富了更多的應用場景

函數類型在 TypeScript 類型系統中扮演着非常重要的角色,它們是可組合系統的核心構建塊

二、使用方式

javascript 定義函數十分相似,可以通過funciton 關鍵字、箭頭函數等形式去定義,例如下面一個簡單的加法函數:

const add = (a: number, b: number) => a + b

上述只定義了函數的兩個參數類型,這個時候整個函數雖然沒有被顯式定義,但是實際上TypeScript 編譯器是能夠通過類型推斷到這個函數的類型,如下所示:

const add: (a:number, b:number)=>number

const add=(a:number,b:number)=>a+b

當鼠標放置在第三行add函數名的時候,會出現完整的函數定義類型,通過: 的形式來定義參數類型,通過 => 連接參數和返回值類型

當我們沒有提供函數實現的情況下,有兩種聲明函數類型的方式,如下所示:

// 方式一
type LongHand = {
  (a: number): number;
};

// 方式二
type ShortHand = (a: number) => number;

當存在函數重載時,只能使用方式一的形式

可選參數

當函數的參數可能是不存在的,只需要在參數后面加上 ? 代表參數可能不存在,如下:

const add = (a: number, b?: number) => a + (b ? b : 0)

這時候參數b可以是number類型或者undefined類型,即可以傳一個number類型或者不傳都可以

剩余類型

剩余參數與JavaScript的語法類似,需要用 ... 來表示剩余參數

如果剩余參數 rest 是一個由number類型組成的數組,則如下表示:

const add = (a: number, ...rest: number[]) => rest.reduce(((a, b) => a + b), a)

函數重載

允許創建數項名稱相同但輸入輸出類型或個數不同的子程序,它可以簡單地稱為一個單獨功能可以執行多項任務的能力

關於typescript函數重載,必須要把精確的定義放在前面,最后函數實現時,需要使用 |操作符或者?操作符,把所有可能的輸入類型全部包含進去,用於具體實現

這里的函數重載也只是多個函數的聲明,具體的邏輯還需要自己去寫,typescript並不會真的將你的多個重名 function的函數體進行合並

例如我們有一個add函數,它可以接收 string類型的參數進行拼接,也可以接收 number 類型的參數進行相加,如下:

// 上邊是聲明
function add (arg1: string, arg2: string): string
function add (arg1: number, arg2: number): number
// 因為我們在下邊有具體函數的實現,所以這里並不需要添加 declare 關鍵字

// 下邊是實現
function add (arg1: string | number, arg2: string | number) {
  // 在實現上我們要注意嚴格判斷兩個參數的類型是否相等,而不能簡單的寫一個 arg1 + arg2
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    return arg1 + arg2
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    return arg1 + arg2
  }
}

三、區別

從上面可以看到:

  • 從定義的方式而言,typescript 聲明函數需要定義參數類型或者聲明返回值類型
  • typescript 在參數中,添加可選參數供使用者選擇
  • typescript 增添函數重載功能,使用者只需要通過查看函數聲明的方式,即可知道函數傳遞的參數個數以及類型

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM