MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

TypeScript泛型在异步编程中的应用

2024-03-227.3k 阅读

异步编程基础与 TypeScript 泛型概述

在深入探讨 TypeScript 泛型在异步编程中的应用之前，我们先来回顾一下异步编程的基本概念以及 TypeScript 泛型的基础知识。

异步编程概念

异步编程是一种编程模型，它允许程序在等待某些操作（如网络请求、文件读取等）完成时，不会阻塞主线程，从而提高程序的响应性和效率。在 JavaScript 中，常见的异步操作包括回调函数、Promise 和 async/await。

  • 回调函数：早期实现异步操作的主要方式，通过将一个函数作为参数传递给另一个函数，当异步操作完成时，调用该回调函数。例如：
setTimeout(() => {
  console.log('异步操作完成');
}, 1000);

然而，回调函数在处理多个异步操作时容易出现回调地狱（Callback Hell），代码变得难以维护和阅读。

  • Promise：ES6 引入的一种处理异步操作的更优雅方式。Promise 代表一个异步操作的最终完成（或失败）及其结果值。它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。例如：
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('异步操作成功');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

Promise 通过链式调用解决了回调地狱的问题，使异步代码更加可读。

  • async/await：基于 Promise 的语法糖，它让异步代码看起来像同步代码一样简洁。async 函数返回一个 Promise，await 只能在 async 函数内部使用，用于暂停函数执行，直到 Promise 被解决（resolved 或 rejected）。例如：
async function asyncFunction() {
  try {
    const result = await new Promise((resolve) => {
      setTimeout(() => {
        resolve('异步操作成功');
      }, 1000);
    });
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

asyncFunction();

TypeScript 泛型基础

TypeScript 的泛型是一种强大的工具，它允许我们在定义函数、接口或类时使用类型参数。通过泛型，我们可以创建可复用的组件，这些组件可以支持多种类型，而不是特定的类型。

  • 泛型函数：定义一个泛型函数，它可以接受不同类型的参数并返回相应类型的值。例如：
function identity<T>(arg: T): T {
  return arg;
}

const result1 = identity<number>(5);
const result2 = identity<string>('hello');

在上述代码中，T 是类型参数，函数 identity 可以接受任何类型的参数，并返回相同类型的值。

  • 泛型接口：可以在接口中使用泛型，使接口能够适应不同的类型。例如：
interface GenericIdentityFn<T> {
  (arg: T): T;
}

function identity<T>(arg: T): T {
  return arg;
}

const myIdentity: GenericIdentityFn<number> = identity;

这里定义了一个泛型接口 GenericIdentityFn，它描述了一个接受类型为 T 的参数并返回类型为 T 的值的函数。

  • 泛型类：也可以创建泛型类，类的属性和方法可以使用类型参数。例如：
class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

const myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
  return x + y;
};

这个 GenericNumber 类可以用于不同类型的数字操作，通过类型参数 T 来指定具体的数字类型。

TypeScript 泛型在 Promise 中的应用

Promise 是异步编程的重要组成部分，TypeScript 泛型可以为 Promise 带来更强大的类型安全和代码复用性。

泛型 Promise 类型

Promise 本身就是一个泛型类型，它接受一个类型参数，用于指定 Promise 解决（resolved）时的值的类型。例如：

const promise: Promise<string> = new Promise((resolve) => {
  setTimeout(() => {
    resolve('异步操作成功');
  }, 1000);
});

promise.then((result: string) => {
  console.log(result);
});

在这个例子中，Promise<string> 表示这个 Promise 解决时会返回一个字符串类型的值。这样在 then 回调中，TypeScript 可以明确知道 result 的类型是字符串，提供了类型检查和代码提示。

自定义泛型 Promise 相关函数

我们可以创建一些与 Promise 相关的泛型函数，以提高代码的复用性。例如，一个通用的 delay 函数，它返回一个在指定时间后解决的 Promise：

function delay<T>(ms: number, value: T): Promise<T> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(value);
    }, ms);
  });
}

