1.函数的类型
image.png
// 1.函数作为参数时, 在参数中如何编写类型
function foo() {}
type FooFnType = () => void;
function bar(fn: FooFnType) {
fn();
}
bar(foo);
// 2.定义常量时, 编写函数的类型
type AddFnType = (num1: number, num2: number) => number;
const add: AddFnType = (a1: number, a2: number) => {
return a1 + a2;
};
2 函数类型的案例
function calc(n1: number, n2: number, fn: (num1: number, num2: number) => number) {
return fn(n1, n2)
}
const result1 = calc(20, 30, function(a1, a2) {
return a1 + a2
})
console.log(result1)
const result2 = calc(20, 30, function(a1, a2) {
return a1 * a2
})
console.log(result2)
3.函数的可选类型
image.png
// 可选类型是必须写在必选类型的后面的
// y -> undefined | number
function foo(x: number, y?: number) {
}
foo(20, 30)
foo(20)
4.默认参数
image.png
// 必传参数 - 有默认值的参数 - 可选参数
function foo(y: number, x: number = 20) {
console.log(x, y)
}
foo(30)
function foo(x:number = 20, y:number) {
console.log(x, y)
}
foo(undefined, 30)
5.剩余参数
从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。
// function sum(num1: number, num2: number) {
// return num1 + num2
// }
function sum(initalNum: number, ...nums: number[]) {
let total = initalNum
for (const num of nums) {
total += num
}
return total
}
console.log(sum(20, 30))
console.log(sum(20, 30, 40))
console.log(sum(20, 30, 40, 50))
6.可推导的this类型
// this是可以被推导出来 info对象(TypeScript推导出来)
//pTypeScript认为函数 eating 有一个对应的this的外部对象 info，所以在使用时，就会把this当做该对象。
const info = {
name: "why",
eating() {
console.log(this.name + " eating");
},
};
info.eating(); //why eating
export {};
7.不确定的this类型
image.png
function eating() {
console.log(this.name + " eating");
}
const info = {
name: "why",
eating: eating,
};
info.eating();
/*
直接报错
test.ts:2:15 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
独立函数推导不出来this
*/
8.指定this的类型
这个时候，通常TypeScript会要求我们明确的指定this的类型：
type ThisType = { name: string };
function eating(this: ThisType) {
console.log(this.name + " eating");
}
const info = {
name: "why",
eating: eating,
};
// 隐式绑定
info.eating();//why eating
export {};
type ThisType = { name: string };
function eating(this: ThisType) {
console.log(this.name + " eating");
}
const info = {
name: "why",
eating: eating,
};
// 隐式绑定
info.eating(); //why eating
//eating();
/* The 'this' context of type 'void' is not assignable to method's 'this' of type 'ThisType'.
直接eating的话是会报错的，因为没有指定this的类型，this似乎一个对象类型，里面有个string类型的name */
//可以通过以下方式
eating.call({ name: "kobe" });
eating.apply({ name: "james" });
/*
kobe eating
james eating */
export {};
9.函数的重载(联合类型)
image.png
function sum(n1: string | number, n2: string | number): string | number {
return n1 + n2;
}
/*
这么写n1 + n2会报错
因为n1的类型是string | number
n2的类型是string | number
他们两个类型之间是不能进行相加的
*/
如何解决
/**
* 通过联合类型有两个缺点:
* 1.进行很多的逻辑判断(类型缩小)
* 2.返回值的类型依然是不能确定(any类型)
*/
function add(a1: number | string, a2: number | string) {
if (typeof a1 === "number" && typeof a2 === "number") {
return a1 + a2
} else if (typeof a1 === "string" && typeof a2 === "string") {
return a1 + a2
}
// return a1 + a2;
}
add(10, 20)
10. 函数的重载（函数重载）
比如我们对sum函数进行重构：
在我们调用sum的时候，它会根据我们传入的参数类型来决定执行函数体时，到底执行哪一个函数的重载签名；
// 函数的重载: 函数的名称相同, 但是参数不同的几个函数, 就是函数的重载
function add(num1: number, num2: number): number; // 没函数体
function add(num1: string, num2: string): string;
function add(num1: any, num2: any): any {
if (typeof num1 === "string" && typeof num2 === "string") {
return num1.length + num2.length;
}
return num1 + num2;
}
const result = add(20, 30); //从上往下一次匹配，于是就匹配到第一个add，但是第一个add没有函数体，于是就执行第三个add的函数体，，也就是实现函数
const result2 = add("abc", "cba");
console.log(result);
console.log(result2);
// 在函数的重载中, 实现函数是不能直接被调用的，只有在匹配之后，实现函数才能被调用
// add({name: "why"}, {age: 18})
export {};
11.联合类型和函数重载对比
image.png
就是如果能通过联合类型方便简单的实现的情况下，尽量使用我们的联合类型，因为更简单，因为无论string和数组，都有length属性，所以联合类型可以实现，实现起来很简洁，函数的重载反而有些麻烦。
如果通过联合类型发现实现起来非常麻烦的情况下，我才会使用函数重载。
// 实现方式一: 联合类型
function getLength(args: string | any[]) {
return args.length
}
console.log(getLength("abc"))
console.log(getLength([123, 321, 123]))
// 实现方式二: 函数的重载
// function getLength(args: string): number;
// function getLength(args: any[]): number;
// function getLength(args: any): number {
// return args.length
// }
// console.log(getLength("abc"))
// console.log(getLength([123, 321, 123]))