如何利用 TypeScript 的 Extract 提升类型定义与代码清晰度

前端达人

发布于 2024-06-14 14:17:21

660

发布于 2024-06-14 14:17:21

文章被收录于专栏：前端达人

今天，我们从一个非常实用的工具类型——Extract 开始，让我们一起看看如何利用它来提取类型。

在编写 TypeScript 代码时，我们经常会遇到需要从联合类型中提取特定类型的情况。这个时候，Extract 工具类型就派上用场了。它可以帮助我们从联合类型中筛选出我们需要的那一部分类型，大大简化了代码的复杂度。接下来，我们将通过几个简单的例子来了解它的用法和好处。

一、TypeScript 的联合类型简介

在 TypeScript 中，联合类型（Union Types）是一个非常重要的特性，它允许单个变量持有多种类型的值。可以把联合类型想象成一个能根据不同情况戴上不同帽子的变量。例如，一个变量在某些情况下可能是字符串，而在另一些情况下可能是数字。这种灵活性在 JavaScript 的动态行为中至关重要，而 TypeScript 则通过强大的类型安全机制增强了这一点。

想象一下，在一个 TypeScript 应用中，我们需要一个函数来处理各种类型的输入，比如用户的名字（字符串）、年龄（数字）或生日（日期）。在这种情况下，联合类型显得尤为宝贵，因为它能定义一个包含所有这些可能性的类型：

type UserInput = string | number | Date;

这种定义使得我们可以用同一个变量来处理多种不同类型的输入，从而提高代码的灵活性和可读性。接下来，我们将继续深入探讨联合类型的其他高级用法，以及如何利用 TypeScript 的工具类型来进一步简化和优化我们的代码。

二、高级联合类型操作

联合类型不仅仅是为了声明可以拥有多种类型的变量。它们还为更高级的操作奠定了基础，使得 TypeScript 成为开发者手中强大的工具。这时候，TypeScript 的 Extract 和 Exclude 类型，以及索引访问类型和常量断言就派上了用场。它们为我们提供了一套复杂的工具，用于操作这些联合类型，从而让代码变得更加清晰和易于维护。

在这篇文章中，我们将重点介绍 Extract 类型，通过实际示例展示如何在真实的 TypeScript 场景中有效使用它。让我们来探索如何使用 Extract 来优化类型定义并简化 TypeScript 代码。

三、Extract 类型操作符

TypeScript 的联合类型就像我们类型工具箱中的瑞士军刀——多功能且必不可少。然而，在某些场景中，我们需要的却是一把手术刀：精确且锋利。这时候，TypeScript 的 Extract 类型操作符就派上用场了。

假设你在处理一个可以接收多种数据类型或结构的函数。你有一个联合类型代表用户的输入，这个输入可以是字符串、数字、日期或字符串数组：

type UserInput = string | number | Date | string[];

现在，假设你要编写一个函数，只处理基于文本的输入。这时你需要从 UserInput 中提取出与文本相关的类型。这正是 Extract 大显身手的时候：

type TextualInput = Extract<UserInput, string | string[]>;

TextualInput 现在将成为 string | string[] 的别名，TypeScript 将确保你的函数只处理文本数据类型。

function handleText(input: TextualInput) {
  console.log(`Handling text: ${input}`);
}

// 正确的用法
// 不会有 TypeScript 类型错误
handleText("Hello, world!");
handleText(["Hello", "world!"]);

// 错误的用法，尝试使用非文本类型会导致 TypeScript 类型错误
handleText(42); // TypeScript 类型错误: 参数类型 'number' 不能赋值给参数类型 'TextualInput'.
handleText(new Date()); // TypeScript 类型错误: 参数类型 'Date' 不能赋值给参数类型 'TextualInput'.

一个实际应用案例：优化产品选项

让我们更深入地探讨一下。在一个电子商务应用中，你可能会有一个联合类型，包含各种产品选项：

type ProductOptions = 'color' | 'size' | 'material' | 'warranty';

假设你有一组选项被认为是高级功能，比如材质（material）和保修（warranty），你希望将它们分离出来：

type PremiumFeatures = Extract<ProductOptions, 'material' | 'warranty'>;

现在，PremiumFeatures 是一个只包含材质和保修的类型，这样你就可以在不同的组件或定价算法中独立处理这些高级功能：

function calculatePremiumCost(features: PremiumFeatures[]) {
    const cost = features.length * 100; // 示例的费用计算
    console.log(`Total premium cost: ${cost}`);
    return cost;
}

// 正确的用法
// 不会有 TypeScript 类型错误
calculatePremiumCost(['material', 'warranty']);

// 错误的用法，尝试使用非高级功能会导致 TypeScript 类型错误
calculatePremiumCost(['color', 'size']);
// TypeScript 类型错误:
// 参数类型 '"color"' 不能赋值给参数类型 'PremiumFeatures'。
// 参数类型 '"size"' 不能赋值给参数类型 'PremiumFeatures'。

通过这个例子，我们可以看到，如何利用 Extract 类型操作符来优化和细化产品选项，使得我们的代码更具灵活性和类型安全性。具体来说，我们通过 Extract 将高级功能与普通功能分开，确保 calculatePremiumCost 函数只处理高级功能选项。

五、高级示例：使用 Zustand 提取特定状态

在使用 Zustand 进行状态管理的 React 应用中，我们可以借助 TypeScript 的类型安全机制来防止错误。下面是一个示例，展示如何利用 TypeScript 确保我们的 AppState 使用正确的模式。

首先，我们定义一些接口来表示用户信息和用户设置：

interface UserProfile {
  id: number;
  name: string;
  email: string;
}

interface UserSettings {
  theme: 'light' | 'dark';
  notifications: boolean;
}

const defaultSettings: UserSettings = {
  theme: 'light',
  notifications: true,
};

接着，我们定义应用的状态 AppState：

interface AppState {
  userProfile: UserProfile | null;
  userSettings: UserSettings;
  notifications: Notification[] | null;
}

const useStore = create<AppState>(() => ({
  userProfile: null, // 初始状态设为 null
  userSettings: defaultSettings,
  notifications: null
}));

在这个场景中，我们可能需要一个选择器（selector）来专门处理非 null 的 userProfile。这时，Extract 类型操作符就派上用场了：

type NonNullUserProfile = Extract<AppState['userProfile'], UserProfile>;

const selectUserProfile = (): NonNullUserProfile | null => {
  const userProfile = useStore((state: AppState) => state.userProfile);
  return userProfile ? userProfile as NonNullUserProfile : null;
};

const userProfile = selectUserProfile();

// 正确用法：在访问属性前检查是否为非 null
// 不会有 TypeScript 类型错误
if (userProfile) {
  // 在这里使用 userProfile
  console.log(userProfile.name); // 如果提供了 name，打印 name
}

// 错误用法
// 会有 TypeScript 类型错误
console.log(userProfile.name); // TypeScript 类型错误: 'userProfile' 可能是 'null'.

在这里，NonNullUserProfile 是一个仅包含 UserProfile 的类型，排除了 userProfile 类型中的 null。selectUserProfile 函数利用这一点来确保处理的是非 null 的 userProfile。