Hello Typescript（05）-- 函数Typescript中对函数的有四种定义方式。参数还可以可选或不确定个

定义函数

// function
function Add(a: number, b: number) {
  return a + b;
}

// 用变量定义函数类型
let Add = (a: number, b: number) => number;

// 接口
interface Add {
  (a: number, b: number): number;
}

// 类型别名
type Add = (a: number, b: number) => number;

链接：接口 vs 类型别名

可选参数和默认参数

默认

TypeScript 里的每个函数参数都是必须的。传递给一个函数的参数个数必须与函数期望的参数个数一致。
可选

在参数名旁使用 ?实现可选参数的功能。可选参数必须跟在必须参数后面。

/*
 ** 可选参数 & 默认参数
 */
function Add05(x: number, y = 1, z?: number) {
  return z ? x + y + z : x + y;
}
Add05(1); // 2
Add05(1, 2, 3); // 6

剩余参数：不确定参数个数

function Add06(...resetOfNumber: number[]) {
  return resetOfNumber.reduce((pre, cur) => pre + cur);
}
console.log(Add06(1, 2, 3, 4, 5, 6));

重载

使用相同名称和不同参数数量或类型创建多个方法的一种能力。

背景

要求一个函数接受不同类型参数时，有不同的操作

想到了用联合类型？

type Combinable = string | number;

function add(a: Combinable, b: Combinable) {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  }
  return a + b;
}

const result = add("Semlinker", " Kakuqo");
result.split(" ");

// error! Property 'split' does not exist on type 'Combinable'.
// error! Property 'split' does not exist on type 'number'.

很明显 Combinable 和 number 类型的对象上并不存在 split 属性。所以需要重载登场！

解决
为同一个函数提供多个函数类型定义，最终在类型宽泛的版本中实现，这就是函数重载。编译器会根据 类型定义列表 去处理函数的调用。

/*
 **  重载
 */
function add07(...rest: number[]): number;
function add07(...rest: string[]): string;
function add07(...rest: any): any {
  let first = rest[0];
  if (typeof first === "string") {
    return rest.join("");
  } else if (typeof first === "number") {
    return rest.reduce((pre: number, cur: number) => pre + cur);
  }
}

console.log(add07(1, 2, 3, 4));
console.log(add07("1", "2", "3", "4"));

Hello Typescript（05）-- 函数

定义函数

可选参数和默认参数

剩余参数：不确定参数个数

重载

TypeScript 基础系列