使用类名定义类型中的属性 解决方案说明

如何解决使用类名定义类型中的属性 解决方案说明

假设我有一些事件类：

class UserCreated { ... }
class UserVerified { ... }

然后有一个类来处理这些事件：

class UserEventsHandler extends Something {
    onUserCreated(event) { ... }
    onUserVerified(event) { ... }
}

有没有办法在 TypeScript 中对此类类型进行建模？具体来说，我可以根据类名以某种方式定义所需的属性和方法吗？这是预期的结果：

type UserEvents = UserCreated | UserVerified; // ?
type EventsHandler<TEvents> = ?

// Compile-time error: 'onUserVerified' is required
class UserEventsHandler extends Something implements EventsHandler<UserEvents> {
    onUserCreated(event) { ... }
    /* onUserVerified(event) { ... } */
}

这显然需要编译时模板文字，但我没有看到 TypeScript 中的另一块难题，即任何使用类名来定义属性约束的能力。不过，我很乐意被证明是错误的。

解决方法

这是可能的，但我不建议为此使用类名。要完成这项工作，您需要 UserCreated.constructor.name 的类型信息。但它的类型将始终是 string 而不是 "UserCreated"。因此，你需要一些 hacky 类型来包装你的类来改变它，即使那样，我也不能 100% 确定它是否可行，这取决于你的运行时代码。我会给你一个例子，说明如何在没有 class.name 的情况下实现你想要的行为，但使用类型字符串。您可以修改它以使其更适合您的情况。使这项工作发挥作用的关键是 template literal types:

interface EventInterface {
    readonly type: string;
}

class UserCreated implements EventInterface {
    // because type is readonly,UserCreated.type resolves to "UserCreated" and not string
    type = "UserCreated";
}

type EventHandler<T extends EventInterface> = {
    // to concat strings in types you need to use template literal types
    [K in `${"on"}${T["type"]}`]: (event: T) => void;
}

// works!
class UserEventHandler implements EventHandler<UserCreated> {
   public onUserCreated(event: UserCreated) {

   }
}
// won't work
class UserEventHandlerError implements EventHandler<UserCreated> {
   public wrongFunction(event: UserCreated) {

   }
}

更新：现在还包含一次多个事件的示例 playground

关于 UserCreated.constructor.name 的另一个说明。如果您打算在代码中使用它而不仅仅是在类型上使用它，我会建议您不要这样做。如果您在运行时使用 UserCreated.constructor.name 来了解事件侦听器函数的命名方式，您可能会在生产中感到非常惊讶。 UserCreated.constructor.name 的名称信息被认为是调试信息，minifier 不尊重它。缩小后，您的类将类似于 class a_ {...}，现在 UserCreated.constructor.name 将返回名称 a_。这就是为什么最好依赖实际字符串的原因。您可以停用函数名称的缩小功能，但这会大大增加包的大小。

,

解决方案

// convert an event name to a handler name
type AddOn<T extends string> = `on${Capitalize<T>}`
// convert a handler name to an event name
type RemoveOn<T extends string> = T extends `on${infer E}` ? Uncapitalize<E> : T;

// create a map of event handler from a map of events keyed by name
type EventsHandler<EventMap> = {
    [K in AddOn<Extract<keyof EventMap,string>>]: 
        RemoveOn<K> extends keyof EventMap ? (event: EventMap[RemoveOn<K>]) => void : never;
}

---

说明

@Micro S. 通过基于名称的解决方案为您提供了出色的答案。您可能考虑的另一种方法是使用基于地图的方法。

DOM 库中有许多函数必须将事件名称（例如 "click"）与特定的事件类型（例如 MouseEvent）进行匹配。每个事件的事件类型都不是唯一的。 “点击”事件具有与“鼠标按下”事件相同的所有信息。

如果您查看 lib.dom.ts 中的处理方式，您将看到它们使用映射定义这些关系。许多地图（其中 67 个），其中许多相互延伸。每个映射描述与特定对象或接口相关联的事件。例如，对于 Document 有一个 interface DocumentEventMap，它扩展了通用事件 interface GlobalEventHandlersEventMap 并扩展了 interface DocumentAndElementEventHandlersEventMap，它包括由文档和 HTML 元素共享的事件，以便它们不需要写两次。

所以不要定义联合：

type UserEvents = UserCreated | UserVerified;

我们要定义一个映射：

interface UserEvents {
    userCreated: UserCreated;
    userVerified: UserVerified;
}

现在我们可以使用新的 template literal types 和 mapped types 使用一些 Typescript 魔法来创建您的 EventsHandler 类型。

我们可以创建通用模板文字来将键 "userCreated" 转换为方法名称 "onUserCreated" 并返回。

type AddOn<T extends string> = `on${Capitalize<T>}`
type RemoveOn<T extends string> = T extends `on${infer E}` ? Uncapitalize<E> : T;

type A = AddOn<'userCreated'> // type: "onUserCreated"
type B = RemoveOn<'onUserCreated'> // type: "userCreated"

我们希望 EventsHandler 的密钥为 AddOn 版本。我们可以将类型 AddOn 应用于字符串的联合并获得它们映射版本的联合。这要求键必须是 string，因此我们使用 Extract<keyof EventMap,string>。

这是我们的密钥类型：

type C = AddOn<Extract<keyof UserEvents,string>> // type: "onUserCreated" | "onUserVerified"

如果我们映射的接口使用 AddOn 版本作为键，那么我们需要使用 RemoveOn 返回到原始键。我们知道这是相反的，因此 RemoveOn<K> 应该是我们派生 EventMap 的 K 的键，但是 Typescript 不会做出这个假设，所以我们必须仔细检查 { {1}}。

extends

将此类型应用于我们的 type EventsHandler<EventMap> = { [K in AddOn<Extract<keyof EventMap,string>>]: RemoveOn<K> extends keyof EventMap ? (event: EventMap[RemoveOn<K>]) => void : never; } 会得到我们想要的结果：

interface UserEvents

决定：

type D = EventsHandler<UserEvents>

现在我们得到了我们所追求的错误：

“UserEventsHandler”类错误地实现了“EventsHandler”接口。

属性“onUserVerified”在“UserEventsHandler”类型中缺失，但在“EventsHandler”类型中是必需的。

令人讨厌的是，您仍然必须在方法中定义 type D = { onUserCreated: (event: UserCreated) => void; onUserVerified: (event: UserVerified) => void; } 变量的类型。如果您为 event 分配了无效类型，则会出现错误。无效类型是需要我们预期事件类型中不存在的属性的类型，但只需要事件 event 的子集或根本不需要事件 onUserVerified(event: {}) 也可以，因为它们都可以工作使用 onUserVerified() 事件调用时。

请注意，我已将所有名称与您的示例中的名称保持一致，但地图中的事件名称不必与事件名称 UserVerified 匹配。这也很好：

class

Typescript Playground Link