函数

说明

TS为函数新增了以下功能

• 函数类型
• 可选参数
• 默认参数
• 剩余参数
• 函数重载

函数类型

在TS中编写函数，需要给形参和返回值指定类型
TS可以根据返回语句自动推断出返回值类型，所以通常可以省略返回值类型

完整函数类型

let myTest: (input1: number, input2: number) => string = function (input1: number, input2: number): string {
    return (input1 + input2).toString()
}

根据类型推论的一种按上下文归类得知若在赋值语句一边指定类型，另一边没有指定类型，那么TS会自动识别类型

let myTest= function (input1: number, input2: number): string {
    return (input1 + input2).toString()
}
//或者  
let myTest: (input1: number, input2: number) => string = function (input1,input2) {
    return (input1 + input2).toString()
}

定义函数的方式

使用带有调用签名的对象字面量来定义函数

let fn1:{():number}=function():number{return 1}

常规方式

let fn2:()=>number=function():number{return 1}

通过接口

// 通过接口约束函数
interface myTtest {
    (x:number,y:number):number
}

let myFunction:myTtest= function(x,y){return x+y}

console.log(myFunction(1,2))

使用类型别名

type myTtest= (x:number,y:number)=>number
    
let myFunction:myTtest= function(x,y){return x+y}

console.log(myFunction(1,2))

函数参数

可选参数

说明

TS中传递给一个函数的参数个数必须与函数期望的参数个数一致，JS中函数参数可选。可以通过可选参数实现TS中函数参数可选

注意

• 添加可选的参数必须在必须参数的后面，否则报错

• 在严格模式下会报错“对象可能未定义”

Eg

通过?实现

默认参数

在TS中可以设置默认参数，当没有传值或者值为undefined时，则使用默认参数

特点

• 在所有必须参数后面带默认初始化的参数都是可选的，在函数调用时可以省略
• 与可选参数不同，带有初始化的默认参数不是必须放在必须参数之后
• 若带默认值的参数出现在必须参数前，则函数调用时必须传入undefined的值来获取默认值

Eg

• 默认参数

// 函数  
let myTest = function (input1: number,input2=1): string {
    return (input1 + input2).toString()
}
let a: string = myTest(11,10)
let b:string= myTest(20)
console.log(a, typeof a) // 21 string
console.log(b,typeof b) // 21 string

• 默认值参数放在必须参数前，函数调用时必须传入undefined的值来获取默认值

// 函数  
let myTest = function (input2=1,input1: number): string {
    return (input1 + input2).toString()
}
let a: string = myTest(11,10)
let b:string= myTest(undefined,20)
console.log(a, typeof a) // 21 string
console.log(b,typeof b) // 21 string

剩余参数

说明

通过rest参数(形式为 ...变量名)来获取函数的剩余参数，即扩展运算符使用

Eg

let myTest = function (input1:number, ...input2:number[]) {
    return (input1+input2.reduce(function(prev, next, index, array) {
        return prev + next;
    },0)).toString()

}
let a: string = myTest(11,10,1,2,3)
console.log(a, typeof a) // 27 string

this

前置

tsconfig.json配置中，编译选项compilerOptions的属性noImplicitThis为false

说明

let middle = {
    a: 10,
    b: 15,
    c: 20,
    area: function () {
        return () => {
            // this 为 any 类型
            return (this.a + this.b + this.c) / 3
        }
    }
}

const myArea = middle.area()
console.log(myArea())

this为any类型，可以添加任意属性到any上，编译和运行都不会报错容易造成问题

明确this指向的方法

方法一 noImplicitThis设置为true

tsconfig.json配置中，编译选项compilerOptions的属性noImplicitThis设置为true后，TS会自动进行正确的判断

方法二 this参数

通过this参数这种形式来解决this为any类型这一问题它出现在参数列表的最前面

ts
interface Triangle {
    a: number;
    b: number;
    c: number;
    area: (this:Triangle) => () => number;
}

let triangle: Triangle = {
    a: 10,
    b: 15,
    c: 20,
    area: function (this: Triangle) {
        return () => {
            const p = (this.a + this.b + this.c) / 2
            return Math.sqrt(p * (p - this.a) * (p - this.b) * (p - this.c))
        }
    }
}

const myArea = triangle.area()
console.log(myArea().toFixed(2))

函数重载

说明

函数根据传入不同的参数，返回不同类型的数据
定义重载时，一定要把最精确的定义放在最前面

常见使用场景

当编译器不知道传入参数的类型，返回值的类型时

Eg

此时则可以采用函数重载

function myTest(target:number|string) {
    if(typeof target ==="number"){
        return target
    }
    if (typeof target ==="string") {
        return "test"
    }
}

console.log(myTest(1),myTest("10"))

函数重载具体使用

具体方法

同一个函数提供多个函数类型定义来进行函数重载，译器会根据这个列表去处理函数的调用

注意点

定义重载时，一定要把最精确的定义放在最前面

使用函数时注意事项

1. 如果一个函数没有使用return语句，则它默认返回undefined

2. arguments对象是所有（非箭头）函数中都可用的局部变量。可以使用arguments对象在函数中引用函数的参数

/*
S 此代码块称之为函数重载列表  列表中的函数称之为目标函数
*/
function myTest(x: string): number
function myTest(x: number): number
//E 函数重载列表

/*
S 函数的具体实现
具体实现中的函数称之为原函数
*/
function myTest(target: string | number) {
    if (typeof target === "number") {
        return target
    }
    if (typeof target === "string") {
        console.log(arguments[0])//"123"
        return "test"
    }
}
// E 函数的具体实现
console.log(myTest("123"))//"test"