Typescript:依赖于同一对象中另一个属性的属性的类型

标签 typescript conditional-types

我有一个带有两个属性( type:stringargs:object )的 TypeScript 接口(interface)。 args可能具有不同的属性,具体取决于 type .我需要将什么类型定义应用于 args因此编译器/自动完成将知道 args 允许哪些属性?

这有点类似于我在 Redux 中使用 Actions 的方式,它确实有 typepayload在我的 reducer 中,编译器通过 switch 语句知道有效负载包含什么。但我不能让它与我的对象一起工作。
我在这里阅读了一篇很棒的文章https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/但这描述了具有两个相互依赖的 args 的方法的问题,但没有描述如何使该方法适用于同一对象中的两个属性。

export interface IObject {
  type: ObjectType
  parameters: ObjectParameters
}

export type ObjectType = "check" | "counter"

export interface IParametersCheck {
  checked: boolean
}

export interface IParametersCounter {
  max: number
  min: number
  step: number
}

export type ObjectParameters = IParametersCheck | IParametersCounter

如果我有 IObject并将类型设置为“检查”编译器/自动完成应提供 IParametersCheck 的属性.

最佳答案

我认为你真正在寻找的是一个有歧视的工会。 IObject本身应该是一个联合:

export type IObject = {
    type: "checked"
    parameters: IParametersCheck
} | {
    type: "counter"
    parameters: IParametersCounter
}
export type ObjectType = IObject['type'] //// in case you need this union
export type ObjectParameters = IObject['parameters']  //// in case you need this union

export interface IParametersCheck {
    checked: boolean
}
export interface IParametersCounter {
    max: number
    min: number
    step: number
}
您也可以使用条件类型来执行此操作,但我认为联合解决方案效果更好:
export interface IObject<T extends ObjectType> {
    type: T
    parameters: T extends 'checked' ? IParametersCheck: IParametersCounter
}
或者使用映射接口(interface):
export interface IObject<T extends ObjectType> {
    type: T
    parameters: ParameterMap[T]
}
type ParameterMap ={
    'checked': IParametersCheck
    'counter': IParametersCounter
}

export type ObjectType = keyof ParameterMap

关于Typescript:依赖于同一对象中另一个属性的属性的类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56949513/

相关文章:

typescript - 如何导出现有 Typescript 声明模块的内部成员

typescript - 在 Typescript 中使用数组迭代简化异步等待

angular - 过滤 Material 表中的不同列

javascript - 错误 :Property 'select' does not exist on type HTMLElement

TypeScript:如何在带有剩余参数的函数中返回条件类型?

typescript 深度替换多种类型

javascript - 类型 'products' 上不存在属性 'Readonly<{}>'

typescript - 为什么 Typescript 需要 infer 关键字?

javascript - Typescript 推断高阶函数的类型,该函数执行具有相同参数签名的可选函数参数

typescript - 条件类型 返回类型 函数签名重载解析