PHP前端开发

简化 TypeScript 中的联合类型和数组

百变鹏仔 2个月前 (10-13) #JavaScript
文章标签 数组

使用 typescript 时,您可能会发现自己需要定义一个联合类型和一个包含该类型所有可能值的数组。一种常见的方法是编写如下内容:

type taste = 'しょうゆ' | 'みそ' | 'とんこつ';const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

乍一看,这似乎不错。然而,这里有一个隐藏的问题:每次想要更改或添加选项时,都需要更新 taste 联合类型和品味数组。这种重复的工作可能会导致错误,并使维护代码变得更加乏味。

幸运的是,有一种方法可以通过减少冗余来简化这一过程。通过在 typescript 中使用 as const 断言和 typeof,您可以将联合类型和数组的定义合并到一处。以下是重构上述代码的方法:

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;type taste = (typeof tastes)[number];

这种方法有几个好处:

  1. 单一事实来源

    您只需在味道数组中定义一次值列表。 taste 类型自动从此数组派生,因此如果您需要更新列表,只需在一处执行即可。

  2. 类型安全:

    通过使用 as const,typescript 将品味数组视为具有文字类型的元组,而不仅仅是字符串数组。这可确保口味类型保持准确并与口味中的值保持一致。

  3. 更好的维护

    由于 taste 类型是从数组生成的,因此不存在类型与实际值不匹配的风险。这减少了出现错误的可能性,并使代码更易于维护。

示例用例

现在,每当您在代码中使用 taste 类型时,它都保证与味道数组中的值匹配:

function describeTaste(taste: Taste): string {  switch (taste) {    case 'しょうゆ':      return 'Savory soy sauce flavor.';    case 'みそ':      return 'Rich miso flavor.';    case 'とんこつ':      return 'Creamy pork broth flavor.';    default:      return 'Unknown taste';  }}const allTastes: Taste[] = tastes; // Safe, because they match the type!

这种模式不仅提高了代码的可读性,而且还确保它不易出错,特别是在处理需要保持同步的多个值时。

通过采用这种策略,您可以使您的 typescript 代码更具可维护性和可扩展性。当您处理大量值或您的代码库随着时间的推移而增长时,这特别有用。