10 函数与接口 📦之指定函数类型

在上一章中，我们学习了如何定义和调用函数。在本章中，我们将深入探讨如何在 TypeScript 中为函数指定类型，以增强代码的可读性和可维护性。

1. 为什么需要指定函数类型

当我们在 TypeScript 中定义函数时，指定函数的参数和返回值类型可以帮助我们捕获潜在的错误，并提供更好的自动补全和类型提示。这对于大型项目尤为重要，因为它可以减少由于类型不匹配造成的错误。

2. 为参数和返回值指定类型

在 TypeScript 中，我们可以在函数参数列表和返回值后面指定类型。例如：

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

在这个例子中，add 函数接收两个参数 x 和 y，它们的类型都是 number，而函数的返回值类型也是 number。通过这种方式，如果我们传递了错误类型的参数，TypeScript 会在编译时给出提示，帮助我们避免错误。

2.1 案例分析

让我们看一个更复杂的案例，定义一个函数来计算矩形的面积：

function calculateArea(length: number, width: number): number {
    return length * width;
}

const area = calculateArea(5, 10); // 正确
// const errorArea = calculateArea(5, '10'); // 错误：Argument of type 'string' is not assignable to parameter of type 'number'.

在这个例子中，calculateArea 函数要求两个参数都为 number 类型，如果你尝试传入一个 string 类型，TypeScript 会在编译时提示错误。

3. 使用函数类型定义复杂类型

在 TypeScript 中，除了可以为简单函数指定参数和返回值类型外，我们还可以使用函数类型定义对象的结构。这在需要将函数作为参数传递或作为返回值时非常有用。定义函数类型的方法如下：

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

const subtract: MathOperation = (x, y) => {
    return x - y;
};

在这里，我们定义了一个 MathOperation 类型，该类型表示一个接受两个 number 类型参数并返回一个 number 的函数。然后，我们使用这个类型定义了 subtract 函数。

3.1 案例分析

让我们看一下如何将函数类型作为参数传递给另一个函数：

function performOperation(x: number, y: number, operation: MathOperation): number {
    return operation(x, y);
}

const result = performOperation(8, 5, subtract); // 3
console.log(result);

在这个例子中，performOperation 函数接受一个操作符作为参数。我们可以传递任何符合 MathOperation 类型的函数。

4. 可选参数与默认参数

在 TypeScript 中，我们还可以为函数的参数指定为可选参数和添加默认参数。可选参数需要在参数名后加上 ?，而默认参数则可以直接在参数声明中赋值。

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

console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet("Bob", "Hi")); // "Hi, Bob!"

在上面的例子中，greeting 是一个默认参数，如果不传递该参数，greet 函数将使用 "Hello" 作为默认值。

5. 总结与回顾

本节中，我们学习了如何在 TypeScript 中为函数指定类型，包括参数类型和返回值类型的声明。我们还探讨了如何使用函数类型来定义复杂的函数结构，以及如何使用可选参数和默认参数来增强函数的灵活性。

在下一节中，我们将深入讨论接口的作用，以及如何用接口来定义函数类型的更复杂的结构。通过接口，我们可以实现更高的代码重用性和可维护性，使我们的代码更加清晰和易于管理。

请继续关注我们的教程！