Question

我目前正在尝试改进某些现有代码的类型。我的代码大致如下：

/* dispatcher.ts */
interface Message {
    messageType: string;
}

class Dispatcher<M extends Message> {    
    on<
        MessageType extends M["messageType"],
        SubMessage extends M & { messageType: MessageType }
    >(
        messageType: MessageType,
        handler: (message: SubMessage) => void
    ): void { }
}

/* messages.ts */
interface AddCommentMessage {
    messageType: "ADD_COMMENT";
    commentId: number;
    comment: string;
    userId: number;
}

interface PostPictureMessage {
    messageType: "POST_PICTURE";
    pictureId: number;
    userId: number;
}

type AppMessage = AddCommentMessage | PostPictureMessage;

/* app.ts */
const dispatcher = new Dispatcher<AppMessage>();

dispatcher.on("ADD_COMMENT", (message: AddCommentMessage ) => {
                                    /* ^^ REMOVE THIS TYPE HINT!*/
    console.log(message.comment);
});

我想删除显式缩小传递给消息处理程序的消息类型（/*REMOVE THIS TYPE HINT!*/所在的位置）的需要，以便它正确地缩小到具有匹配的{{ 1}}类型（例如，如果messageType为messageType，则"ADD_COMMENT"应为message）。

如果现在无法做到这一点请告诉我。我的印象是它不是，但我不太确定。

Answer 1

除非你愿意更改代码，否则这是不可能的。

您的基础界面

interface Message {
    messageType: string;
}

过于笼统，我认为messageType: string会根据messageType的值排除任何推断，看起来无法在Dispatcher界面中对其进行充分缩小。

如果您将代码限制为AppMessage及其后代，下面是一个示例，如何使用typescript来推断所需的类型，由字符串文字类型引导（keyof AppMessageMap实际上是一个联合字符串文字类型"ADD_COMMENT" | "POST_PICTURE"）：

/* dispatcher.ts */

class Dispatcher {    
    on<
        MessageType extends keyof AppMessageMap
    >(
        messageType: MessageType,
        handler: (message: AppMessageMap[MessageType] & {messageType: MessageType}) => void
    ): void { }
}

/* messages.ts */
interface AddCommentMessage {
    commentId: number;
    comment: string;
    userId: number;
}

interface PostPictureMessage {
    pictureId: number;
    userId: number;
}

interface AppMessageMap {
    "ADD_COMMENT": AddCommentMessage,
    "POST_PICTURE": PostPictureMessage
}
type AppMessage = AppMessageMap[keyof AppMessageMap];

/* app.ts */
const dispatcher = new Dispatcher();


dispatcher.on("ADD_COMMENT", (message) => {
    console.log(message.comment);
});

我还从接口中删除了messageType属性以避免重复，我认为handler参数中的交集类型实现了相同的效果。

TypeScript类型推断/缩小挑战

1 个答案: