Typescript 类型中的嵌套三元条件扩展

Question

我正在从 JavaScript 开发过渡到强制执行 TypeScript 输入的雇主。我为包含典型 .on(event, handler) 的模型创建了一个 Interface。

我的同事想出了一些我认为可以理解的代码，但是它使用了这种嵌套的三元语句，使阅读变得混乱。

interface Model {
    ...
    on<T extends "added" | "failed" | "initialized" | "changed" | "removed"> (
        event: T,
        handler: T extends "changed" | "removed"
                 ? (T extends "changed"
                     ? (model: Model, entity: Entity, data: object) => void
                     : (model: Model, id: string) => void)
                 : (model: Model, entity: Entity) => void,
        context?: object
    ): void
}

这似乎是一种为 handler 参数提供不同签名的方法，基于 event 被传入。

它似乎有效，但我想知道是否有不同的模式来编写它，以便更容易阅读和理解。

Answer 1

我会考虑使用映射接口并对其进行索引，因为“将字符串文字映射到特定类型”的操作在 TypeScript 中由对象类型自然地提供给您。虽然您可以使用条件类型来做到这一点，但它确实更难阅读和维护。

作为重构的第一步，我会这样做：

// use a mapping from event name to event handler type
interface EventHandlerMap {
  added: (model: Model, entity: Entity) => void;
  failed: (model: Model, entity: Entity) => void;
  initialized: (model: Model, entity: Entity) => void;
  changed: (model: Model, entity: Entity, data: object) => void;
  removed: (model: Model, id: string) => void;
}

interface Model {
  on<T extends keyof EventHandlerMap>(
    event: T,
    handler: EventHandlerMap[T], // index into the mapping
    context?: object
  ): void;
}

您可以说服自己它的行为方式相同（或使用最后的代码链接查看）。 EventHandlerMap 接口只是一个帮助器，您实际上并未分配给任何对象。但它描述了从Model.on() 的event 类型的T 参数到handler 参数的映射。我们使用lookup types 将handler 类型提取为EventHandlerMap[T]。

也许可以进一步重构这个......例如，所有这些都是返回void的函数，第一个参数是Model；也许你可以让EventHandlerMap 只跟踪不同事件之间的不同之处，然后使用更复杂的类型操作，但这可能比它的价值更麻烦。

好的，希望对您有所帮助；祝你好运！

Link to code