typescript - 接口泛型的类型推断
问题描述
我有一个带有两个显式泛型参数的接口:
interface ConnectedComponent<TSelectors, TActions> {
selectors: TSelectors;
actions: TActions;
(props: SelectorProps<TSelectors> & ActionProps<TActions>): any;
}
这是我使用它的方式:
let selectors = { ... };
let actions = { ... };
let Counter: ConnectedComponent<typeof selectors, typeof actions> = props => { ... };
Counter.selectors = selectors;
Counter.actions = actions;
我更愿意做的是从分配的属性中推断出泛型:
let Counter: ConnectedComponent = { ... };
Counter.selectors = { ... };
Counter.actions = { ... };
但是我不知道如何捕获typeof Counter.selectors
和typeof Counter.actions
进入界面。
解决方案
做到这一点的唯一方法是使用额外的函数并利用函数的推理行为。为了推断函数的参数,我们需要使用一个返回函数方法的函数:
interface ConnectedComponent<TSelectors, TActions> {
selectors: TSelectors;
actions: TActions;
(props: SelectorProps<TSelectors> & ActionProps<TActions>): any;
}
function createConnectedComponent<TSelectors, TActions>(props: { selectors: TSelectors; actions: TActions; }): (fn: (props: SelectorProps<TSelectors> & ActionProps<TActions>) => any) => ConnectedComponent<TSelectors, TActions> {
return fn => Object.assign(fn, props);
}
let Counter2 = createConnectedComponent({
selectors: {
// ...
},
actions: {
// ...
}
})(p => { /*...*/ }); //p is TSelectors & TActions as expected
推荐阅读
- mysql - Mysql查询添加列
- javascript - Microsoft Bot 的自动测试
- python - 如何从python3中的文本文件更新变量
- linux - printf 从左边填充除零以外的数字
- angular - Angular - 使用 Mat 表处理表单数组
- html - -webkit-overflow-scrolling 的 Zindex 问题:触摸;在野生动物园
- javascript - 使用 react-date-range 的日历组件时如何修复错误
- json - 如何在邮递员中添加 -d JSONString='{}
- c++ - 错误:构造函数委托给自身问题
- ios - 内核函数