随笔- 567 文章- 0 评论- 0 阅读- 54万

TypeScript 的函数类型

在 TypeScript 中，函数的结构与 JavaScript 中的函数类似，但 TypeScript 通过类型系统提供了更多的类型检查和安全性。TypeScript 允许我们在定义函数时指定参数类型、返回值类型，以及提供默认参数、可选参数等功能。下面是 TypeScript 中函数的常见结构及特性详细介绍。

1. 基本的函数结构

TypeScript 允许你像 JavaScript 一样定义函数，但你可以为函数的参数和返回值提供类型注解。

typescriptCopy Code

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

console.log(greet("Alice"));  // 输出: Hello, Alice

在上面的例子中，name 参数的类型是 string，函数的返回值类型也是 string。

2. 带默认参数的函数

TypeScript 支持为函数的参数提供默认值。如果参数没有传递，则使用默认值。

typescriptCopy Code

function greet(name: string = "Guest"): string {
  return `Hello, ${name}`;
}

console.log(greet());  // 输出: Hello, Guest
console.log(greet("Alice"));  // 输出: Hello, Alice

在这个例子中，name 参数有一个默认值 "Guest"，如果调用时不传递参数，name 的值将是默认的 "Guest"。

3. 可选参数

TypeScript 允许你通过在参数类型后面加上 ? 来定义可选参数。可选参数必须放在必选参数的后面。

typescriptCopy Code

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

console.log(greet("Alice"));  // 输出: Hello, Alice
console.log(greet("Alice", 25));  // 输出: Hello, Alice, you are 25 years old.

在这个例子中，age 是一个可选参数，调用时可以不传递。

4. 函数的返回值类型

在 TypeScript 中，你可以明确地指定函数的返回值类型。如果函数没有返回值，可以使用 void 类型。

typescriptCopy Code

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

function logMessage(message: string): void {
  console.log(message);
}

console.log(add(2, 3));  // 输出: 5
logMessage("Hello, TypeScript!");  // 输出: Hello, TypeScript!

add 函数的返回值类型是 number。
logMessage 函数的返回值类型是 void，表示该函数没有返回任何值。

5. 函数类型声明

你可以通过类型别名或接口来为函数声明类型。这对于定义更复杂的函数类型或回调函数非常有用。

typescriptCopy Code

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

const add: MathFunction = (x, y) => x + y;
const multiply: MathFunction = (x, y) => x * y;

console.log(add(2, 3));  // 输出: 5
console.log(multiply(2, 3));  // 输出: 6

在这个例子中，MathFunction 是一个类型别名，它描述了一个接受两个 number 类型参数并返回一个 number 的函数类型。

6. 剩余参数（Rest Parameters）

TypeScript 允许你使用剩余参数来传递不定数量的参数。剩余参数的语法是使用 ... 语法。

typescriptCopy Code

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

console.log(sum(1, 2, 3));  // 输出: 6
console.log(sum(5, 10, 15, 20));  // 输出: 50

在这个例子中，...numbers 允许函数接收任意数量的 number 类型的参数，并将它们聚合成一个数组。

7. 函数重载

TypeScript 支持函数重载，即同一个函数名称可以有多个不同的参数类型和返回类型。函数重载根据传递的参数数量或类型来选择合适的函数实现。

typescriptCopy Code

function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any): any {
  if (typeof a === "string" && typeof b === "string") {
    return a + b;
  } else if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }
}

console.log(combine("Hello, ", "world!"));  // 输出: Hello, world!
console.log(combine(10, 20));  // 输出: 30

在这个例子中，combine 函数被重载了两次，分别接受 string 类型和 number 类型的参数。TypeScript 根据传入的参数类型自动选择正确的重载。

8. 箭头函数

TypeScript 支持箭头函数，它通常用于简化函数的书写。箭头函数可以自动绑定 this，使其更简洁易用。

typescriptCopy Code

const greet = (name: string): string => `Hello, ${name}`;

console.log(greet("Alice"));  // 输出: Hello, Alice

9. 高阶函数

高阶函数是指接受函数作为参数或返回值的函数。TypeScript 通过函数类型声明来确保类型安全。

typescriptCopy Code

function repeatAction(action: () => void, times: number): void {
  for (let i = 0; i < times; i++) {
    action();
  }
}

repeatAction(() => console.log("Hello, TypeScript!"), 3);
// 输出:
// Hello, TypeScript!
// Hello, TypeScript!
// Hello, TypeScript!

在这个例子中，repeatAction 是一个高阶函数，它接受一个不返回值的函数作为参数，并重复执行该函数多次。

10. 匿名函数

匿名函数是没有名字的函数，它们通常用于回调函数或临时函数。TypeScript 同样支持匿名函数，并且可以为其参数和返回值提供类型注解。

typescriptCopy Code

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map((num: number): number => num * num);

console.log(squaredNumbers);  // 输出: [1, 4, 9, 16, 25]

在这个例子中，map 方法接受一个匿名函数，并且 TypeScript 会检查匿名函数的类型。