文章目录
- 声明定义
- 传参数
- 可选参数
- 默认参数
- 剩余参数
- 合并参数
- this
- 函数重载
声明定义
函数声明法:
function fn(): string{
return '声明什么类型就要返回什么类型'
}
匿名函数法:
let fn = function(): number{
return 123
}
// 记得没返回值的要用void类型
let fn = function():void{}
// 函数可以和es6一样的书写
let fn = (a: string): void => {
console.log(a)
}
箭头声明:
在匿名函数法声明的时候,完整的写法是通过箭头的方式去声明类型的,不要与箭头函数搞混。例如:
let fn= function (x: number, y: number): number {
return x + y;
};
// 其实完整的写法,左侧是需要变量的类型标注:的,表示某种函数(默认不写是类型推导出的)
let fn: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y;
};
关于函数返回类型:一般情况下,TypeScript 中的函数返回值类型是可以缺省和推断出来的。
传参数
// 要指定参数类型
function fn(name: string, age: number): string{
return `${name}-${age}`
}
调用的时候参数必须一 一对应。
可选参数
上面那样传参必须都传,如果存在参数可能不传的情况,要这样写
function fn(name: string, age?: number): string{ // 加个问号表示可选
return `${name}-${age}`
}
注意:可选参数应该放到非可选参数的后面,且后面不能再出现必要参数了。
默认参数
function fn(name: string, age: number | string = 20): string{ // | 为联合类型后面会有记录
return `${name}-${age}`
}
fn('xiaoming')
剩余参数
function fn(...rest: number[]): number{
// 以数组的形式去接收传进来的参数
}
function fn(a: number, ...rest: number[]): number{
// a是正常参数,后面的以数组的形式去接收a以外的参数
}
剩余参数只能作为唯一或者最后一个参数。
还可以结合联合类型去定义剩余参数的子类型:
function sum(...nums: (number | string)[]): number {
// ...
}
合并参数
可以灵活的合并参数:
type Params = {
a: string;
};
function fn(params: Params & { b: string }) {
console.log(params);
}
fn({ a: "4", b: "2" });
this
严格模式下,函数内的this需要我们去手动指定(默认指定为any):
function say(this: Window, name: string) { // 放在第一个参数中指定this
console.log(this.name);
}
// 注意函数使用之前也必须挂在this指定的对象上,因为 TypeScript 无法确定 say 函数被谁调用,所以将 this 的指向默认为 void,就会报错
window.say = say; // this为window
window.say('hi'); // 正常执行
函数重载
通过Java重载的作用了解重载是什么东西:
Java重载:不用为了对不同的参数类型或参数个数,而写多个函数。多个函数用同一个名字,但参数表,即参数的个数或(和)数据类型可以不同,调用的时候,虽然方法名字相同,但根据参数表可以自动调用对应的函数。
TS为了兼容JS,与Java等其他语言的重载有区别,可以自行查看,以下只写TS的:
function fn(res:number): number; // 1
function fn(res:string): string; // 2
function fn(res:any): any{ // 3
if (typeof res === 'number') {
return res
} else {
return res
}
}
// 前面两次定义应该相当于函数的进入通道,最后一个才是函数内容
alert(fn('a')) // 进入2->3
alert(fn(1)) // 进入1->3
alert(fn(true)) // 无法进入通道,直接报错
这样函数表述让入参和出参的关系更加精确化,比如上面的例子如果按普通写法是:
function fn(x: number | string | any): number | string | any {
if (typeof res === 'number') {
return res
} else {
return res
}
}
fn(1) // 结果类型为number | string | any
普通的写法的话,虽然我们自己能通过函数内容,看出输入什么类型的参数出来什么类型的参数,但是ts就统一的认为出参的类型都是number | string | any
。有了重载我们就能提前说明,这个函数入参是什么类型时,具体到输出什么类型的内容。
tips:最后一个重载返回值最好不要any,否则就是去ts的类型检测作用了,可以用联合类型代替,例如:
number | string | -1
。