TS学习笔记3：函数类型

点击此处访问本文所属专栏

1. 定义函数类型

在TS中声明函数时，我们可以通过设置参数与返回值的类型，来规范函数的输入和输出行为。下面是三种定义函数类型的方法。

1.1 直接定义函数类型

// 定义一个函数类型
let add: (x: number, y: number): number => number  // 定义函数类型
add = (arg1:number, arg2:number) => arg1 + arg2  // 函数赋值

1.2 使用接口定义函数类型

interface Add {
    (x: number, y: number): number
}
let add: Add
add = (arg1:number, arg2:number) => arg1 + arg2

1.3 使用类型别名定义函数类型

type Add = (x: number, y: number) => number
let add: Add
add = (arg1:number, arg2:number) => arg1 + arg2

2. 可选参数

与接口属性一样，函数参数也可以设置为可选状态,在参数后加' ? '即可：

type Add = (arg1: number, arg2: number,arg3?: number) => number
let add: Add
add = (x: number, y:number) => x+ y  // 不定义第三个参数,正常编译
add = (x: number, y:number, z: number) => x+ y + z  // 定义第三个参数,正常编译

3. 参数默认值

给参数设置默认值，与js的语法一致：

add = (x: number, y: number = 3) => x+ y

4. 剩余参数

与es6一样，在TS中同样可以使用...args表示剩余参数，args为array类型：

const handleFunc1 = (arg1: number, ...args: []) => {
    return args.join(',')
}

5. 函数重载

函数重载是为同一个函数提供多个函数类型定义的方法，它可以让函数根据不同的参数类型完成不同的细节逻辑：

function handleFunc (x: string): string[]
function handleFunc (x: number): number[]
function handleFunc (x: any) :any {
    if (typeof x === 'string') {
        return x.split('')
    }else{
        return x.toString().split('').map( item => Number(item))
    }
}
const a = handleFunc(123)
console.log(a)  // [1, 2, 3]
const b = handleFunc('123')
console.log(b)  // ['1', '2', '3']