键值对的 TypeScript 类型别名

Question

我有一个界面：

export interface PostEventTypeMap {
  changePrice: number;
  changeQuantity: number;
  signalConnected: boolean;
  signalDisconnected: boolean;
}

我如何定义类型别名：

type PostEvent = {
  type: keyof PostEventTypeMap,
  value: **Value based on key value and PostEventTypeMap**
};

我无法将 postEvent 属性设为通用：

PostBoxService {
  get postEvent(): Observable<PostEvent> {
    return getOrCreateValue(this, "postEvent", () => new BehaviorSubject(null));
  }
}

---

服务用例：

postBoxService
  .postEvent
  .subscribe(event => {
    if (!event)
      return;

    switch (event.type) {
      case "changePrice":
        this.changePrice(event.value);
        break;
      case "changeQuantity":
        this.changeQuantity(event.value);
        break;
    }
  });

Answer 1

因为您有有限数量的可能性，并且由于type 值将始终是文字类型，所以您可以将其设为discriminated union。一种方法是将mapPostEventTypeMap 属性传递给你想要的联合成员，然后立即look up 这些属性得到联合：

type ObjToTypeValueUnion<T extends object> = 
  { [K in keyof T]-?: { type: K, value: T[K] } }[keyof T]

type PostEvent = ObjToTypeValueUnion<PostEventTypeMap>;
/* type PostEvent = {
    type: "changePrice";
    value: number;
} | {
    type: "changeQuantity";
    value: number;
} | {
    type: "signalConnected";
    value: boolean;
} | {
    type: "signalDisconnected";
    value: boolean;
} */

您可以验证这是否适合您的用例：

declare function changePrice(x: number): void;
declare function changeQuantity(x: number): void;
((event?: PostEvent) => {
  if (!event)
    return;

  switch (event.type) {
    case "changePrice":
      changePrice(event.value);
      break;
    case "changeQuantity":
      changeQuantity(event.value);
      break;
  }
});

Playground link to code

Answer 2

您可能需要将PostEvent 类型设为泛型，如：

export interface PostEventTypeMap {
  changePrice: number;
  changeQuantity: number;
  signalConnected: boolean;
  signalDisconnected: boolean;
}

type PostEvent<T extends keyof PostEventTypeMap> = {
  type: T,
  value: PostEventTypeMap[T]
};

const validChangePrice: PostEvent<'changePrice'> = {
  type: 'changePrice',
  value: 1
}

const invalidChangePrice: PostEvent<'changePrice'> = {
  type: 'changePrice',
  value: true // Compile error TS2322: Type 'true' is not assignable to type 'number'.
}