TypeScript（6）函式

Silent丿丶黑羽發表於2022-06-21
TypeScript函式

函式

函式是 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())


 

剩餘引數

必要引數，預設引數和可選引數有個共同點：它們表示某一個引數。 有時，你想同時操作多個引數，或者你並不知道會有多少引數傳遞進來。 在 JavaScript 裡，你可以使用 arguments 來訪問所有傳入的引數
 
在 TypeScript 裡，你可以把所有引數收集到一個變數裡：
剩餘引數會被當做個數不限的可選引數。 可以一個都沒有，同樣也可以有任意個。 編譯器建立引數陣列，名字是你在省略號（ ...）後面給定的名字，你可以在函式體內使用這個陣列。

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


 

函式過載

函式過載: 函式名相同, 而形參不同的多個函式
在JS中, 由於弱型別的特點和形參與實參可以不匹配, 是沒有函式過載這一說的 但在TS中, 與其它物件導向的語言(如Java)就存在此語法

/* 
函式過載: 函式名相同, 而形參不同的多個函式
需求: 我們有一個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'))

相關文章