“联合类型值到字符串的映射”的打字稿类型？

Posted 2023-03-13

【中文标题】“联合类型值到字符串的映射”的打字稿类型？

【英文标题】：Typescript type for "map of union type values to strings"?

【发布时间】：2020-06-07 10:17:46

【问题描述】：

有一个type 定义如下：type ComponentType = 'CPU' | 'Motherboard' | 'Memory' | 'PSU'。

我想创建一个对象，我可以使用它来映射 ComponentType 以显示字符串，例如类似：

  const componentTypeToLabel/*: to do*/ = 
    CPU: 'Computer processing unit',
    Motherboard: 'Motherboard',
    Memory: 'Memory',
    PSU: 'Power supply unit',
  ;

然而，另外考虑的是，这个componentTypeToLabel 不会包含ComponentType 的所有可能值，只有一些。

componentTypeToLabel 的类型定义是什么样的？如何定义该类型？如果ComponentType 是enum，我知道该怎么做（相信它会是const componentTypeToLabel: [key in ComponentType]? : string = ...），但当ComponentType 是字符串联合type 时不会。

【参考方案1】：

您要查找的类型是Partial<Record<ComponentType, string>>，或等效的[K in ComponentType]?: string：

type ComponentType = 'CPU' | 'Motherboard' | 'Memory' | 'PSU';
const componentTypeToLabel: Partial<Record<ComponentType, string>> = 
  CPU: 'Computer processing unit',
  Motherboard: 'Motherboard',
  Memory: 'Memory',
  PSU: 'Power supply unit',
;

Partial 和 Record 都内置在 mapped types 中；您可以在内联 TypeScript 手册链接中了解更多关于它们的信息。

希望有所帮助；祝你好运！

Playground link to code

【参考方案2】：

您可以使用interface 来定义对象：

interface IComponentType 
  CPU?: string;
  Motherboard?: string;
  Memory?: string;
  PSU?: string;

由于 componentTypeToLabel 可能不包含所有可能的值，我们可以在接口中使用 ? 将它们定义为可选。

然后我们可以创建对象类型：

const componentTypeToLabel:IComponentType = 
  CPU: 'Computer processing unit',
  Motherboard: 'Motherboard',
  Memory: 'Memory',
  PSU: 'Power supply unit',
;

【讨论】：

感谢您的回复。我没有考虑使用界面，但您显示的这个选项确实有效。欣赏它。

【参考方案3】：

你需要的是一个带有你的键和接口的枚举：

enum ComponentTypes 
    CPU = 'CPU',
    Motherboard = 'Motherboard',
    Memory = 'Memory',
    PSU = 'PSU'


type ComponentType =  [key in ComponentTypes]? : string 

const componentTypeToLabel: ComponentType = 
    CPU: 'Computer processing unit',
    Motherboard: 'Motherboard',
    PSU: 'Power supply unit',
    xxx: 'test'  // <--- Not Allow

Playground

【讨论】：

感谢您的回复。有多个示例（例如您的示例）会很有帮助。欣赏它。