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