【TypeScript】 函数定义

在 TypeScript 中，函数定义是一个核心概念，除了支持 JavaScript 的基本语法外，还引入了许多类型系统的功能，以增强函数的类型安全性。下面将详细介绍 TypeScript 中的函数定义，包括函数声明、表达式、返回值类型、参数类型、可选参数、默认参数、剩余参数、函数重载等内容。

1. 函数声明

在 TypeScript 中，函数声明的基本语法和 JavaScript 类似，但你可以通过类型注解来指定参数和返回值的类型。

基本函数声明

function greet(name: string): string {
  return `Hello, ${name}!`;
}

• name: string：参数 name 是一个 string 类型。
• : string：返回值的类型是 string。

2. 函数表达式

除了函数声明外，你还可以使用函数表达式来定义函数，这种方式常常用于匿名函数或将函数赋值给变量。

基本函数表达式

const add = function(x: number, y: number): number {
  return x + y;
};

在这种情况下，add 是一个函数变量，接受两个 number 类型的参数并返回一个 number 类型的值。

3. 箭头函数（箭头表达式）

TypeScript 同样支持 JavaScript 的箭头函数（箭头表达式）。箭头函数提供了一种简洁的函数定义方式，并且它没有自己的 this，这在处理函数上下文时很有用。

基本箭头函数

const multiply = (x: number, y: number): number => {
  return x * y;
};

4. 参数类型注解

TypeScript 允许你为函数的每个参数指定类型。类型注解放在参数名后面，类型注解用冒号 : 来标明。

带类型的参数

function greet(name: string, age: number): string {
  return `Hello, ${name}. You are ${age} years old.`;
}

5. 返回值类型注解

你可以指定函数的返回值类型。这是 TypeScript 相比 JavaScript 的一大优势，因为它能够在编译时检查函数返回值的类型。

带类型的返回值

function square(x: number): number {
  return x * x;
}

6. 可选参数

TypeScript 允许你为函数的参数指定可选项。可选参数在定义时使用问号（?）标记，并且必须出现在参数列表的最后。

可选参数

function greet(name: string, age?: number): string {
  if (age !== undefined) {
    return `Hello, ${name}. You are ${age} years old.`;
  } else {
    return `Hello, ${name}.`;
  }
}

• age?: number：age 是一个可选参数，可以传递一个 number 类型的值，或者省略不传。
• 如果省略 age，函数会按条件返回不同的结果。

7. 默认参数

默认参数是指如果调用函数时没有传递该参数，函数会使用默认值。默认参数可以与可选参数一起使用，默认参数必须在可选参数前面。

默认参数

function greet(name: string, age: number = 25): string {
  return `Hello, ${name}. You are ${age} years old.`;
}

• age: number = 25：如果没有传递 age 参数，默认值为 25。

8. 剩余参数（Rest Parameters）

TypeScript 支持剩余参数（Rest Parameters），这使得你可以传入任意数量的参数（以数组的形式接收）。剩余参数必须是最后一个参数。

剩余参数

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

• ...numbers: number[]：numbers 是一个包含任意数量数字的数组。
• reduce 用于计算所有数字的和。

9. 函数重载

函数重载是指同一个函数名称可以根据传入不同类型或数量的参数来执行不同的操作。TypeScript 支持函数重载，允许定义多个签名。

函数重载示例

function getLength(input: string): number;
function getLength(input: number[]): number;
function getLength(input: any): number {
  return input.length;
}

• getLength(input: string): number; 和 getLength(input: number[]): number;：这是两个重载签名，根据输入的类型（string 或 number[]）返回一个数字（number）。
• 重载的实现函数 getLength 需要处理所有的重载情况。

10. 具名函数与匿名函数

TypeScript 同样允许你使用具名函数和匿名函数。

具名函数

function add(x: number, y: number): number {
  return x + y;
}

匿名函数

const add = function(x: number, y: number): number {
  return x + y;
};

11. this 的类型

在 TypeScript 中，你还可以为函数中的 this 上下文指定类型。函数的 this 默认是 any，但你可以明确指定它的类型。

this 的类型注解

interface Person {
  name: string;
  greet(this: Person): string;
}

const person: Person = {
  name: "Alice",
  greet(this: Person) {
    return `Hello, my name is ${this.name}`;
  }
};

• greet(this: Person)：为函数中的 this 指定类型为 Person，确保在调用 greet 时，this 是 Person 类型的对象。

12. 函数类型表达式

你可以使用类型别名来定义函数类型。这在高阶函数（例如回调函数）中非常有用。

函数类型表达式

type AddFunction = (x: number, y: number) => number;

const add: AddFunction = (x, y) => {
  return x + y;
};

• AddFunction：定义一个类型，表示接受两个 number 参数并返回 number 的函数。

13. 总结

TypeScript 提供了强大的函数类型支持，不仅支持基本的函数声明，还可以灵活地定义可选参数、默认参数、剩余参数、函数重载等功能。函数的类型注解使得代码更加可读、可维护，也帮助开发者在编译时发现潜在的错误。

常见函数特性总结：

• 函数声明、函数表达式和箭头函数。
• 参数类型和返回值类型。
• 可选参数、默认参数和剩余参数。
• 函数重载。
• this 上下文类型。
• 函数类型别名。

通过使用 TypeScript 的类型系统，你可以确保函数的参数和返回值符合预期，减少运行时错误。