【TS基础】个人学习记录3-学习函数、箭头申明、参数、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。