Articles
TypeScript简介
TypeScript中的函数

TypeScript中的函数

本文介绍了TypeScript中的函数。

YouTube Video

TypeScript中的函数

TypeScript中的函数是带有类型注解的JavaScript函数。在TypeScript中，通过明确定义函数输入（参数）和输出（返回值）的类型，可以编写更健壮的代码。以下介绍TypeScript中定义函数的基本方法及其特点。

基本函数定义 

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15
  • “add”函数接受两个类型为“number”的参数，并返回一个类型为“number”的值。
  • 它接受两个参数“x”和“y”，它们的类型都是“number”，并且类型被明确指定。
  • 返回类型也被指定为“: number”。

匿名函数（函数表达式）

在TypeScript中也可以使用匿名函数和函数表达式。类型注解可以使用相同的方式。

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12
  • 你可以把匿名函数赋值给一个变量，并在之后调用它。
1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120
  • 你可以使用命名函数表达式来实现递归调用。

箭头函数

箭头函数也可以使用类型注解。

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

这段代码定义了一个带有类型注解的箭头函数“subtract”，它接受两个数字作为参数，并返回它们的差值。

可选参数和默认参数

参数可以设置为可选或给定默认值。

可选参数

在参数名称后添加?可以使其变为可选。

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

这段代码接受一个可选参数；如果提供了参数，就用名字打招呼，否则返回一个通用的问候语。

默认参数

你还可以为参数设置默认值。

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

如果没有传递参数，此函数使用“Guest”作为默认值，用指定的名字或默认名字进行问候。

函数类型定义

也可以定义函数本身的类型。例如，当将函数作为参数传递时会用到。

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

这段代码定义了一个函数类型“Operation”，它接受两个数字并返回一个数字，然后使用它来创建和运行加法和乘法函数。

没有返回值时（void类型）

对于没有返回值的函数，请指定 void 类型。

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

这段代码定义了一个“void”类型的函数“logMessage”，它接受一个字符串消息并将其打印到控制台，不返回任何值。

回调函数

将一个函数作为参数传递给另一个函数，并在之后执行该函数，这被称为回调函数。它经常用于异步处理和事件处理。

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

在此示例中，将一个向控制台输出值的函数作为回调函数传递。

或者，你可以使用 type 或 interface 来定义回调类型。

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

使用 type 或 interface 定义回调类型可以提高复用性。

函数重载

函数重载允许你定义具有相同名称但参数列表不同的函数。在 TypeScript 中，您可以定义多个具有相同名称的函数，并根据参数的类型和数量执行不同的操作。

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

在 TypeScript 中，函数重载实现方式如下：。

  • 重载签名

    • 定义函数的使用方式（即其签名）。通过多次编写重载签名，可以实现函数重载。

  • 实现签名

    • 实现实际的函数体。这部分只需定义一次，并处理在重载签名中声明的所有情况。

重载规则

以下规则适用于函数重载：。

  • 重载签名定义的顺序

    • 由于从上到下依次评估，建议先定义更具体的类型，再定义更通用的类型。

  • 实现签名的兼容性

    • 实现签名必须与所有重载签名的参数和返回值兼容。

  • 在重载签名中指定具体细节

    • 实现签名往往具有模糊性，因此应在重载签名中指定具体细节。
    • 如果仅定义实现签名，函数的类型推断将不足以确定。

总结

TypeScript中的函数具有以下特点。

  • 类型注解
    • 通过为参数和返回值指定类型，你可以编写更安全的代码。
  • 匿名函数与箭头函数
    • 它们可以像在JavaScript中一样使用，添加类型注解可以提升类型安全。
  • 可选参数与默认参数
    • 你可以根据需要让参数的指定更加灵活。
  • 函数类型定义
    • 定义函数本身的类型以进行类型检查。
  • 函数重载
    • 你可以用相同的函数名支持不同的参数。

通过利用这些特性，您可以在 TypeScript 中编写更清晰且更健壮的代码。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

TypeScript中的内置函数TypeScript 中的闭包