Тип Typescript для "отображения значений типа объединения в строки"?

Question

Существует 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.

Answer 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 встроены сопоставленные типы ; Вы можете прочитать о них больше в ссылках на встроенный справочник TypeScript.

Надеюсь, это поможет; удачи!

Детская площадка ссылка на код

Answer 2

Вам нужно перечисление с вашими клавишами и интерфейсом:

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
}

Детская площадка

Answer 3

Вы можете использовать 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',
};