Typescript基礎(2)——函數

前言

今天繼續typescript的學習，開始函數的學習。

函數

函數的定義

和JavaScript一樣，TypeScript函數可以創建有名字的函數和匿名函數。 你可以隨意選擇適合應用程式的方式，不論是定義一系列API函數還是只使用一次的函數。
定義有名字的函數:

function fn(){
  return 123;
}
console.log(fn())

定義匿名函數:

let fn1 = function(){
  return 456;
}
console.log(fn1())

函數定義類型

函數類型包含兩個部分：參數類型和返回值類型。當寫出完整函數的時候，兩部分類型都是需要的。我們需要給每個參數添加類型之後再為函數本身添加返回值類型。

function fn3(name:string,age:number):string{
  return `${name}的年齡是${age}歲`
}
console.log(fn3('小明',25))

如果函數沒有返回值，那麼函數返回值類型是void

function fn4():void{
  console.log('這是一個沒有返回值的函數')
}
console.log(fn4())

可選參數

在javascript中，函數的實參和形參可以不一致，也就是說實參的個數和形參的個數可以不相同。比如：下麵的函數形參要求兩個參數，但是實參只傳遞了一個參數。這種情況在js中不會報錯。

function fn5(name,age){
  console.log(`${name}的年齡是${age}`)
}

fn5('小紅')

但是在ts中，實參個數和形參個數必須一致。如果不一樣就需要配置可選參數。將沒有傳入的參數設置為可選參數。通過在可傳可不傳的參數類型前面加上?表示該參數為可選參數。

function fn5(name:string,age?:number):void{
  if(age){
    console.log(`${name}的年齡是${age}`);
  }else{
    console.log(`${name}`);
  }
}
fn5('小紅')
fn5('小紅',20)

註意：可選參數最好放到參數最後面

預設參數

在ES6中我們可以在參數後面直接設置預設參數

function fn6(name, age = 40) {
  if (age) {
      console.log(name + "\u7684\u5E74\u9F84\u662F" + age);
  }
  else {
      console.log("" + name);
  }
}
fn6('小紅');
fn6('小紅', 20);

同樣在ts中，我們可以在參數類型後面設置預設參數:

function fn6(name:string,age:number = 50):void{
  if(age){
    console.log(`${name}的年齡是${age}`);
  }else{
    console.log(`${name}`);
  }
}
fn6('小明')
fn6('小明',20)

剩餘參數

在前面我們知道在ts中，形參的個數和實參的個數必須是一致的。但是有些情況下我們並不知道實參個數究竟是多少。實參的個數有可能取決於用戶的輸入。我們不可能每次都根據實參的個數來修改用戶的輸入。比如：計算多個數的和：

function sum(a:number,b:number,c:number):number{
  return a + b + c;
}
console.log(sum(1,2,3))
console.log(sum(1,2,3,4))
console.log(sum(1,2,3,4,5))

我們可以觀察到：用戶可能需要求得是三個數的和，也可能需要求得是四個數的和。也可能需要求得是五個數的和。我們不能可能每次都根據用戶的輸入來修改形參的個數。在js中我們通過arguments來收集所有的參數。arguments是一個偽數組。在ts中我們同樣通過一個數組來收集所有的參數。只不過這個數組編譯器會幫助我們創建。名字是...後面的變數名字。

function sum(a:number,...rest:number[]):number{
    let sum = 0;
    for(let i = 0;i < rest.length;i++){
      sum += rest[i]
    }
    return sum;
}
console.log(sum(1,2,3))
console.log(sum(1,2,3,4))
console.log(sum(1,2,3,4,5))

函數的重載

JavaScript本身是個動態語言。 JavaScript里函數根據傳入不同的參數而返回不同類型的數據是很常見的。比如：

const person1 = {
  name:'小明',
  age:24,
  sex:'男'
}
const person2 = ['小紅',26,'女']
function info(person){
  // 判斷傳遞進來的參數類型
  if(Array.isArray(person) == true){
    //如果是數組...
    console.log(`${person[0]}的年齡是${person[1]}性別是${person[2]}`)
  }else{
    //如果是對象...
    console.log(`${person.name}的年齡是${person.age}性別是${person.sex}`)
  }
}
console.log(fn7(person1))
console.log(fn7(person2))

info函數會根據傳遞進來的參數類型，來進行相應的操作。ts中重載的實現是通過為同一個函數提供
多個函數類型定義來進行函數重載。

function fn7(person:[string,number,string]):string;  // 第一個函數類型定義
function fn7(person:object):string;// 第二個函數類型定義
function fn7(person:any):any{
  // 判斷傳遞進來的參數類型
  if(Array.isArray(person) == true){
    //如果是數組...
    console.log(`${person[0]}的年齡是${person[1]}性別是${person[2]}`)
  }else{
    //如果是對象...
    console.log(`${person.name}的年齡是${person.age}性別是${person.sex}`)
  }
}
console.log(fn7(person1))
console.log(fn7(person2))