typescript 函数类型继承 typescript 函数参数

一,前言

本篇对函数相关知识进行梳理

1,函数的4种定义方式
2,TS对函数参数的要求
3,函数参数-可选参数,默认值,剩余参数
4,函数重载

---

二,函数的4种定义方式

// 使用function定义函数
function add1 (x: number, y: number) {
    return x + y;
}
// 通过一个变量定义一个函数类型
let add2: (x: number, y: number) => number
// 通过类型别名定义一个函数类型
type add3 = (x: number, y: number) => number
// 通过接口定义一个函数类型
interface add4 {
    (x: number, y: number): number
}

1,使用function定义函数
    需要明确指出参数的类型
    依靠TS的类型推断,函数返回值类型可省略
2,通过一个变量定义一个函数类型
3,通过类型别名定义一个函数类型
4,通过接口定义一个函数类型

注意:后三种仅仅是定义了函数类型,没有具体实现,调用前需要编写函数体进行实现

---

三,TS对函数参数的要求

在JS中,对函数参数的个数是没有限制的
而在TS中,形参和实参必须一一对应,多参少参,都会提示缺少参数

少传参时,会提示缺少参数:

多传参时:

---

四,函数参数-可选参数

当需要参数可传可不传时,可以设置为可选参数
和设置对象类型接口的可选属性相似,也是使用`参数名+?`进行设置

// 可选参数
function option(x: number, y?: number) {
    return y? x + y : x
}
option(1) // 1

注意:

可选参数只能位于必选参数之后

会提示必选参数不能位于可选参数之后

---

五,函数参数-默认值

// 参数默认值
function defaultParam(x: number, y = 1, m: number, n = 2) {
    return x + y + m + n
}

注意:

在必选参数前,默认参数是不可以省略的,
必须明确传入undefined来获取他的默认值,否则会造成参数赋值错位

console.log(defaultParam(1, undefined, 2)); // 6

---

五,函数参数-剩余参数

当参数不固定时,可以使用剩余参数

剩余参数的定义

和ES6相同,剩余参数以数组形式存在

// 剩余参数
function otherParam(x: number, ...other: number[]) {
    return x + other.reduce((pre, cur) => pre + cur)
}
console.log(otherParam(1,2,3))  // 6

---

六,函数重载

TS也具有像java等静态类型语言都有的函数重载概念

什么是函数重载?

当两个函数名称相同,参数个数,类型不同时,就实现了函数重载

函数重载的优势:

不需要再单纯的为了相似功能函数选用不同的函数名称,增强了函数的可读性

TS中的函数重载:

示例:函数支持多个参数,如果是数字返回所有参数和,如果是字符串返回字符串拼接

1,先定义一组相同名称的函数声明(重载列表)

function reload(...params: number[]): number;
function reload(...params: string[]): string;

2,然后,在一个类型最宽泛的版本中实现重载,再定义一个相同名称的数组

// 函数重载
function reload(...params: number[]): number;
function reload(...params: string[]): string;
function reload(...params: any[]): any {
    let type = params[0]
    if(typeof type === 'string'){
        return params.join('')
    } else if(typeof type === 'number'){
        return params.reduce((pre, cur) => pre + cur)
    }
}
console.log(reload(1, 2, 3))        // 6
console.log(reload('A', 'B', 'C'))  // ABC

注意:

TS编译器在处理函数重载时,会先查询重载列表(就是前面定义的列表),
按顺序进行尝试,选择最先匹配的函数定义,所以需要将最容易匹配的函数定义写在最前面

---

七,结尾

本篇介绍了对函数相关知识进行了梳理, 包括:

1,函数的4种定义方式
2,TS对函数参数的要求
3,函数参数-可选参数,默认值,剩余参数
4,函数重载