TypeScript 学习笔记 — 函数中的类型（四）

函数的两种声明方式
可选参数
默认参数
剩余参数
函数的重载
this 的类型

对于函数主要关心的是：函数的入参类型 和 函数的返回值类型

函数的两种声明方式

通过 function 关键字来进行声明，不涉及到变量类型的标注

function sum(a: string, b: string): string {

  // 限制函数的参数和返回值类型

  return a + b;

}

sum("a", "b");

通过表达式方式声明，可以给变量重新赋值，如果给变量写好了一个类型，就意味着赋予的值要满足这个类型.

type Sum = (a1: string, b1: string) => string;

let sum: Sum = (a: string, b: string) => {

  return a + b;

};

可选参数

?表示可选参数，可传可不传，必须在其他参数的最后面

let sum = (a: string, b?: string): string => {

  return a + b;

};

sum("a");

默认参数

默认参数表示函数参数的默认值，必须在其他参数的最后面

type Sum = (x: string, y?: string) => string;

let sum: Sum = function (a, b = "123") {

  return a + b;

};

sum("a");

剩余参数

let sum = function (a?: string, ...args: string[]) {

  return args.reduce((memo, current) => memo + current, a);

};

let r = sum("a", "b", "c", "d");

console.log(r);

函数的重载

js 不支持函数的重载， ts 也就不支持，所以 ts 中的函数重载（伪重载，对参数进行区分），

而 js 是通过 arguments 来实现重载，比如$('app').html() 和 $('app').html('hello world') 实现获取和设置功能

function toArray(value: number): number[];

function toArray(value: string): string[];

function toArray(value: string | number): string[] | number[] {

  // 只有一个具体的实现，并不是真正意义上的重载

  if (typeof value === "string") {

    return value.split("");

  } else {

    return value.toString().split("").map(Number);

  }

}

let arr1 = toArray(1);

let arr2 = toArray("2");

this 的类型

在 TS 中存在两个关键字：

typeof：取变量的类型，返回的是类型
keyof：取的是类型的 key 的集合

// this 导致的问题是不方便类型推导，用起来比较麻烦

function getName(this: Person, key: PersonKey) {

  return this[key];

}

const person = { name: "yya", age: 18 };

type Person = typeof person; // type Person = {name: string; age: number;}

type PersonKey = keyof Person; // type PersonKey = "name" | "age"

getName.call(person, "name");

getName.call(person, "a"); // 报错：类型“"a"”的参数不能赋给类型“"name" | "age"”的参数。

巴特西