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))