天天看點

TypeScript(6)函數

函數

函數是 ​

​JavaScript​

​​ 應用程式的基礎,它幫助你實作抽象層,模拟類,資訊隐藏和子產品。在 ​

​TypeScript​

​​ 裡,雖然已經支援類,命名空間和子產品,但函數仍然是主要的定義行為的地方。TypeScript 為 JavaScript 函數添加了額外的功能,讓我們可以更容易地使用。

基本示例

和 JavaScript 一樣,TypeScript 函數可以建立有名字的函數和匿名函數。你可以随意選擇适合應用程式的方式,不論是定義一系列 API 函數還是隻使用一次的函數。

// 命名函數
function add(x, y) {
  return x + y
}

// 匿名函數
let myAdd = function(x, y) { 
  return x + y;
}      

函數類型

為函數定義類型

讓我們為上面那個函數添加類型:

function add(x: number, y: number): number {
  return x + y
}

let myAdd = function(x: number, y: number): number { 
  return x + y
}      

我們可以給每個參數添加類型之後再為函數本身添加傳回值類型。TypeScript 能夠根據傳回語句自動推斷出傳回值類型。

書寫完整函數類型

現在我們已經為函數指定了類型,下面讓我們寫出函數的完整類型。

// 函數的完整寫法
// myAdd2---->變量名----函數myAdd2
//  (x: number, y: number) => number 是目前這個函數的類型
// function(x: number, y: number): number { return x + y } 相當于符合上面這個函數的值
let myAdd2: (x: number, y: number) => number = 
function(x: number, y: number): number {
  return x + y
}      

可選參數和預設參數

​TypeScript​

​​ 裡的每個函數參數都是必須的。 這不是指不能傳遞 ​

​null​

​​ 或 ​

​undefined​

​​ 作為參數,而是說編譯器檢查使用者是否為每個參數都傳入了值。編譯器還會假設隻有這些參數會被傳遞進函數。 簡短地說,傳遞給一個函數的參數個數必須與函數期望的參數個數一緻。

​​

​JavaScript​

​​ 裡,每個參數都是可選的,可傳可不傳。 沒傳參的時候,它的值就是 ​

​undefined​

​​。 在TypeScript 裡我們可以在參數名旁使用 ​

​? ​

​​實作可選參數的功能。 比如,我們想讓 ​

​lastName​

​​ 是可選的

在 ​​

​TypeScript​

​​ 裡,我們也可以為參數提供一個預設值當使用者沒有傳遞這個參數或傳遞的值是 ​

​undefined​

​​ 時。 它們叫做有預設初始化值的參數。 讓我們修改上例,把​

​firstName​

​​ 的預設值設定為​

​ "A"​

​。

function buildName(firstName: string='A', lastName?: string): string {
  if (lastName) {
    return firstName + '-' + lastName
  } else {
    return firstName
  }
}

// 都傳入
console.log(buildName('C', 'D'))
// 隻傳入姓
console.log(buildName('C'))
// 什麼也不傳
console.log(buildName())      
TypeScript(6)函數

剩餘參數

必要參數,預設參數和可選參數有個共同點:它們表示某一個參數。 有時,你想同時操作多個參數,或者你并不知道會有多少參數傳遞進來。 在 ​

​JavaScript​

​​ 裡,你可以使用 ​

​arguments​

​​ 來通路所有傳入的參數

在 TypeScript 裡,你可以把所有參數收集到一個變量裡:

剩餘參數會被當做個數不限的可選參數。 可以一個都沒有,同樣也可以有任意個。 編譯器建立參數數組,名字是你在省略号​​

​( ...)​

​後面給定的名字,你可以在函數體内使用這個數組。

function info(x: string, ...args: string[]) {
  console.log(x, args)
}
info('abc', 'c', 'b', 'a')      
TypeScript(6)函數

函數重載

/* 
函數重載: 函數名相同, 而形參不同的多個函數
需求: 我們有一個add函數,它可以接收2個string類型的參數進行拼接,也可以接收2個number類型的參數進行相加 
*/

// 重載函數聲明
function add (x: string, y: string): string
function add (x: number, y: number): number

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

console.log(add(1, 2))
console.log(add('a', 'b'))      

繼續閱讀