delay(1000, '延迟 1 秒返回的字符串').then((result) => {
  console.log(result);
});

delay(2000, 42).then((result) => {
  console.log(result);
});

在这个 delay 函数中，通过泛型 T，我们可以传入任何类型的值，并返回一个解决值类型为 T 的 Promise。这样就不需要为不同类型的值分别定义 delay 函数。

处理多个 Promise 的泛型函数

当处理多个 Promise 时，TypeScript 泛型同样非常有用。例如，Promise.all 方法接受一个 Promise 数组，并返回一个新的 Promise，当所有输入的 Promise 都解决时，新的 Promise 才解决，并且其解决值是一个包含所有输入 Promise 解决值的数组。Promise.all 本身就是泛型的，我们可以更清晰地理解其类型定义：

const promise1: Promise<number> = Promise.resolve(1);
const promise2: Promise<string> = Promise.resolve('two');

Promise.all([promise1, promise2]).then((results) => {
  const num = results[0]; // 类型为 number
  const str = results[1]; // 类型为 string
  console.log(num, str);
});

如果我们想自定义一个类似 Promise.all 的函数，并且使用泛型来确保类型安全，可以这样实现：

function myAll<T extends Promise<any>[]>(promises: T): Promise<{ [K in keyof T]: Awaited<T[K]> }> {
  return new Promise((resolve, reject) => {
    if (promises.length === 0) {
      resolve([] as any);
      return;
    }
    const results: any[] = [];
    let completed = 0;
    promises.forEach((promise, index) => {
      Promise.resolve(promise).then((value) => {
        results[index] = value;
        completed++;
        if (completed === promises.length) {
          resolve(results as any);
        }
      }).catch(reject);
    });
  });
}

const promise3: Promise<number> = Promise.resolve(3);
const promise4: Promise<string> = Promise.resolve('four');

myAll([promise3, promise4]).then((results) => {
  const num = results[0]; // 类型为 number
  const str = results[1]; // 类型为 string
  console.log(num, str);
});

在上述 myAll 函数中，T 是一个约束为 Promise 数组的类型参数。{ [K in keyof T]: Awaited<T[K]> } 是一个映射类型，它根据输入的 Promise 数组的每个元素的类型，生成一个对应的结果数组类型。Awaited 是 TypeScript 4.5 引入的内置类型，用于获取 Promise 解决值的类型。这样在 myAll 函数返回的 Promise 的 then 回调中，我们可以得到准确类型的结果数组。

TypeScript 泛型在 async/await 中的应用

async/await 基于 Promise 构建，TypeScript 泛型在 async/await 场景下同样能发挥重要作用。

泛型 async 函数

我们可以定义泛型 async 函数，使其能够处理不同类型的异步操作。例如，一个通用的异步获取数据的函数：

async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('网络请求失败');
  }
  return response.json() as Promise<T>;
}

fetchData<{ name: string }>('https://example.com/api/data').then((data) => {
  console.log(data.name);
});

在这个 fetchData 函数中，通过泛型 T，我们可以指定从 API 返回的数据的类型。这样在调用 fetchData 并处理返回结果时，TypeScript 可以进行准确的类型检查。

处理异步函数返回值的泛型

有时候我们需要对异步函数的返回值进行一些处理，并且希望保持类型安全。例如，定义一个 unwrap 函数，它接受一个返回 Promise 的异步函数，并返回 Promise 解决的值：

async function unwrap<T>(fn: () => Promise<T>): Promise<T> {
  return fn();
}

async function asyncOperation(): Promise<string> {
  return '异步操作结果';
}

unwrap(asyncOperation).then((result) => {
  console.log(result);
});

这个 unwrap 函数通过泛型 T 确保了输入的异步函数返回的 Promise 类型与 unwrap 函数返回的 Promise 类型一致，提供了类型安全。

泛型在异步错误处理中的应用

