TypeScript學習（二）—— 函式

前篇：TypeScript學習（一）—— 資料型別

在TS中，函式也和es中有些許不同。我們可以去指定形參的型別，也可以去指定函式的返回型別。接下來我們就來看下TS中的函式。

函式的定義

function Fn():string { //定義返回值為string型別的函式
    const str:string = '22222'
    return str
}
function Fn1(name:string, age:number):string { //對形參型別進行約束
    return name + age
}
Fn1('mimi', 6) //不報錯
Fn1(44, 6) //型別不對編譯器報錯
Fn1('wumi') //報錯

//可選引數
function Fn2(name:string, age?:number):string { //加？為可選引數，可以傳可以不傳,可選引數必須配置到引數的最後面
    return name + age
}
Fn2('xixixi') //不報錯


//預設引數
function Fn(name:string, age:number = 2):string { //給形參一個預設值，如果不傳age就為預設的2
    return name + age
}
console.log(Fn('咪咪', 3)) //=>咪咪3
console.log(Fn('咪咪')) //=》咪咪2

//剩餘引數
function sum(...result:number[]):number { //...為剩餘元素運算子，把傳進來的引數都放入result陣列中
    return result.reduce((x, y) => x + y)
}
console.log(sum(1,2,3,4,5))
複製程式碼

函式的過載

TS中函式的過載，通過為同一個函式提供多個函式型別定義來實現多種功能的目的

//引數型別不同的過載
function User(name:string):string;
function User(age:number):number;
function User(str:any):any{
    if(typeof str === 'string'){
        return '我是name:' + str
    }else {
        return '我是age:' + str
    }
}

User('wumi') //=>我是name:wumi
User(true)  //=>報錯，沒有布林型別的過載

//引數個數不同的過載
function User1(name:string):string
function User1(name:string, age:number):string
function User1(name:any, age?:any):any{
    if(age){
        return '我是' + name + '，age:' + age
    }else {
        return "我是" + name
    }
}
console.log(User1('阿旺',2))  //我是阿旺，age:2
console.log(User1('阿旺'))    //我是阿旺
複製程式碼