在 TypeScript 中，函数是构成应用程序的重要部分。与 JavaScript 相比，TypeScript 为函数添加了类型系统，让我们可以精确地定义函数的参数类型和返回值类型。本文将详细介绍 TypeScript 中函数类型的各种用法，包括参数类型注解、返回值类型、函数类型表达式、可选参数、默认参数、剩余参数、this 类型以及函数重载等内容。

一、基本介绍

1，什么是函数类型

2，TypeScript 函数类型的主要特点

二、函数参数和返回值类型

1，参数的类型注解

// 为参数加上类型注解
function sum(num1: number, num2: number) {
  return num1 + num2;
}

// 正确调用
sum(123, 321);  // 返回 444

// 错误示例：参数数量不足
sum(123); 
// 错误信息：Expected 2 arguments, but got 1.

// 错误示例：参数类型不匹配
sum('123', '321');
// 错误信息：Argument of type 'string' is not assignable to parameter of type 'number'.

2，返回值的类型注解

// 为返回值加上类型注解
function sum(num1: number, num2: number): number {
  return num1 + num2;
}

const result = sum(10, 20);  // result 类型为 number

3，匿名函数的参数类型

const names = ["abc", "cba", "nba"];

// item 的类型会自动推断为 string
names.forEach(item => {
  console.log(item.toUpperCase());  // 可以正常调用字符串方法
});

三、函数类型表达式

1，定义函数类型

// 方式一：不编写函数类型
const add = (a1: number, a2: number) => {
  return a1 + a2;
};

// 方式二：为函数编写函数类型
const add2: (num1: number, num2: number) => number = (a1: number, a2: number) => {
  return a1 + a2;
};

2，使用类型别名优化

// 使用类型别名定义函数类型
type AddFnType = (num1: number, num2: number) => number;

// 使用类型别名
const add: AddFnType = (a1: number, a2: number) => {
  return a1 + a2;
};

console.log(add(10, 20));  // 输出: 30

// 定义函数类型别名
type FooFnType = () => void;

// 函数作为参数时使用类型别名
function bar(fn: FooFnType) {
  fn();
}

// 调用示例
bar(() => {
  console.log('函数被调用了');
});

四、函数参数的特殊形式

1，可选参数

// 参数 y 是可选参数
function foo(x: number, y?: number) {
  console.log(x, y);
}

foo(20, 30);   // 输出: 20 30
foo(20);       // 输出: 20 undefined

2，默认参数

// 参数 y 设默认值为 20
function foo(x: number, y: number = 20) {
  console.log(x, y);
}

foo(30);         // 输出: 30 20（使用默认值）
foo(30, 50);     // 输出: 30 50（使用传入的值）
foo(30, undefined);  // 输出: 30 20（传入 undefined 使用默认值）

3，剩余参数

// ...nums 为剩余参数
function sum(initialNum: number, ...nums: number[]): number {
  let total: number = initialNum;
  
  for (const num of nums) {
    total += num;
  }
  
  return total;
}

console.log(sum(20, 30));        // 输出: 50
console.log(sum(20, 30, 40));    // 输出: 90
console.log(sum(20, 30, 40, 50)); // 输出: 140

五、this 的类型

1，this 的默认推导

// this 可以被 TypeScript 推导为 info 对象
const info = {
  name: "hangge",
  eating() {
    console.log(this.name + " eating");
  }
};

info.eating();  // 输出: hangge eating

2，显式指定 this 类型

function eating(message: string) {
  // this 报错：'this' implicitly has type 'any' because 
  // it does not have a type annotation.
  console.log(this.name + " eating", message);
}

const info = {
  name: "hangge",
  eating: eating  // 赋值一个 eating 函数
};

// 隐式绑定 this
info.eating("哈哈哈");

// 使用 call 函数显式绑定 this
eating.call({ name: "kobe" }, "呵呵呵");

// 定义 this 的类型
type ThisType = { name: string };

// 为 this 添加类型注解
function eating(this: ThisType, message: string) {
  console.log(this.name + " eating", message);
}

const info = {
  name: "hangge",
  eating: eating
};

// 正常调用
info.eating("哈哈哈");  // 输出: hangge eating 哈哈哈

六、函数重载

1，什么是函数重载

// JavaScript 中的灵活函数
function add(a1, a2) {
  return a1 + a2;
}

// 可以传入各种类型
add(10, 20);           // 数字相加
add('Hello', 'World'); // 字符串拼接

2，使用联合类型实现

// 使用联合类型实现函数重载
function add(a1: number | string, a2: number | string) {
  if (typeof a1 === 'number' && typeof a2 === 'number') {
    // 类型缩小：此时 a1 和 a2 都是 number
    return a1 + a2;
  } else if (typeof a1 === 'string' && typeof a2 === 'string') {
    // 类型缩小：此时 a1 和 a2 都是 string
    return a1 + a2;
  }
}

// 调用 add 函数
console.log(add(10, 20));        // 输出: 30
console.log(add('coder', 'hangge')); // 输出: coderhangge

3，使用重载签名实现

// 1. 函数重载签名
function sum(a1: number, a2: number): number;
function sum(a1: string, a2: string): string;

// 2. 通用函数体
function sum(a1: any, a2: any): any {
  return a1 + a2;
}

// 3. 调用 sum 函数，可以根据参数类型自动匹配对应的签名
console.log(sum(20, 30));        // 输出: 50，返回类型为 number
console.log(sum('coder', 'hangge')); // 输出: coderhangge，返回类型为 string