在异步编程中，错误处理至关重要。TypeScript 泛型可以帮助我们在错误处理中保持类型安全。例如，定义一个 safeAsync 函数，它接受一个异步函数，并在捕获错误时返回一个包含错误信息的对象：

interface ErrorResult {
  error: string;
}

async function safeAsync<T>(fn: () => Promise<T>): Promise<T | ErrorResult> {
  try {
    return await fn();
  } catch (error) {
    return { error: (error as Error).message };
  }
}

async function potentiallyFailingOperation(): Promise<string> {
  throw new Error('操作失败');
}

safeAsync(potentiallyFailingOperation).then((result) => {
  if ('error' in result) {
    console.error(result.error);
  } else {
    console.log(result);
  }
});

在 safeAsync 函数中，通过泛型 T，它可以处理任何返回 Promise 的异步函数。返回类型 T | ErrorResult 表示可能是正常的异步操作结果 T，也可能是包含错误信息的 ErrorResult。这样在调用 safeAsync 后，我们可以根据返回值的类型进行相应的处理，确保了类型安全。

结合泛型和异步编程实现复杂业务逻辑

在实际项目中，我们常常需要结合 TypeScript 泛型和异步编程来实现复杂的业务逻辑。

数据加载与处理流程

假设我们有一个场景，需要从多个 API 加载数据，然后对这些数据进行合并和处理。我们可以利用泛型和异步编程来实现一个通用的数据加载与处理流程。

首先，定义一个 DataLoader 类，它可以根据不同的 API 地址和数据处理逻辑来加载和处理数据：

class DataLoader<T, U> {
  constructor(private url: string, private transform: (data: T) => U) {}

  async load(): Promise<U> {
    const response = await fetch(this.url);
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    const data = await response.json() as T;
    return this.transform(data);
  }
}

// 定义两个不同的 DataLoader 实例
const loader1 = new DataLoader<{ value1: number }, number>('https://api1.com/data', (data) => data.value1);
const loader2 = new DataLoader<{ value2: string }, string>('https://api2.com/data', (data) => data.value2);

async function processData() {
  const result1 = await loader1.load();
  const result2 = await loader2.load();
  // 合并和处理结果
  const combinedResult = `Result1: ${result1}, Result2: ${result2}`;
  console.log(combinedResult);
}

processData();

在这个 DataLoader 类中，T 表示从 API 返回的数据的原始类型，U 表示经过 transform 函数处理后的数据类型。通过泛型，我们可以为不同的 API 定义不同的数据处理逻辑，并且在 load 方法中保持类型安全。

异步缓存机制

在很多应用中，我们需要实现异步缓存机制，以减少不必要的网络请求。利用 TypeScript 泛型和异步编程可以实现一个通用的异步缓存。

class AsyncCache<T> {
  private cache: { [key: string]: T | null } = {};

  async get(key: string, fetcher: () => Promise<T>): Promise<T> {
    if (this.cache[key]) {
      return this.cache[key] as T;
    }
    const data = await fetcher();
    this.cache[key] = data;
    return data;
  }
}

// 使用异步缓存
const cache = new AsyncCache<{ name: string }>();

async function getData() {
  const result1 = await cache.get('data-key', () =>
    fetch('https://example.com/api/data').then((response) => response.json())
  );
  const result2 = await cache.get('data-key', () =>
    fetch('https://example.com/api/data').then((response) => response.json())
  );
  console.log(result1.name, result2.name);
}

getData();

在 AsyncCache 类中，通过泛型 T 表示缓存数据的类型。get 方法接受一个键和一个异步获取数据的函数 fetcher。如果缓存中存在该键对应的数据，则直接返回；否则，调用 fetcher 异步获取数据，并将其存入缓存。这样通过泛型和异步编程，我们实现了一个通用的异步缓存机制，适用于不同类型的数据缓存。

异步队列处理

在一些场景下，我们需要按顺序处理一系列异步任务，例如图片上传队列。利用 TypeScript 泛型和异步编程可以实现一个通用的异步队列处理器。

