我的初始代码如下,它允许我在执行 switch on action:ActionType 时根据 type 检测 data 的类型。
enum Actions {
GET_MESSAGES,
GET_MESSAGES_LOADED
}
//@ts-ignore
const AppActions = {
getMessages() {
return {
type: Actions.GET_MESSAGES,
data:{id: 1}
};
},
getMessagesLoaded() {
return {
type: Actions.GET_MESSAGES_LOADED,
data:{messages: ['asdf']}
};
}
};
type ActionType = ReturnType<typeof AppActions[keyof typeof AppActions]>;
const func = (action:ActionType) => {
// @ts-ignore
switch (action.type) {
case Actions.GET_MESSAGES:
console.log(action.data.id) //Should pass
break
case Actions.GET_MESSAGES_LOADED:
console.log(action.data.messages) //Should pass
break;
case Actions.GET_MESSAGES_ERROR: // Should throw typescript error
// default:
// break;
}
};
我想知道的是,我可以通过映射 AppActions 的键来动态创建 ActionType 联合吗?
目前最接近的答案
@Elias 到目前为止对 type ActionType = ReturnType<typeof AppActions[keyof typeof AppActions]>;
的回答消除了此处的大部分膨胀。
只要 AppActions 中的每个函数都有指定的返回类型,上面的方法就可以完美运行,没有这个数据类型就无法检测到,但是它确实检测到正确的 Actions。GET_MESSAGES_ERROR 是一个无效的 action.type。
最佳答案
此答案可用于提取类型,但类型保护无法解析并揭示底层类型!
分析器
type ActionType = ReturnType<typeof AppActions[keyof typeof AppActions]>;
您甚至不需要指定函数的返回类型:
const AppActions = {
getMessages() {
return {
messages: ["asdf"],
};
},
getMessagesLoaded() {
return {
loadedMessages: [1],
}
},
};
关于 typescript :返回基于对象中 ReturnTypes 的联合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68703207/