克隆类型并使用它的键

Question

我知道这听起来像是科学怪人的怪物想法，但请听我说完。我有一个类型：

export enum detailsDataTypes {
  MACHINE = 'MACHINE',
  USER = 'USER',
  ABSTRACT = 'ABSTRACT',
}

export type sharedTypes = {
  name?: string;
  OEECategory?: string;
  OAECategory?: string;
  color?: string;
};

export type AbstractData = sharedTypes & {
  layer: string;
  type: detailsDataTypes.ABSTRACT;
};

export type UserData = sharedTypes & {
  defaultTimeout: number;
  stateAfterTimeout: string;
  accessCanChoose: string;
  accessCanOverwrite: string;
  type: detailsDataTypes.USER;
};

export type MachineData = Omit<UserData, 'type'> & {
  stateCategory: string;
  canOverwriteOnlyByStates: boolean;
  machineType: string;
  type: detailsDataTypes.MACHINE;
};

而且这种类型适合包含数据。但我想要另一种类型来保存标题（人类可读）。这是我的想法：

const sharedHeaders: sharedTypes = {
  name: 'Name',
  OEECategory: 'OEE category',
  OAECategory: 'OAE category',
  color: 'Color',
};

export const AbstractHeaders: Omit<AbstractData, 'type'> = { ...sharedHeaders, layer: 'Layer' };

export const UserHeaders: Omit<UserData, 'type'> | { defaultTimeout: string } = {
  ...sharedHeaders,
  defaultTimeout: 'Default timeout',
  stateAfterTimeout: 'State after timeout',
  accessCanChoose: 'Access - can choose',
  accessCanOverwrite: 'Access - can overwrite',
};

export const MachineHeaders: Omit<MachineData, 'type'> = {
  ...UserHeaders,
  stateCategory: 'State category',
  machineType: 'Machine type',
  canOverwriteOnlyByStates: 'Can overwrite only by states',
};

但是这里我们有一堆类型冲突，我不禁认为必须有更好的方法来做到这一点。

例如在这里，我得到解构后的所有内容都是字符串，它不能分配给从不输入。

export const MachineHeaders: Omit<MachineData, 'type'> = {
  ...UserHeaders,
  stateCategory: 'State category', //here
  machineType: 'Machine type', //here
  canOverwriteOnlyByStates: 'Can overwrite only by states', //here
};

有没有更好的方法来实现我的目标？还是我想错了？

Answer 1

当您有一个对象类型并希望以编程方式从中创建一个新的对象类型时，您通常可以使用a mapped type 来实现。

---

在您的情况下，您有一堆对象类型，它们的属性值类型是任意的，并且您想提出具有相同键但其属性都是 string 的新版本，用作标题值表或其他东西。

我们可以这样做：

type HeadersFor<T> = { [K in keyof T]: string };

让我们测试一下：

type X = HeadersFor<{ a: number, b: boolean, c?: Date, type: string }>;
/* type X = {
  a: string;
  b: string;
  c?: string | undefined;
  type: string;
} */

如您所见，每个属性都已转换为string。好吧，c 字段在输入类型中是 optional，在输出类型中仍然如此（因此可能包括 undefined）。如果您希望输出属性是必需的而不是可选的，您可以使用 mapping modifier 来实现：

type HeadersFor<T> = { [K in keyof T]-?: string };

type X = HeadersFor<{ a: number, b: boolean, c?: Date, type: string }>;
/* type X = {
  a: string;
  b: string;
  c: string
  type: string;
} */

太棒了！但是看看你的原件，你似乎也想完全省略 type 属性。如果需要，您可以组合 Omit 和 HeadersFor，或者您可以重新定义 HeadersFor 以自动从映射类型中排除 type 键。有多种方法可以做到这一点，但从 TS4.1 开始，我可能会建议像这样使用key remapping via as：

  type HeadersFor<T> = { [K in keyof T as Exclude<K, "type">]-?: string };

  type X = HeadersFor<{ a: number, b: boolean, c?: Date, type: string }>;
  /* type X = {
    a: string;
    b: string;
    c: string
  } */

这看起来就像你需要的一切，所以我们将保留 HeadersFor 的定义。

---

现在您可以毫无错误地执行此操作：

const sharedHeaders: HeadersFor<SharedTypes> = {
  name: 'Name',
  OEECategory: 'OEE category',
  OAECategory: 'OAE category',
  color: 'Color',
};

export const AbstractHeaders: HeadersFor<AbstractData> = { ...sharedHeaders, layer: 'Layer' };

export const UserHeaders: HeadersFor<UserData> = {
  ...sharedHeaders,
  defaultTimeout: 'Default timeout',
  stateAfterTimeout: 'State after timeout',
  accessCanChoose: 'Access - can choose',
  accessCanOverwrite: 'Access - can overwrite',
};

export const MachineHeaders: HeadersFor<MachineData> = {
  ...UserHeaders,
  stateCategory: 'State category',
  machineType: 'Machine type',
  canOverwriteOnlyByStates: 'Can overwrite only by states',
};

Playground link to code