9 函数与接口 📦之函数的定义与调用

在上一章中，我们探讨了 TypeScript 的基本类型和类型推断。在本章里，我们将聚焦于函数的定义与调用。函数是编程中的重要组成部分，TypeScript 为函数提供了类型定义的能力，以确保更好的类型安全和代码可读性。

函数的定义

在 TypeScript 中，函数的定义与 JavaScript 类似，但我们可以为函数的参数和返回值指定类型，从而增强代码的可读性和可维护性。

函数的基本语法

以下是 TypeScript 中定义函数的基本语法：

function functionName(parameter1: type1, parameter2: type2): returnType {
    // function body
}

• functionName 是函数的名称。
• parameter1, parameter2 是函数的参数，其中 type1, type2 是对应的类型。
• returnType 是函数的返回值类型。

###示例：函数的定义

让我们来看一个简单的函数，它接受两个数字并返回它们的和：

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

// 调用函数
const result = add(5, 10);
console.log(result); // 输出 15

在这个示例中，我们定义了一个名为 add 的函数，它接受两个 number 类型的参数，并返回一个 number 类型的结果。

函数的调用

在 TypeScript 中，调用函数的方法与 JavaScript 完全相同。我们只需使用函数名后跟圆括号并传递所需的参数。

示例：函数调用

继续上述的 add 函数，我们可以通过不同的方式调用它：

const sum1 = add(3, 4);
const sum2 = add(10, 20);
console.log(sum1); // 输出 7
console.log(sum2); // 输出 30

在这个示例中，我们多次调用 add 函数并将返回的结果保存在不同的变量中。

可选参数和默认参数

在 TypeScript 中，函数可以有可选参数和默认参数。可选参数用问号 ? 表示，默认参数则是在参数列表中直接赋值。

示例：可选参数和默认参数

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

console.log(greet("Alice")); // 输出 "Hello, Alice"
console.log(greet("Bob", "Hi")); // 输出 "Hi, Bob"
console.log(greet("Charlie", "Hey", 25)); // 输出 "Hey, Charlie. You are 25 years old."

在这个示例中，greeting 是一个默认参数，如果调用时不传递它，则默认为 “Hello”。age 是一个可选参数，可以选择性地提供。

剩余参数

TypeScript 还支持剩余参数，用于处理不确定数量的参数。我们可以使用 ... 符号来表示剩余参数。

示例：剩余参数

function concatenateStrings(...strings: string[]): string {
    return strings.join(", ");
}

console.log(concatenateStrings("a", "b", "c")); // 输出 "a, b, c"
console.log(concatenateStrings("Hello", "World")); // 输出 "Hello, World"

在这个示例中，concatenateStrings 函数可以接收多个字符串参数，并将它们连接成一个字符串。

总结

在本章中，我们探讨了 TypeScript 中函数的定义与调用，包括函数的基本语法、可选参数、默认参数和剩余参数。通过为函数的参数和返回值指定类型，我们能够在编译时捕获潜在的错误，提升代码的质量。

在下一章中，我们将进一步学习如何在 TypeScript 中指定函数类型，这将使我们对函数的使用更加灵活和强大。