如何在 TypeScript 中使用函数-技术圈

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

英文 | https://www.digitalocean.com/community/tutorials/how-to-use-functions-in-typescript

翻译 | 杨小爱

介绍

创建和使用函数是任何编程语言的基本内容，TypeScript 也不例外。TypeScript 完全支持现有的 JavaScript 函数语法，同时，还添加了类型信息和函数重载作为新特性。除了为函数提供额外的文档外，类型信息还可以减少代码中出现错误的机会，因为将无效数据类型传递给类型安全函数的风险较低。

在本教程中，我们将从使用类型信息创建最基本的函数开始，然后，转到更复杂的场景，例如，使用剩余参数和函数重载。我们将尝试不同的代码示例，我们可以在自己的 TypeScript 环境或 TypeScript Playground（一个允许我们直接在浏览器中编写 TypeScript 的在线环境）中遵循这些示例。

准备工作

要完成本教程内容，我们需要做如下准备工作：

一个环境，我们可以在其中执行 TypeScript 程序以跟随示例。要在本地计算机上进行设置，我们将需要以下内容：

为了运行处理 TypeScript 相关包的开发环境，同时，安装了 Node 和 npm（或 yarn）。本教程使用 Node.js 版本 14.3.0 和 npm 版本 6.14.5 进行了测试。要在 macOS 或 Ubuntu 18.04 上安装，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。如果使用的是适用于 Linux 的 Windows 子系统 (WSL)，这也适用。

此外，我们需要在机器上安装 TypeScript 编译器 (tsc)。为此，请参阅官方 TypeScript 网站。

如果不想在本地机器上创建 TypeScript 环境，可以使用官方的 TypeScript Playground 来跟随。

将需要足够的 JavaScript 知识，尤其是 ES6+ 语法，例如解构、rest 运算符和导入/导出。如果需要有关这些主题的更多知识，建议阅读我们的JavaScript 系列教程。

本教程将参考支持 TypeScript 并显示内联错误的文本编辑器的各个方面。这不是使用 TypeScript 所必需的，但确实可以更多地利用 TypeScript 功能。为了获得这些好处，我们可以使用像 Visual Studio Code 这样的文本编辑器，它完全支持开箱即用的 TypeScript。我们也可以在 TypeScript Playground 中尝试这些好处。

本教程中显示的所有示例都是使用 TypeScript 4.2.2 版创建的。

创建类型化函数

在本节中，我们将在 TypeScript 中创建函数，然后向它们添加类型信息。

在 JavaScript 中，可以通过多种方式声明函数。最流行的一种是使用 function 关键字，如下所示：

function sum(a, b) {  return a + b;}

在本例中，sum 是函数的名称，(a, b) 是参数，{return a + b;} 是函数体。

在 TypeScript 中创建函数的语法是相同的，除了一个主要的补充：我们可以让编译器知道每个参数或参数应该具有什么类型。以下代码块显示了一般语法，突出显示了类型声明：

