TypeScript 类型 inference/narrowing 挑战

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!*/ 的消息类型）的需要，以便它正确地缩小到具有匹配 messageType 类型（例如，如果 messageType 是 "ADD_COMMENT"，那么 message 应该是 AddCommentMessage）。

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

Answer 1

这是不可能的，除非您愿意对代码进行大量更改。

你的基础界面

interface Message {
    messageType: string;
}

太笼统了，我认为 messageType: string 排除了任何基于 messageType 值的推断，并且看起来不可能在 Dispatcher 界面中充分缩小它。

如果您将代码限制为 AppMessage 及其后代，这里有一个示例，说明如何使打字稿根据字符串文字类型（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 类型 inference/narrowing 挑战

TypeScript type inference/narrowing challenge

inference

type-inference

narrowing

typescript