class AsyncQueue<T> {
  private tasks: ((resolve: (value: T) => void, reject: (reason: any) => void) => void)[] = [];
  private running = false;

  addTask(task: () => Promise<T>) {
    return new Promise<T>((resolve, reject) => {
      this.tasks.push((innerResolve, innerReject) => {
        task()
         .then(innerResolve)
         .catch(innerReject);
      });
      this.processQueue();
      resolve();
    });
  }

  private async processQueue() {
    if (this.running || this.tasks.length === 0) {
      return;
    }
    this.running = true;
    try {
      const task = this.tasks.shift();
      if (task) {
        await new Promise<void>((resolve, reject) => {
          task(resolve, reject);
        });
      }
    } catch (error) {
      console.error('任务执行失败:', error);
    } finally {
      this.running = false;
      this.processQueue();
    }
  }
}

// 使用异步队列
const queue = new AsyncQueue<number>();

queue.addTask(() =>
  new Promise<number>((resolve) => {
    setTimeout(() => {
      console.log('任务 1 完成');
      resolve(1);
    }, 1000);
  })
);

queue.addTask(() =>
  new Promise<number>((resolve) => {
    setTimeout(() => {
      console.log('任务 2 完成');
      resolve(2);
    }, 1000);
  })
);

在 AsyncQueue 类中，通过泛型 T 表示每个异步任务返回值的类型。addTask 方法接受一个返回 Promise 的异步任务，并将其加入队列。processQueue 方法负责按顺序执行队列中的任务，确保每个任务完成后再执行下一个。这样通过泛型和异步编程，我们实现了一个通用的异步队列处理器，可以处理不同类型的异步任务队列。

最佳实践与注意事项

在使用 TypeScript 泛型进行异步编程时，有一些最佳实践和注意事项需要牢记。

类型约束与推断

在定义泛型函数、接口或类时，合理使用类型约束可以提高代码的健壮性。例如，在定义 myAll 函数时，我们将 T 约束为 Promise<any>[]，这样可以确保传入的参数是一个 Promise 数组。同时，要充分利用 TypeScript 的类型推断功能，让编译器自动推断出合适的类型，减少不必要的类型注解。例如，在 delay 函数中，我们调用 delay(1000, '延迟 1 秒返回的字符串')，TypeScript 可以自动推断出 T 为 string。

错误处理与类型安全

在异步编程中，错误处理是关键。当使用泛型时，要确保错误处理机制能够正确处理不同类型的异步操作可能产生的错误。例如，在 safeAsync 函数中，我们通过返回 T | ErrorResult 类型，让调用者能够区分正常结果和错误情况，保持类型安全。

性能与代码复杂度

虽然泛型和异步编程提供了强大的功能，但过度使用可能会导致代码复杂度增加和性能问题。在实现复杂的泛型异步逻辑时，要考虑代码的可读性和维护性。例如，在 DataLoader、AsyncCache 和 AsyncQueue 等类的实现中，要确保代码逻辑清晰，避免过度复杂的类型操作。同时，要注意异步操作的性能，避免不必要的等待和资源浪费。

兼容性与版本问题

TypeScript 的一些新特性（如 Awaited 类型）可能在较旧的版本中不支持。在项目开发中，要根据目标运行环境和团队使用的 TypeScript 版本，选择合适的特性和语法。同时，要注意不同 JavaScript 运行时（如浏览器和 Node.js）对异步编程的支持和差异，确保代码在各种环境下都能正常运行。

通过遵循这些最佳实践和注意事项，我们可以更有效地利用 TypeScript 泛型在异步编程中实现高效、可靠和可维护的代码。无论是简单的异步操作，还是复杂的业务逻辑，TypeScript 泛型和异步编程的结合都为我们提供了强大的工具。在实际开发中，不断实践和总结经验，能够更好地发挥它们的优势，提升项目的质量和开发效率。