TS入門——02.函數

函數定義

函數就是一組可以執行某種特定功能的代碼段，函數聲明告訴編譯器函數的名稱、傳回類型和參數

函數就是使用了關鍵詞 function把代碼塊包裹在花括号中，如下

// 函數聲明
function fn() {
  console.log('函數執行了')
}
// 函數調用
fn() // 函數執行了
           

大多時候，我們需要通過函數指定傳回值給調用處，在js中我隻需通過關鍵字return即可傳回任意類型的值，但是在ts中我們需要給傳回值指定一個傳回類型，如果沒有傳回值，編譯器預設傳回類型為void，也就是沒有傳回值，是以上面的代碼就等價于：

// 函數聲明
function fn(): void {
  console.log('函數執行了')
}
// 函數調用
fn() // 函數執行了
           

有傳回值的函數如下

// 帶傳回值的函數
function fn1(): string {
  return 'lucky'
}
console.log(fn1()) // lucky
           

我們在調用函數時有時需要給函數内部傳遞某些值，在js中隻需根據相關形參個數傳入實參即可，但在ts中則需要規定傳入參數的資料類型，例：

// 帶參數的函數
function fn(age: number, name: string): string {
  return name + '今年' + age + '歲'
}

console.log(fn(18, 'lucky')) //lucky今年18歲
           

總結ts定義函數的文法有：

通過function關鍵字定義函數

function 函數名(參數1：參數類型，參數2：參數類型，…)： 傳回類型 { return 傳回值 }

通過匿名函數的方法定義函數

var 函數名 = function(參數1：參數類型，參數2：參數類型，…): 傳回類型 { return 傳回值 }

通過Function構造函數的方式來定義函數，但是不建議使用

var 函數名 = new Function(‘a’, ‘b’, ‘return a + b’)

函數定義拓展

可選參數

帶可選參數的函數 在參數的後面加入’?’（可選參數必須放在必選參數的後面）

function fn3(a: number, b?: number): number {
  if (b) {
    return a + b
  } else {
    return a
  }
}

console.log(fn3(2, 3)) // 5
console.log(fn3(2)) // 2
           

預設參數

帶預設參數的函數 給參數指派，可以不傳值，可以重新指派

function fn14(name: string, age: number = 18) {
  return name + age + '歲'
}

console.log(fn14('lucky')) // lucky18歲
console.log(fn14('lucky', 22)) // lucky22歲
           

剩餘參數

如果函數不指定參數個數，可以通過擴充運算符來實作傳遞若幹數量的參數

function fn(...arr: number[]): number {
  let sum = 0;
  arr.forEach(value => {
    sum += value
  })
  return sum
}

console.log(fn(1, 2)) // 3
console.log(fn(1, 2, 3)) // 6
console.log(fn(1, 2, 3, 4)) // 10
           

函數重載

定義一個函數名相同，參數的數量或者類型不同的函數就叫做函數的重載，在ts中的函數重載方式案例如下

function overload(name: string): void;
function overload(name: string, age: number): void;
function overload(age: number, name: string): void;

function overload(m: any, n?: any): void {
  console.log(m, n)
};

overload('lucky') // lucky undefined
overload('lucky', 22) // lucky 22
overload(22, 'lucky') // 22 lucky
           

箭頭函數

ts支援es6文法，箭頭函數示例寫法如下

// 箭頭函數
var fn = (x:number): number => {
  return x
}

console.log(fn(1000)) // 1000
           

以上便是本人學習ts函數的基礎知識了，若有不正，謹聽指教