【TypeScript】函数详解：参数和返回值的类型注解

Peter-Lu

于 2024-09-27 15:44:05 发布

阅读量596

点赞数 16

分类专栏： # TypeScript 文章标签： typescript javascript 前端 ecmascript

本文链接：https://blog.csdn.net/lph159/article/details/142595302

版权

TypeScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

TypeScript 是 JavaScript 的超集，通过静态类型检查来提升代码的可读性和安全性。在 TypeScript 中，函数依旧是数据传递的主要方式。TypeScript 提供了丰富的功能来帮助开发者为函数的参数和返回值添加类型注解，从而提高代码的健壮性和可维护性。本文将深入介绍 TypeScript 中函数的使用，包括参数和返回值的类型注解，以及一些高级用法。

一、函数基础概述

在 JavaScript 中，函数是核心的构造块。通过函数，我们可以复用代码，并将数据在不同部分之间进行传递。而在 TypeScript 中，函数仍然保持了这种核心作用，但 TypeScript 增加了类型系统，使得开发者可以在声明函数时指定参数和返回值的类型。这种功能大大减少了运行时错误，并让代码的意图更加清晰。

1. 参数类型注解

在 TypeScript 中，函数参数可以通过类型注解来限制其类型。例如，假设我们有一个函数 greet，该函数接收一个 string 类型的参数并输出一条问候语。以下是该函数的定义：

function greet(name: string) {
  console.log("Hello, " + name.toUpperCase() + "!!");
}

在这个示例中，我们通过 : string 的方式为参数 name 添加了类型注解，声明该参数必须为字符串类型。这不仅使代码更加明确，也避免了运行时可能出现的错误。例如，假如我们传入一个数字，会在编译阶段收到错误提示：

greet(42);  // 错误：参数 'number' 无法赋值给参数类型 'string'

2. 参数个数检查

即使不为参数指定类型注解，TypeScript 也会自动检查传入的参数数量是否正确。如下代码：

function greet(name: string) {
  console.log("Hello, " + name.toUpperCase() + "!!");
}
greet();  // 错误：缺少参数

如果我们调用 greet 函数而不传递任何参数，TypeScript 将会抛出错误，提示该函数需要一个 string 类型的参数。

3. 可选参数和默认值

在某些情况下，我们可能不需要函数的每个参数都是必需的。为此，TypeScript 提供了可选参数和默认值的功能。可选参数使用 ? 标记，而默认值则可以在参数列表中直接指定：

function greet(name: string, greeting?: string) {
  console.log(greeting ? greeting + ", " + name : "Hello, " + name);
}

在这个示例中，参数 greeting 是可选的。如果调用函数时不提供 greeting，TypeScript 不会抛出错误，函数将使用默认逻辑输出。

对于默认参数值，TypeScript 提供了如下支持：

function greet(name: string, greeting: string = "Hello") {
  console.log(greeting + ", " + name);
}

此时，即便调用函数时没有传入 greeting，该参数也会使用默认值 Hello。

二、返回值类型注解

与参数类型类似，TypeScript 允许我们为函数的返回值添加类型注解。这些类型注解可以帮助开发者确保函数返回的值符合预期。

1. 基本的返回值类型注解

返回值类型注解写在函数参数列表的后面，用冒号分隔。例如，定义一个返回数字的函数：

function getFavoriteNumber(): number {
  return 26;
}

在这个例子中，getFavoriteNumber 函数被注解为返回 number 类型的值。这种注解在某些情况下是显式指定的，也有些时候，TypeScript 可以通过类型推断自动识别返回值类型。

2. 自动类型推断

TypeScript 会根据函数的返回语句自动推断返回值类型，因此通常我们不需要手动添加返回值类型注解：

function getFavoriteNumber() {
  return 26;  // 自动推断为 number 类型
}

不过在某些代码规范严格的项目中，出于文档化或防止无意改变返回值类型的考虑，显式声明返回值类型依然是很常见的做法。

三、异步函数与 Promise 返回值类型

在现代 JavaScript 开发中，异步函数和 Promise 已经成为了非常常见的模式。TypeScript 允许我们为异步函数的返回值进行类型注解：

async function getFavoriteNumber(): Promise<number> {
  return 26;
}

在这个示例中，getFavoriteNumber 是一个异步函数，返回一个 Promise<number>。通过这种方式，TypeScript 确保我们在使用该函数时，会收到一个数字类型的 Promise。

四、匿名函数与上下文类型推断

除了命名函数外，JavaScript 中还有一种常见的模式——匿名函数（Anonymous Functions）。它们通常作为参数传递给其他函数。例如，假设我们有一个数组，并且希望对其中的每个元素进行操作：

const names = ["Alice", "Bob", "Eve"];
names.forEach(function (s) {
  console.log(s.toUpperCase());
});

在这个例子中，匿名函数 function (s) 并没有明确的类型注解。然而，TypeScript 会通过上下文推断出参数 s 的类型为 string，因为 names 数组中的元素类型已经确定为 string。这种根据上下文推断类型的机制称为“上下文类型推断”（Contextual Typing）。

同样的规则也适用于箭头函数：

names.forEach((s) => {
  console.log(s.toUpperCase());
});

五、高阶函数与回调

高阶函数是指那些接收函数作为参数或者返回函数作为结果的函数。它们在 JavaScript 中被广泛应用。TypeScript 中高阶函数的类型注解可以显式指定回调函数的参数类型和返回类型：

function mapStrings(arr: string[], callback: (item: string) => string): string[] {
  return arr.map(callback);
}

const result = mapStrings(["apple", "banana"], (item) => item.toUpperCase());
console.log(result);  // 输出 ["APPLE", "BANANA"]