TypeScript学习（二）—— 函数

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cbfd09c6fb9a032106bcf43

文章标签：

#javascript #ViewUI

本文详细介绍了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('阿旺'))    //我是阿旺
复制代码