TypeScript 函数详解：从声明到应用

2023-11-17 14:50:15

在 TypeScript 中，函数是一种用来执行特定任务的代码块。函数可以被调用，并可以接收参数和返回结果。TypeScript 提供了多种方式来定义和使用函数，包括函数类型标注、函数声明、函数表达式等。

函数类型标注

函数类型标注用于指定函数的参数类型和返回值类型。它可以帮助编译器进行类型检查，并确保代码的健壮性。

// 定义一个函数类型标注
type MyFunction = (a: number, b: string) => number;

// 使用函数类型标注定义一个函数
const add: MyFunction = (a: number, b: string) => {
  return a + parseInt(b);
};

函数声明

函数声明用于在 TypeScript 中定义一个函数。函数声明必须包含函数名、参数列表和函数体。

// 函数声明
function add(a: number, b: string): number {
  return a + parseInt(b);
}

函数表达式

函数表达式用于在 TypeScript 中定义一个函数。函数表达式是一个匿名函数，它没有函数名，并且可以被赋给一个变量。

// 函数表达式
const add = (a: number, b: string): number => {
  return a + parseInt(b);
};

参数

函数的参数是函数接收的数据。参数可以是任何类型，包括基本类型、数组、对象等。

// 定义一个函数，接收两个参数
function add(a: number, b: string): number {
  return a + parseInt(b);
}

// 调用函数，并传递两个参数
const result = add(1, "2");

默认参数

默认参数允许你为函数的参数指定默认值。如果在调用函数时没有传递参数，则使用默认值。

// 定义一个函数，并为第二个参数指定默认值
function add(a: number, b: string = "0"): number {
  return a + parseInt(b);
}

// 调用函数，只传递一个参数
const result = add(1);

// 调用函数，并传递两个参数
const result2 = add(1, "2");

剩余参数

剩余参数允许你将多个参数传递给函数，而无需显式地指定参数的类型和数量。剩余参数必须是函数的最后一个参数。

// 定义一个函数，并使用剩余参数
function add(...numbers: number[]): number {
  return numbers.reduce((a, b) => a + b, 0);
}

// 调用函数，并传递多个参数
const result = add(1, 2, 3, 4, 5);

返回值

函数可以返回任何类型的值，包括基本类型、数组、对象等。如果函数没有显式地返回任何值，则默认返回 undefined。

// 定义一个函数，并返回一个数字
function add(a: number, b: string): number {
  return a + parseInt(b);
}

// 调用函数，并获取返回值
const result = add(1, "2");

普通函数与箭头函数

TypeScript 中有两种类型的函数：普通函数和箭头函数。

普通函数使用 function 定义，而箭头函数使用箭头符号 => 定义。

// 普通函数
function add(a: number, b: string): number {
  return a + parseInt(b);
}

// 箭头函数
const add = (a: number, b: string): number => {
  return a + parseInt(b);
};