网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
在上面的语法中 (num1: number, num2: number) => number
,代表的就是一个函数类型:
接收两个参数的函数: num1和num2,并且都是number类型;
并且这个函数是有返回值的, 返回值类型也是number;
注意: 在某些语言中,可能参数名称num1和num2是可以省略,但是在TypeScript是不可以的
🍧参数的可选类型
参数的可选类型在前面我有讲过, 这里再对函数参数的可选类型进行一些补充
参数的可选类型, 可以指定某个参数是可选的:
如下: 参数x是必传的, 而y是可选的, 也就是说可传可不传
function foo(x: number, y?: number) {
console.log(x, y)
}
// 测试
foo(10)
foo(50, 20)
补充一:
这个时候这个参数y依然是有类型的,它是
number | undefined
的联合类型当参数y没有传参数时, 本质上就相当于将
y = undefined
传入函数中
补充二:
可选类型需要写在必传参数的后面, 写在前面编译阶段报错
// 错误演示
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中一个比较难以理解和把握的知识点:
我在JS高级中也有一篇文章专门讲解this: https://blog.csdn.net/m0_71485750/article/details/125174357;
因为this在不同的情况下会绑定不同的值,所以对于它的类型就更难把握了;
那么,TypeScript是如何处理this呢?我们先来看一个例子:
const info = {
name: "chenyq",
running() {
console.log(this.name + " is running~")
}
}
info.running() // chenyq is running~
上面的代码是可以正常运行的,也就是TypeScript在编译时,认为我们的this是可以正确去使用的:
TypeScript认为函数 sayHello 是通过外部对象 info调用的(隐式绑定),所以在使用时,就会把this当做该info对象。
但是对于某些情况来说,TypeScript并不知道this到底是什么, 是推导不出来this指向谁的
function running() {
console.log(this.name + " is running~")
}
const info = {
name: "chenyq",
running
}
info.running()
上面这段代码运行会报错的:
这里我们再次强调一下, TypeScript进行类型检测的目的是让我们的代码更加的安全;
所以这里对于running的调用来说,我们虽然将其放到了info中,通过info去调用, this应该依然是指向info对象的;
但是对于TypeScript编译器来说,这个代码是非常不安全的,因为我们也有可能直接调用函数,或者通过别的对象来调用函数;
解决方法,通常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~")
}
![img](https://img-blog.csdnimg.cn/img_convert/d58a72c012f3c7fea850910b4261baa7.png)
![img](https://img-blog.csdnimg.cn/img_convert/71292c11369351055efb6b79988ba35e.png)
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
-ecynbl8C-1715702272496)]
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**