![](/img/trans.png)
[英]TypeScript: Inferring the correct type for a function that evaluates function properties on a generic object
[英]Inferring mapped type in a generic function in TypeScript
以StackOverflow文章為例,我實現了一個類型化的事件系統。 簡化,看起來像:
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無法正確推斷函數內部的類型,盡管它可以正常使用外部調用?
目前沒有辦法根據另一個變量的類型約束一個變量的類型。 刪除handleEvent
泛型參數T
后你可以得到的最好(不知道為什么它會導致eventKey
類型推斷為never
)
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;
}
}
因此,編譯器不限制的類型eventMsg
當它取決於變量的類型, eventKey
,被限制。 盡管如此,它仍然很好。
但是如果你願意使用一個將消息類型映射到處理程序而不是switch語句的對象,那么這里是工作原型(目前僅限於每個消息類型只有一個處理程序,但我相信可以輕松擴展):
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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.