function functionName(param1: Param1Type, param2: Param2Type): ReturnType {  // ... body of the function}

使用此语法，我们可以将类型添加到前面显示的 sum 函数的参数：

function sum(a: number, b: number) {  return a + b;}

这确保 a 和 b 是数值。

我们还可以添加返回值的类型：

function sum(a: number, b: number): number {  return a + b;}

现在 TypeScript 将期望 sum 函数返回一个数字值。如果我们使用一些参数调用函数并将结果值存储在名为 result 的变量中：

const result = sum(1, 2);

结果变量将具有类型编号。如果我们正在使用 TypeScript 游乐场或使用完全支持 TypeScript 的文本编辑器，将光标悬停在 result 上将显示 const result: number，表明 TypeScript 从函数声明中隐含了它的类型。

如果我们调用函数的值的类型与函数预期的类型不同，TypeScript 编译器 (tsc) 会给我们错误 2345。对 sum 函数执行以下调用：

sum('shark', 'whale');

这将给出以下内容：

OutputArgument of type 'string' is not assignable to parameter of type 'number'. (2345)

我们可以在函数中使用任何类型，而不仅仅是基本类型。例如，假设我们有一个看起来像这样的 User 类型：

type User = {  firstName: string;  lastName: string;};

我们可以创建一个返回用户全名的函数，如下所示：

function getUserFullName(user: User): string {  return `${user.firstName} ${user.lastName}`;}

大多数时候 TypeScript 足够聪明，可以推断出函数的返回类型，因此，在这种情况下，我们可以从函数声明中删除返回类型：

function getUserFullName(user: User) {  return `${user.firstName} ${user.lastName}`;}

请注意，我们删除了 : string 部分，它是函数的返回类型。当我们在函数体中返回字符串时，TypeScript 正确地假定我们的函数具有字符串返回类型。

要现在调用我们的函数，我们必须传递一个与 User 类型具有相同形状的对象：

type User = {  firstName: string;  lastName: string;};
function getUserFullName(user: User) {  return `${user.firstName} ${user.lastName}`;}
const user: User = {  firstName: "Jon",  lastName: "Doe"};
const userFullName = getUserFullName(user);

此代码将成功通过 TypeScript 类型检查器。如果我们将鼠标悬停在编辑器中的 userFullName 常量上，编辑器会将其类型识别为字符串。

TypeScript 中的可选函数参数

创建函数时并不总是需要所有参数。在本节中，我们将学习如何在 TypeScript 中将函数参数标记为可选。

要将函数参数转换为可选参数，请添加 ? 参数名称后面的修饰符。给定一个类型为 T 的函数参数 param1，我们可以通过添加 ? 使 param1 成为可选参数，如下所示：

param1?: T

例如，为我们的 getUserFullName 函数添加一个可选的前缀参数，它是一个可选字符串，可以作为前缀添加到用户的全名：

type User = {  firstName: string;  lastName: string;};
function getUserFullName(user: User, prefix?: string) {  return `${prefix ?? ''}${user.firstName} ${user.lastName}`;}

在此代码块的第一个突出显示部分中，我们正在向函数添加一个可选的前缀参数，在第二个突出显示部分中，我们将使用它作为用户全名的前缀。为此，我们正在使用无效合并运算符 ??。这样，我们将仅使用已定义的前缀值；否则，该函数将使用空字符串。

现在，我们可以使用或不使用前缀参数调用我们的函数，如下所示：

type User = {  firstName: string;  lastName: string;};
function getUserFullName(user: User, prefix?: string) {  return `${prefix ?? ''} ${user.firstName} ${user.lastName}`;}
const user: User = {  firstName: "Jon",  lastName: "Doe"};
const userFullName = getUserFullName(user);const mrUserFullName = getUserFullName(user, 'Mr. ');

在这种情况下，userFullName 的值为 Jon Doe，而 mrUserFullName 的值为 Mr. Jon Doe。

请注意，我们不能在必需参数之前添加可选参数；它必须在系列的最后列出，就像 (user: User, prefix?: string) 一样。首先，列出它会使 TypeScript Compiler 返回错误 1016：

OutputA required parameter cannot follow an optional parameter. (1016)

键入的箭头函数表达式

到目前为止，本教程已经展示了如何在 TypeScript 中键入使用 function 关键字定义的普通函数。但在 JavaScript 中，我们可以通过多种方式定义函数，例如使用箭头函数。在本节中，我们将向 TypeScript 中的箭头函数添加类型。

向箭头函数添加类型的语法与向普通函数添加类型几乎相同。为了说明这一点，请将 getUserFullName 函数更改为箭头函数表达式：

const getUserFullName = (user: User, prefix?: string) => `${prefix ?? ''}${user.firstName} ${user.lastName}`;

如果我们想明确说明函数的返回类型，可以在 () 之后添加它，如以下代码块中突出显示的代码所示：

const getUserFullName = (user: User, prefix?: string): string => `${prefix ?? ''}${user.firstName} ${user.lastName}`;

现在，我们可以像以前一样使用你的函数了：

type User = {  firstName: string;  lastName: string;};
const getUserFullName = (user: User, prefix?: string) => `${prefix ?? ''}${user.firstName} ${user.lastName}`;
const user: User = {  firstName: "Jon",  lastName: "Doe"};
const userFullName = getUserFullName(user);

这将毫无错误地通过 TypeScript 类型检查器。

注意：请记住，对 JavaScript 中的函数有效的所有内容也对 TypeScript 中的函数有效。

函数类型

在前面的内容中，我们向 TypeScript 中的函数的参数和返回值添加了类型。在本节中，我们将学习如何创建函数类型，它们是表示特定函数签名的类型。在将函数传递给其他函数时，创建与特定函数匹配的类型特别有用，例如，具有本身就是函数的参数。这是创建接受回调的函数时的常见模式。

创建函数类型的语法类似于创建箭头函数，但有两点不同：

我们删除了函数体。
我们使函数声明返回返回类型本身。

以下是创建与我们一直使用的 getUserFullName 函数匹配的类型的方法：

type User = {  firstName: string;  lastName: string;};
type PrintUserNameFunction = (user: User, prefix?: string) => string;

在此示例中，我们使用 type 关键字声明了一个新类型，然后，为括号中的两个参数提供了类型，并为箭头后面的返回值提供了类型。

举一个更具体的例子，假设我们正在创建一个名为 onEvent 的事件侦听器函数，它接收事件名称作为第一个参数，第二个参数接收事件回调。事件回调本身将接收具有以下类型的对象作为第一个参数：

type EventContext = {  value: string;};

然后，我们可以像这样编写 onEvent 函数：

type EventContext = {  value: string;};
function onEvent(eventName: string, eventCallback: (target: EventContext) => void) {  // ... implementation}

注意 eventCallback 参数的类型是一个函数类型：

eventCallback: (target: EventTarget) => void

这意味着我们的 onEvent 函数需要在 eventCallback 参数中传递另一个函数。此函数应接受 EventTarget 类型的单个参数。我们的 onEvent 函数会忽略此函数的返回类型，因此，我们使用 void 作为类型。

使用类型化异步函数

在使用 JavaScript 时，使用异步函数是比较常见的。TypeScript 有一种特定的方法来处理这个问题。在本节中，我们将在 TypeScript 中创建异步函数。

创建异步函数的语法与用于 JavaScript 的语法相同，但添加了允许类型：

async function asyncFunction(param1: number) {  // ... function implementation ...}

向普通函数添加类型和向异步函数添加类型之间有一个主要区别：在异步函数中，返回类型必须始终是 Promise 泛型。Promise 泛型表示由异步函数返回的 Promise 对象，其中 T 是 promise 解析为的值的类型。

假设我们有一个用户类型：

type User = {  id: number;  firstName: string;};

还想象一下，我们在数据存储中有一些用户对象。这些数据可以存储在任何地方，例如文件、数据库或 API 请求后面。为简单起见，在此示例中，我们将使用数组：

type User = {  id: number;  firstName: string;};
const users: User[] = [  { id: 1, firstName: "Jane" },  { id: 2, firstName: "Jon" }];

如果我们想创建一个类型安全的函数，以异步方式按 ID 检索用户，我们可以这样做：

async function getUserById(userId: number): Promise {  const foundUser = users.find(user => user.id === userId);
  if (!foundUser) {    return null;  }
  return foundUser;}

在此函数中，我们首先将函数声明为异步：

async function getUserById(userId: number): Promise {

然后，我们指定它接受作为第一个参数的用户 ID，它必须是一个数字：

async function getUserById(userId: number): Promise {

getUserById 的返回类型是一个 Promise，它解析为 User 或 null。我们正在使用联合类型 User | null 作为 Promise 泛型的类型参数。

用户 | null 是 Promise 中的 T：

async function getUserById(userId: number): Promise {

使用 await 调用我们的函数并将结果存储在名为 user 的变量中：

type User = {  id: number;  firstName: string;};
const users: User[] = [  { id: 1, firstName: "Jane" },  { id: 2, firstName: "Jon" }];
async function getUserById(userId: number): Promise {  const foundUser = users.find(user => user.id === userId);
  if (!foundUser) {    return null;  }
  return foundUser;}
async function runProgram() {  const user = await getUserById(1);}

注意：我们正在使用一个名为 runProgram 的包装函数，因为，我们不能在文件的顶层使用 await。这样做会导致 TypeScript 编译器发出错误 1375：

输出'await' 表达式仅在文件是模块时才允许在文件的顶层使用，但该文件没有导入或导出。考虑添加一个空的“export {}”以使该文件成为一个模块。(1375)

如果我们在编辑器或 TypeScript Playground 中将鼠标悬停在 user 上，我们会发现 user 的类型为 User | null，这正是我们的 getUserById 函数返回的承诺解析为的类型。

如果删除 await 并直接调用该函数，则返回 Promise 对象：

async function runProgram() {  const userPromise = getUserById(1);}

如果，我们将鼠标悬停在 userPromise 上，我们会发现它的类型是 Promise null>。

大多数时候，TypeScript 可以推断异步函数的返回类型，就像它对非异步函数所做的那样。

因此，您可以省略 getUserById 函数的返回类型，因为它仍然被正确推断为具有类型 Promise null>：

async function getUserById(userId: number) {  const foundUser = users.find(user => user.id === userId);
  if (!foundUser) {    return null;  }
  return foundUser;}

为 Rest 参数添加类型

剩余参数是 JavaScript 中的一项功能，它允许函数以单个数组的形式接收许多参数。在本节中，我们将在 TypeScript 中使用剩余参数。

通过使用 rest 参数后跟结果数组的类型，完全可以以类型安全的方式使用 rest 参数。以下面的代码为例，其中有一个名为 sum 的函数，它接受可变数量的数字并返回它们的总和：

function sum(...args: number[]) {  return args.reduce((accumulator, currentValue) => {    return accumulator + currentValue;  }, 0);}

该函数使用 .reduce Array 方法迭代数组并将元素相加。请注意此处突出显示的其余参数 args。类型被设置为一个数字数组：number[]。

调用我们的函数正常工作：

function sum(...args: number[]) {  return args.reduce((accumulator, currentValue) => {    return accumulator + currentValue;  }, 0);}
const sumResult = sum(2, 4, 6, 8);

如果我们使用数字以外的任何内容调用我们的函数，例如：

const sumResult = sum(2, "b", 6, 8);

TypeScript 编译器将发出错误 2345：

OutputArgument of type 'string' is not assignable to parameter of type 'number'. (2345)

使用函数重载

程序员有时需要一个函数来接受不同的参数，具体取决于函数的调用方式。在 JavaScript 中，这通常是通过有一个参数来完成的，该参数可以采用不同类型的值，如字符串或数字。将多个实现设置为相同的函数名称称为函数重载。

使用 TypeScript，我们可以创建函数重载，明确描述它们处理的不同情况，通过分别记录重载函数的每个实现来改善开发人员体验。

本节将介绍如何在 TypeScript 中使用函数重载。

假设我们有一个用户类型：

type User = {  id: number;  email: string;  fullName: string;  age: number;};

并且我们想创建一个可以使用以下任何信息查找用户的函数：

ID
电子邮件
年龄和全名

我们可以像这样创建这样的函数：

function getUser(idOrEmailOrAge: number | string, fullName?: string): User | undefined {  // ... code}

该函数使用 | 运算符为 idOrEmailOrAge 和返回值组成类型的联合。

接下来，为我们希望使用函数的每种方式添加函数重载，如以下突出显示的代码所示：

type User = {  id: number;  email: string;  fullName: string;  age: number;};
function getUser(id: number): User | undefined;function getUser(email: string): User | undefined;function getUser(age: number, fullName: string): User | undefined;
function getUser(idOrEmailOrAge: number | string, fullName?: string): User | undefined {  // ... code}

此函数具有三个重载，每个重载一个用于检索用户。创建函数重载时，在函数实现本身之前添加函数重载。函数重载没有主体；他们只有参数列表和返回类型。

接下来，实现函数本身，它应该有一个与所有函数重载兼容的参数列表。在前面的示例中，我们的第一个参数可以是数字或字符串，因为它可以是 id、电子邮件或年龄：

function getUser(id: number): User | undefined;function getUser(email: string): User | undefined;function getUser(age: number, fullName: string): User | undefined;
function getUser(idOrEmailOrAge: number | string, fullName?: string): User | undefined {  // ... code}

因此，我们在函数实现中将 idOrEmailorAge 参数的类型设置为 number | string。这样，它就与 getUser 函数的所有重载兼容。

我们还为函数添加了一个可选参数，用于当用户传递全名时：

function getUser(id: number): User | undefined;function getUser(email: string): User | undefined;function getUser(age: number, fullName: string): User | undefined;
function getUser(idOrEmailOrAge: number | string, fullName?: string): User | undefined {  // ... code}

实现的功能可能如下所示，其中，我们使用用户数组作为用户的数据存储：

type User = {  id: number;  email: string;  fullName: string;  age: number;};
const users: User[] = [  { id: 1, email: "jane_doe@example.com", fullName: "Jane Doe" , age: 35 },  { id: 2, email: "jon_do@example.com", fullName: "Jon Doe", age: 35 }];
function getUser(id: number): User | undefined;function getUser(email: string): User | undefined;function getUser(age: number, fullName: string): User | undefined;
function getUser(idOrEmailOrAge: number | string, fullName?: string): User | undefined {  if (typeof idOrEmailOrAge === "string") {    return users.find(user => user.email === idOrEmailOrAge);  }
  if (typeof fullName === "string") {    return users.find(user => user.age === idOrEmailOrAge && user.fullName === fullName);  } else {    return users.find(user => user.id === idOrEmailOrAge);  }}
const userById = getUser(1);const userByEmail = getUser("jane_doe@example.com");const userByAgeAndFullName = getUser(35, "Jon Doe");

在此代码中，如果 idOrEmailOrAge 是一个字符串，那么，我们可以使用电子邮件键搜索用户。以下条件假设 idOrEmailOrAge 是一个数字，因此，它是 id 或年龄，具体取决于是否定义了 fullName。

函数重载的一个有趣的方面是，在大多数编辑器中，包括 VS Code 和 TypeScript Playground，只要我们键入函数名称并打开第一个括号来调用函数，就会出现一个弹出窗口，其中包含所有可用的重载，如下图所示：

如果我们为每个函数重载添加注释，该注释也将作为文档来源出现在弹出窗口中。例如，将以下突出显示的注释添加到示例重载中：

.../** * Get a user by their ID. */function getUser(id: number): User | undefined;/** * Get a user by their email. */function getUser(email: string): User | undefined;/** * Get a user by their age and full name. */function getUser(age: number, fullName: string): User | undefined;...

现在，当我们将鼠标悬停在这些函数上时，将为每个重载显示注释，如下面的动画所示：

用户定义的类型保护

本教程将检查 TypeScript 中函数的最后一个特性是用户定义的类型保护，它们是允许 TypeScript 更好地推断某些值的类型的特殊函数。这些守卫在条件代码块中强制执行某些类型，其中值的类型可能会根据情况而有所不同。这些在使用 Array.prototype.filter 函数返回过滤的数据数组时特别有用。

有条件地向数组添加值时的一项常见任务是检查某些条件，然后，仅在条件为真时才添加值。如果该值不为真，则代码向数组添加一个假布尔值。在使用该数组之前，我们可以使用 .filter(Boolean) 对其进行过滤，以确保仅返回真实值。

当使用值调用时，布尔构造函数返回 true 或 false，具体取决于此值是 Truthy 还是 Falsy 值。

例如，假设我们有一个字符串数组，并且如果其他标志为真，我们只想将字符串产生式包含到该数组中：

const isProduction = false
const valuesArray = ['some-string', isProduction && 'production']
function processArray(array: string[]) {  // do something with array}
processArray(valuesArray.filter(Boolean))

虽然，这是在运行时完全有效的代码，但 TypeScript 编译器会在编译期间为我们提供错误 2345：

OutputArgument of type '(string | boolean)[]' is not assignable to parameter of type 'string[]'. Type 'string | boolean' is not assignable to type 'string'.   Type 'boolean' is not assignable to type 'string'. (2345)

此错误表示，在编译时，传递给 processArray 的值被解释为 false | 的数组。字符串值，这不是 processArray 所期望的。它需要一个字符串数组：string[]。

这是 TypeScript 不够聪明的一种情况，无法通过使用 .filter(Boolean) 来推断我们正在从数组中删除所有虚假值。但是，有一种方法可以向 TypeScript 提供这个提示：使用用户定义的类型保护。

创建一个名为 isString 的用户定义类型保护函数：

function isString(value: any): value is string {  return typeof value === "string"}

注意 isString 函数的返回类型。创建用户定义类型保护的方法是使用以下语法作为函数的返回类型：

parameterName is Type

其中 parameterName 是我们正在测试的参数的名称，Type 是此函数返回 true 时此参数值的预期类型。

在这种情况下，如果 isString 返回 true，则表示 value 是一个字符串。我们还将 value 参数的类型设置为 any，因此，它适用于任何类型的值。

现在，更改 .filter 调用以使用的新函数，而不是将其传递给布尔构造函数：

const isProduction = false
const valuesArray = ['some-string', isProduction && 'production']
function processArray(array: string[]) {  // do something with array}
function isString(value: any): value is string {  return typeof value === "string"}
processArray(valuesArray.filter(isString))