Is it possible to create an Interface with a property type which changes based on another property, without explicity knowing it on compile?(是否有可能创建一个接口,其属性类型根据另一个属性更改,而不显式地在编译时知道它?)
本文介绍了是否有可能创建一个接口,其属性类型根据另一个属性更改,而不显式地在编译时知道它?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望能够根据对象的另一个属性推断对象的属性类型,而不必像Newtype那样声明T。而是声明Newtype并从属性推断T。见下图:
export interface Action {
type: K;
payload: K extends "UPDATE_FIVE_DAY"
? {
fiveDayForecast?: FiveDayForecast;
fiveDayExpiresAt?: Moment;
fiveDayLocationFor?: Location;
}
: K extends "UPDATE_LOADING"
? { loading: boolean }
: K extends "UPDATE_LOCATION"
? { location: Location }
: K extends "UPDATE_SETTINGS"
? { settings: Settings }
: undefined;
}
我遇到的问题是变量K
不存在,我可以这样设置它:
export interface Action<K extends 'UPDATE_FIVE_DAY' | 'UPDATE_LOADING' | ...etc
但是,我需要声明action.type的类型,我不一定知道。我想使用如下类型:
我要在通用减速器中使用此操作:
export default (state: State = initialState, action: Action): State => {
switch (action.type) {
case "UPDATE_LOADING":
return {
...state,
loading: action.payload,
};
}
});
但是,Return语句会抛出一个类型错误,因为它认为action.payload可能是任何可能的返回类型。这不是真的。
推荐答案
我按照@shlang的建议,使用区别对待的联合使其正常工作。
减速机:
export default (state: State = initialState, action: Actions): State => {
switch (action.type) {
case "UPDATE_LOADING":
return {
...state,
loading: action.payload.loading,
};
}
});
和操作的类型:
export type Action = {
type: AllActionTypes;
payload: Partial<State> | undefined;
};
export type Actions =
| UpdateFiveDayAction
| UpdateLoadingAction;
export interface UpdateLoadingAction extends Action {
type: "UPDATE_LOADING";
payload: { loading: State["loading"] };
}
export interface UpdateFiveDayAction extends Action {
type: "UPDATE_FIVE_DAY";
payload: {
fiveDayForecast: State["fiveDayForecast"];
fiveDayExpiresAt: State["fiveDayExpiresAt"];
fiveDayLocationFor: State["fiveDayLocationFor"];
};
}
这篇关于是否有可能创建一个接口,其属性类型根据另一个属性更改,而不显式地在编译时知道它?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:是否有可能创建一个接口,其属性类型根据另一
基础教程推荐
猜你喜欢
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01