在 TypeScript 中，函数是代码的基本构造块之一。TypeScript 在 JavaScript 函数的基础上添加了类型注解，提供了更好的代码可读性和安全性。本文将介绍 TypeScript 函数的定义、参数类型、可选参数、默认参数、剩余参数、箭头函数、函数重载等。

目录

  1. 函数的基本语法
  2. 函数的返回值类型
  3. 可选参数
  4. 默认参数
  5. 剩余参数（Rest 参数）
  6. 箭头函数
  7. 函数类型
  8. 函数重载
  9. 参考资料

1. 函数的基本语法

在 TypeScript 中，可以使用 function 关键字定义函数，并为参数和返回值指定类型。

语法：

1
2
3
function 函数名(参数: 类型, 参数: 类型): 返回值类型 {
  // 函数体
}

示例：

1
2
3
4
5
function add(x: number, y: number): number {
  return x + y;
}
 
console.log(add(5, 10)); // 输出: 15

2. 函数的返回值类型

TypeScript 允许为函数指定返回值类型。如果函数没有返回值，可以使用 void 作为返回类型。

返回值类型：

1
2
3
4
5
function greet(name: string): string {
  return "Hello, " + name;
}
 
console.log(greet("Alice")); // 输出: Hello, Alice

void 返回值：

1
2
3
4
5
function logMessage(message: string): void {
  console.log("日志：" + message);
}
 
logMessage("服务器启动"); // 输出: 日志：服务器启动

3. 可选参数

在 TypeScript 中，可以使用 ? 标记可选参数，即使不传递该参数，函数仍然可以正常执行。

示例：

1
2
3
4
5
6
7
8
9
10
function greet(name: string, age?: number): string {
  if (age) {
    return `你好, ${name}，你 ${age} 岁了`;
  } else {
    return `你好, ${name}`;
  }
}
 
console.log(greet("小明"));      // 你好, 小明
console.log(greet("小红", 25)); // 你好, 小红，你 25 岁了

4. 默认参数

如果某个参数没有提供默认值，TypeScript 会报错。可以给参数赋默认值，以在没有传参时使用默认值。

示例：

1
2
3
4
5
6
function greet(name: string, age: number = 18): string {
  return `你好, ${name}，你的年龄是 ${age}`;
}
 
console.log(greet("小明"));      // 你好, 小明，你的年龄是 18
console.log(greet("小红", 25)); // 你好, 小红，你的年龄是 25

5. 剩余参数（Rest 参数）

使用 ... 语法可以将多个参数收集到一个数组中。

示例：

1
2
3
4
5
function sum(...numbers: number[]): number {
  return numbers.reduce((acc, num) => acc + num, 0);
}
 
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

6. 箭头函数

箭头函数（=>）是 ES6 的特性，在 TypeScript 中同样适用。

语法：

1
2
3
const 函数名 = (参数: 类型): 返回值类型 => {
  // 函数体
};

示例：

1
2
3
const multiply = (x: number, y: number): number => x * y;
 
console.log(multiply(3, 4)); // 输出: 12

7. 函数类型

可以使用 TypeScript 的函数类型定义变量，使其只能存储符合特定签名的函数。

示例：

1
2
3
4
5
6
7
let addFn: (x: number, y: number) => number;
 
addFn = function (x, y) {
  return x + y;
};
 
console.log(addFn(10, 20)); // 输出: 30

8. 函数重载

函数重载允许一个函数根据不同的参数个数或类型，执行不同的逻辑。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
function sayHello(person: string): string;
function sayHello(person: string, age: number): string;
 
function sayHello(person: string, age?: number): string {
  if (age !== undefined) {
    return `你好, ${person}，你 ${age} 岁了`;
  } else {
    return `你好, ${person}`;
  }
}
 
console.log(sayHello("小明"));     // 你好, 小明
console.log(sayHello("小红", 25)); // 你好, 小红，你 25 岁了

9. 参考资料

📌 出站链接：

🔗 站内链接：

TypeScript 提供了强大的函数特性，如可选参数、默认参数、箭头函数和函数重载，合理使用这些特性可以让代码更安全、可读性更高。