如何将联合类型指定为对象键 Typescript

Question

我需要一种类型化对象的方法，其中键是特定类型的 'event' 字段的值，值是接受 [=17] 的对象的回调数组=]相同类型的数据子类型。

我尝试过使用映射类型，但我是 typescript 的初学者并且真的很难解决这个问题。

// I have this type structure, where the event is always a string, but the data can be anything (but is constrained by the event)

interface EventTemplate {
  event: string;
  data: any;
}

export interface CreateEvent extends EventTemplate {
  event: 'create_game';
  data: {
    websocketID: 'string';
  };
}

export interface JoinEvent extends EventTemplate {
  event: 'join_game';
  data: {
    gameID: 'string';
  };
}

export interface MessageEvent extends EventTemplate {
  event: 'message';
  data: string;
}

export type WSEvent = CreateEvent | JoinEvent | MessageEvent;

// I want an object like this

type callbacks = {
  [key in WSEvent['event']]: ((data: WSEvent['data']) => void)[];
};

// Except that it forces the data structure to match with the key used. IE using a specific WSEvent rather than a generic one

// Something along the lines of:

type callbacks = {
  [key in (T extends WSEvent)['event']]: ((data: T['data']) => void)[];
};
// ...only valid..

const callbacks: callbacks = {
  // So this should be valid:
  message: [(data: MessageEvent['data']): void => {}, (data: MessageEvent['data']): void => {}],

  // But this should not be valid, as CreateEvent doesn't have the event 'join_game'
  join_game: [(data: CreateEvent['data']): void => {}],
};

如果有帮助，我很乐意重组上述任何内容。

Answer 1

我们本质上需要的是一种通过提供事件名称来查找整个事件类型的方法。这可以使用 conditional helper type

来完成

type EventByName<E extends WSEvent['event'], T = WSEvent> = T extends {event: E} ? T : never;

第一个通用参数 E 必须是事件名称之一。第二种是我们试图缩小的联合类型。它默认为 WSEvent，因此无需指定。然后条件表达式仅 returns 联合类型中扩展 {event: E} 的那些事件（其中 E 是事件名称）。

一旦我们有了辅助类型，就可以很容易地相应地调整回调的现有映射类型：

type Callbacks = {
  [E in WSEvent['event']]: ((data: EventByName<E>['data']) => void)[];
};

Playground

关于 callbacks 名字的旁注。建议对类型使用 PascalCase。它可以更容易地与变量区分开来。我在示例中将其更改为 Callbacks.

如何将联合类型指定为对象键 Typescript

How to specify union types as object keys Typescript

generic-type-argument

typescript

typescript-generics

union-types