TS复习-----TS中的函数

目录

一、ts函数的定义

二、ts中定义函数传参

1.函数传参方法

2.可选参数 

 3.默认参数

4.剩余参数

函数重载

一、ts函数的定义

函数是一种特殊的对象，可以被调用。TS 里的函数和原生，ES 6 里的函数差不太多，只是多了一些其他功能。

// 1.函数声明法
function fun(): string {
    return '123'
}
// 2.匿名函数法
let fun2 = function (): number {
    return 123
}
// 3.没有返回值的方法
function fun3(): void {
    console.log(111);
}

二、ts中定义函数传参

1.函数传参方法

TS 里可以自定义传入参数的类型以及函数返回的类型。

function getInfo(name: string, age: number): string {
    return name + age
}
console.log(getInfo('zs', 20));

2.可选参数 

TS 函数还可以设置可选参数。如果不设置可选参数，那么所有定义的参数都要传入，在参数后边加一个？号表示该参数可传可不传

注意：可选参数必须配置到参数的后面​​​​​​​


function fun(name: string, age?: number): string {
    if (age) {
        return name + age
    } else {
        return name + '年龄未知'
    }
}
fun('zs')
fun('ls', 29)

 3.默认参数

当函数设置了默认参数时，如果给函数传值，所传过来的值会覆盖设置的默认值，未传值时选择默认值，这个其实是 ES 6 的特性，可以给函数加默认参数值。

要注意的是设置了默认值后就不需要设置类型了，因为 TS 可以做类型推断。

function fun(name: string, age: number = 29): string {
    if (age) {
        return name + age
    } else {
        return name + '年龄未知'
    }
}
fun('zs')
fun('ls', 30)

4.剩余参数

当函数不知道要传递多少个参数的情况下，可以使用三点运算符（…）这是函数里类似数组的一个特殊对象，里面存放的是函数传入参数，很好理解。

注意：不是数组，是对象，只是长得像数组。

function fn(a: number, b: number): number {
    // return a + b
    return arguments[0] + arguments[1]
}
console.log(fn(1, 2));


function fn(a: number, ...args: number[]) {
    // rest (剩余部分)参数必须是数组类型
    let res = 0
    args.forEach(item => {
        res += item
    })
    return res
}
console.log(fn(1, 2, 3, 4, 5))//14

函数重载

JavaScript 作为动态语言， 是没有函数重载这一说法的。原因如下：

既然语言层面无法自动进行重载，但借助其动态的特性，我们可以在代码中手动检查入参的类型，或者通过 arguments 获取到参数个数，从而实现根据不同的入参做不同的操作。

TS 的重载和 Java 的差不多，就是可以对调用同一个函数的时候传入不同的参数。但是重载的函数参数数目应该要是一样的。

需要注意的是： 当 TypeScript 编译器处理函数重载时，它会查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。

由于 JavaScript 是一个动态语言，我们通常会使用不同类型的参数来调用同一个函数，该函数会根据不同的参数而返回不同的类型的调用结果：

function add(x, y) {
    return x + y
}
console.log(add(1, 2));//3
console.log(add(1, '2'));//12

以上代码在JS环境中运行是没有问题的，但是如果在TypeScript环境下且TypeScript编译器开启noImplicitAny(将TypeScript从可选类型语言转换为强制类型检验语言)配置项时，以上代码会提示以下错误信息：

Parameter 'x' implicitly has an 'any' type.
Parameter 'y' implicitly has an 'any' type.

该信息告诉我们参数 x 和参数 y 隐式具有 any 类型。为了解决这个问题，我们可以为参数设置一个类型。因为我们希望 add 函数同时支持 string 和 number 类型，因此我们可以定义一个 string | number 联合类型 

设置了联合类型后，之前错误提示信息就消失了，接着下一步：

let result = add('hearts', 'spades');
result.split(' ');

 我们想当然的以为result类型为string，然后就可以正常使用字符串对象上的split方法， 结果又出现了新问题， 提示number类型的对象上并不存在split属性。

TS复习-----TS中的函数

 这时可以使用函数重载。可以为同一个函数提供多个函数类型定义来进行函数重载（函数名称相同，参数数量或类型不同， 或者参数数量相同同时参数顺序不同）。

如何进行定义？

type Types = number | string;
// 重载签名
function add(x: number, y: number): number
function add(x: string, y: string): string
function add(x: string, y: number): string
function add(x: number, y: number): string
//实现签名
function add(x: Types, y: Types) {
    if (typeof x === 'string' || typeof y === 'string') {
        return x.toString() + y.toString();
    }
    return x + y;
}
let result = add('hearts', 'spades');
result.split(' ');
标签 , ,

发表回复