是否有可能创建一个接口,其属性类型根据另一个属性更改,而不显式地在编译时知道它?

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"];
  };
}

这篇关于是否有可能创建一个接口,其属性类型根据另一个属性更改,而不显式地在编译时知道它?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

file对象转blob对象进行预览的实例代码: //获取到 file文件var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function (event) { let blob = new Blob([event.target.result], { type: file.type }); //{ type: file.type } 预览blob发现乱码可能是type不对 要获取file文件的
js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传预览和删除/title style #img-box{display: flex;
本文给大家介绍Javascript js中实现和PHP一样的时间戳格式化函数的方法,具有一定的参考借鉴价值,需要的朋友可以参考下,我们知道在php中有一个date()函数,可以方便的把时间戳格式化为时间字符串。可是在js中,我们要想实现这种效果,要写好
需求是模板字符串中不允许出现script 标签、不允许有javascript: 和 .js 文件引用,主要方法如下: clearScriptTag (str) { const reg = /script[^]*([\S\s]*?)\/script/gim; // 清除标签内 相关 xss 安全代码 const reg1 = /javascript:/gim; const reg2 = / *.js/gim; if (reg.test(str)) { str
javascript中Replace全部替换字符用法实例代码,替换1次和多次,主要是正则表达式 var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace("\n",";"));//结果:1;2\n3\n 只替换了第一个var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace(/\n/g, ";"));//结果:1;2;3; replac
js输出当前日期和时间的实例代码,具体实例代码如下,有兴趣的朋友可以尝试运行下。 !doctype htmlhtml lang="en" head meta charset="UTF-8" title获取当前时间/title /head body script type="text/javascript" /** *获取当前时间 *format=1精确到天 *format=2精确到秒 */ function