跳到主要内容

TypeScript 函数定义

在TypeScript中，函数是构建应用程序的基本构建块之一。函数允许你将代码组织成可重用的块，从而提高代码的可读性和可维护性。本文将详细介绍如何在TypeScript中定义函数，并展示一些实际应用场景。

1. 函数声明​

函数声明是最基本的定义函数的方式。它使用 function 关键字，后跟函数名、参数列表和函数体。

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

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

调用函数​

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

2. 函数表达式​

函数表达式是将函数赋值给一个变量。这种方式允许你将函数作为值传递。

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

调用函数​

typescript
console.log(greet("Bob")); // 输出: Hello, Bob!

3. 箭头函数​

箭头函数是ES6引入的一种更简洁的函数定义方式。它使用 => 符号来定义函数。

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

调用函数​

typescript
console.log(greet("Charlie")); // 输出: Hello, Charlie!
提示

箭头函数在处理 this 上下文时与普通函数不同，它不会创建自己的 this 上下文，而是继承自外层作用域。

4. 可选参数和默认参数​

TypeScript允许你定义可选参数和默认参数，这使得函数更加灵活。

可选参数​

可选参数通过在参数名后添加 ? 来定义。

typescript
function greet(name: string, greeting?: string): string {
    if (greeting) {
        return `${greeting}, ${name}!`;
    } else {
        return `Hello, ${name}!`;
    }
}

调用函数​

typescript
console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greet("Bob", "Hi")); // 输出: Hi, Bob!

默认参数​

默认参数通过在参数名后添加 = 和默认值来定义。

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

调用函数​

typescript
console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greet("Bob", "Hi")); // 输出: Hi, Bob!

5. 实际应用场景​

假设你正在开发一个电子商务网站，需要计算订单的总价。你可以使用函数来封装这个逻辑。

typescript
function calculateTotal(price: number, quantity: number, discount: number = 0): number {
    return (price * quantity) * (1 - discount);
}

调用函数​

typescript
console.log(calculateTotal(10, 5)); // 输出: 50
console.log(calculateTotal(10, 5, 0.1)); // 输出: 45

6. 总结​

在TypeScript中，函数可以通过多种方式定义，包括函数声明、函数表达式和箭头函数。你还可以使用可选参数和默认参数来增加函数的灵活性。掌握这些概念将帮助你编写更清晰、更可维护的代码。

7. 附加资源与练习​

  • 练习1: 编写一个函数 multiply，接受两个 number 类型的参数，并返回它们的乘积。
  • 练习2: 编写一个函数 isEven，接受一个 number 类型的参数，并返回一个 boolean 值，表示该数字是否为偶数。
备注

如果你在练习中遇到困难，可以参考TypeScript官方文档或在线教程。