函数类型
函数有两种方式定义
- function 关键字来定义函数
javascript
function a(){}
- 表达式定义(箭头函数的形式)
javascript
const a=()=>{}
函数需要定义类型的有三个地方 入参 和 返回值 以及 函数本身 的类型, 函数本身的类型常用于表达式定义的函数
javascript
function sum(a:string,b:string):string{
return a+b
}
let sum1 = (a:string,b:string): string => {
return a+b
}
type sum1Type = (a:string,b:string)=> string
let sum2: sum1Type = (a:string,b:string): string => {
return a+b
}
类型推导
根据返回值类型推导
javascript
function f(a:string,b:string) {
return a+b
}
![](https://i-blog.csdnimg.cn/direct/0e2f7324d8a74a01bcb0b60de5293552.png)
根据上下文推导,根据位置来进行推导,也就是
x
对应入参a
的类型,y
对应b
的类型,
javascript
type ISum = (x:string,y:string)=> string;
let sum3:ISum = (a,b) => {
return a+b
}
入参数量可以比类型中的数量少,更具位置一一对应,但是不能多
函数返回类型
函数返回类型可以为void,意思为不校验返回值,在某些时候函数有没有返回值是没有意义的。
javascript
type ICallback = (a:string,b:number)=> void
function fn(callback:ICallback) {}
fn((a,b) => {
return '1'
})
![](https://i-blog.csdnimg.cn/direct/e299c6e6c1ea4edf857ddeb5003b016e.png)
函数可选参数
在入参后面增加
?
,可以将这个入参变为可选,但是只能用在入参最后。
javascript
let sum4 = (a:string,b:string,c?:string):string => {
return a+b
}
sum4('3','7')
![](https://i-blog.csdnimg.cn/direct/7e46ff3169f34d24acc2ddffb2a0ca92.png)
函数剩余参数
剩余运算符
...
,可以传入不指定数量的参数
javascript
let total = (a:string,b:string,...rest:string[]): string => {
return a+b+rest.join('')
}
total('1','2','3','4','5')
![](https://i-blog.csdnimg.cn/direct/5700fa7186744621abe7af5c867ce20d.png)
获取类型的内置方法
- typeof 获取变量类型
javascript
let person = {
name: '123',
age: 123
}
type PersonType = typeof person
![](https://i-blog.csdnimg.cn/direct/128b8ac4b9bf4a4aac206a95c490091c.png)
- keyof 获取索引类型只能查询类型
javascript
type PersonKeyType = keyof typeof person
![](https://i-blog.csdnimg.cn/direct/1f303c4aec014ed3875f0a829c575ec5.png)
ts中this需要手动指定。默认是函数的第一个参数
javascript
let person = {
name: '123',
age: 123
}
type PersonType = typeof person
type PersonKeyType = keyof typeof person
function getV(this: PersonType, key: PersonKeyType ) {
return this[key]
}
let r = getV.call(person, "name")
![](https://i-blog.csdnimg.cn/direct/dbf3540236044ef4872f69dfc8195887.png)
![](https://i-blog.csdnimg.cn/direct/eba1f9dfad05490088915883d7864f68.png)
![](https://i-blog.csdnimg.cn/direct/ba12a5ff83e144e3af4cef39b0630f05.png)
函数重载
重载 根据不同的参数类型做不同处理,一般这个参数类型是有限的。ts中的重载是伪重载,只是类型重载,不是逻辑重载
javascript
function toArray(value: string | number){
if (typeof value ==='string') {
return value.split('')
}
if (typeof value === 'number') {
return value.toString().split('')
}
}
let arr = toArray('123')
![](https://i-blog.csdnimg.cn/direct/75e75dbb175740bea277f6bbc9f59f52.png)