TypeScript 中的函数详解

2024-02-23 10:11:37

TypeScript 函数指南：打造灵活、类型化的代码

在 TypeScript 中，函数是程序的基本构建块，它们使我们能够组织和执行特定任务的代码。本指南将深入探讨 TypeScript 函数的方方面面，从声明和类型注释到高级功能，如可变参数、重载和箭头函数。

函数声明

TypeScript 函数的声明很简单，遵循以下语法：

function functionName(parameters): returnType {
  // 函数体
}

functionName 是函数的名称，parameters 是函数接受的参数列表，returnType 是函数返回的值的类型。

类型注释

TypeScript 函数可以通过类型注释添加额外的类型信息。这有助于 TypeScript 在编译时检查函数的类型是否正确。

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

在这个例子中，greet 函数接受一个字符串类型的参数 name，并返回一个字符串类型的返回值。

可选参数

TypeScript 函数可以定义可选参数，必须放在所有必填参数之后。可选参数使用 ? 号标记。

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

在这个例子中，greet 函数接受两个参数：name 是必填的，而 age 是可选的。如果未提供 age，则函数将返回 "Hello, ${name}!"。

剩余参数

TypeScript 函数可以定义剩余参数，必须放在所有其他参数之后。剩余参数使用 ... 号标记。

function sum(...numbers: number[]): number {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

在这个例子中，sum 函数接受一个可变数量的数字参数，并返回这些数字的总和。

函数重载

TypeScript 函数可以重载，这意味着您可以定义多个具有相同名称但参数类型不同的函数。

function greet(name: string): string;
function greet(name: string, age: number): string;

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

在这个例子中，greet 函数有两个重载，一个接受一个字符串参数，另一个接受一个字符串参数和一个数字参数。

函数类型

TypeScript 函数类型是一种类型，它指定了函数的形状，包括函数的参数类型和返回值类型。

type GreetFunction = (name: string) => string;

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

在这个例子中，GreetFunction 是一个函数类型，指定了接受一个字符串参数并返回一个字符串的函数。然后，greet 函数被定义为 GreetFunction 类型。

箭头函数

TypeScript 箭头函数是一种简写函数语法，用于定义匿名函数。箭头函数使用 => 符号。

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

在这个例子中，greet 箭头函数接受一个字符串参数并返回一个字符串。

类的成员函数

TypeScript 类的成员函数是属于类的函数。成员函数可以使用 public、protected 或 private 访问修饰符来修饰。

class Person {
  public name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}