文章目录
TypeScript函数详解
🍧函数类型表达式
在JavaScript开发中,函数是重要的组成部分,并且函数可以作为一等公民(可以作为参数,也可以作为返回值进行传递)。
那么在使用函数的过程中,函数是否也可以有自己的类型呢?
// 表示一个接收两个number类型的参数, 且返回值也是number类型的函数类型
type CalcFun = (num1: number, num2: number) => number
function calc(fn: CalcFun, n1: number, n2: number) {
return fn(n1, n2)
}
// 定义两数相加的函数
function sum(num1: number, num2: number) {
return num1 + num2
}
// 定义两数相乘的函数
function mul(num1: number, num2: number) {
return num1 * num2
}
// 测试
console.log(calc(sum, 10, 30))
console.log(calc(mul, 20, 30))
在上面的语法中 (num1: number, num2: number) => number
,代表的就是一个函数类型:
注意: 在某些语言中,可能参数名称num1和num2是可以省略,但是在TypeScript是不可以的
🍧参数的可选类型
参数的可选类型, 可以指定某个参数是可选的:
function foo(x: number, y?: number) {
console.log(x, y)
}
// 测试
foo(10)
foo(50, 20)
补充一:
补充二:
// 错误演示
function foo(y?: number, x: number) {
console.log(x, y)
}
🍧函数的剩余参数
从ES6开始, JavaScript也支持剩余参数,剩余参数语法允许我们将一个不定数量的参数放到一个数组中。
function sum(...nums: number[]) {
let result = 0
nums.forEach(item => {
result += item
})
return result
}
// 测试
console.log(sum(10, 20, 30))
console.log(sum(10, 20, 30, 40, 50, 60))
注意: 如果函数还有其他参数, 剩余参数要放到参数列表的最后面
🍧this的类型使用
this是JavaScript中一个比较难以理解和把握的知识点:
那么,TypeScript是如何处理this呢?我们先来看一个例子:
const info = {
name: "chenyq",
running() {
console.log(this.name + " is running~")
}
}
info.running() // chenyq is running~
上面的代码是可以正常运行的,也就是TypeScript在编译时,认为我们的this是可以正确去使用的:
但是对于某些情况来说,TypeScript并不知道this到底是什么, 是推导不出来this指向谁的
function running() {
console.log(this.name + " is running~")
}
const info = {
name: "chenyq",
running
}
info.running()
上面这段代码运行会报错的:
解决方法,通常TypeScript会要求我们明确的指定this的类型:
// 明确指定this的类型
function running(this: { name: string }) {
console.log(this.name + " is running~")
}
const info = {
name: "chenyq",
running
}
info.running()
明确指定了this的类型后, 就不能独立调用函数, 独立调用会编译报错
可以通过call, apply, bind调用 (显式绑定), 但是同样也需要指定绑定对象, 且该对象还需要有name属性
function running(this: { name: string }) {
console.log(this.name + " is running~")
}
const info = {
name: "chenyq",
running
}
running.call({name: "kaisa"}) // kaisa is running~
🍧函数的重载介绍
在TypeScript中,如果我们编写了一个add函数,希望可以对字符串和数字类型进行相加,应该如何编写呢?
type Sum = number|string
function sum(n1: Sum, n2: Sum) {
return n1 + n2
}
那么这个代码我们可以使用函数的重载编写
// 重载签名, 需要声明返回值类型
function sum(n1: number, n2: number): number;
function sum (n1: string, n2: string): string;
// 重载函数实现
function sum(n1: any, n2: any) {
return n1 + n2
}
// 测试
console.log(sum(123, 10)) // 133
console.log(sum("aa", "bb")) // aabb
注意在函数的重载中, 实现函数是不能直接被调用的