文章/答案/技术大牛

发布

社区首页 >问答首页 >在TypeScript中推断泛型函数中的映射类型

问在TypeScript中推断泛型函数中的映射类型
EN

Stack Overflow用户

提问于 2017-05-09 20:46:58

回答 1查看 4K关注 0票数 6

以this StackOverflow post为例，我实现了一个类型化事件系统。简化后，它看起来像是：

interface MyTypeMap {
  FOO: string;
  BAR: number;
}

我试图利用这个映射创建一个事件处理程序：

function handleEvent<T extends keyof MyTypeMap>(eventKey: T, eventMsg: MyTypeMap[T]) {
  switch(eventKey) {
    case('FOO'):
      // TS believes that eventKey is of type 'never'
      // TS believes that eventMsg is 'string|number'
      break;
    case('BAR'):
      // TS believes that eventKey is of type 'never'
      // TS believes that eventMsg is 'string|number'
      break;
  }
}

在外部调用此函数时，TypeScript的行为与预期相同。例如：

// These work as desired
handleEvent('FOO', 'asdf');
handleEvent('BAR', 5);

// These throw compile errors as desired
handleEvent('FOO', 6);
handleEvent('BAR', 'i am not a string');

但是，在函数TypeScript中非常混乱。它似乎相信，所有的案例陈述都不可能被击中。为什么TypeScript不能正确推断函数中的类型，尽管它在外部调用中运行得很好？

generics

typescript

switch-statement

typing

inference

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-09 21:07:49

目前无法根据另一个变量的类型来约束一个变量的类型。删除泛型参数T of handleEvent (不知道为什么会导致类型记录以never形式推断eventKey类型)后所能得到的最佳结果是

function handleEvent(eventKey: keyof MyTypeMap, eventMsg: MyTypeMap[typeof eventKey]) {
  switch(eventKey) {
    case ('FOO'):
          const a1 = eventKey; // a1 has type 'FOO'
          const m1 = eventMsg; // m1 has type string|number
      break;
    case('BAR'):
          const a2 = eventKey; // a2 has type 'BAR'
          const m2 = eventMsg; // again, m2 has type string|number
      break;
  }
}

因此，当它所依赖的变量的类型eventKey受到限制时，编译器不会限制它的类型。不过，如果可以的话，那就好了。

但是，如果您愿意使用一个将消息类型映射到处理程序而不是开关语句的对象，下面是工作原型(目前仅限于每个消息类型只有一个处理程序，但我相信可以很容易地扩展)：

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

    handlerMap: {[s: string]: (message: AppMessageMap[keyof AppMessageMap]) => void} = {};

    emit<MessageType extends keyof AppMessageMap>(messageType: MessageType, message: AppMessageMap[MessageType]) {
        const handler = this.handlerMap[messageType];
        if (handler) {
            handler(message);
        }
    } 
}

/* messages.ts */

interface AddCommentMessage {
    commentId: number;
    comment: string;
    userId: number;
}

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

interface AppMessageMap {
    "ADD_COMMENT": AddCommentMessage,
    "POST_PICTURE": PostPictureMessage
}

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


dispatcher.on("ADD_COMMENT", (message) => {
    console.log(`add comment: ${message.comment}`);
});
dispatcher.on("POST_PICTURE", (message) => {
    console.log(`post picture: ${message.pictureId}`);
}); 

dispatcher.emit('ADD_COMMENT', {
    comment: 'some comment',
    commentId: 2,
    userId: 3
});
dispatcher.emit('POST_PICTURE', {
    pictureId: 4,
    userId: 5
});

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43879572

复制

相似问题

问在TypeScript中推断泛型函数中的映射类型
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TypeScript中推断泛型函数中的映射类型EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TypeScript中推断泛型函数中的映射类型
EN