如何仅收集类型中的键,该类型的对象具有某些特定键作为 Typescript 接口中的值?

爱琴海

我有一个像这样的 redux 状态

interface DataState {
  dashboard: {
    data: DashboardData | null
    isLoading: boolean
    error: string | null
  }
  policySearch: {
    data: PolicySearchData | null
    isLoading: boolean
    error: string | null
  }
  other: {
    someKey: someValue
  }
}

我有一个动作创建者,可以isLoading在数据状态的给定字段中切换状态

toggleDataLoading('policySearch', true)

我不想发送错误的第一个参数来toggleDataLoading运行,所以我有这个:

type FieldsThatHaveLoadingState = 'dashboard' | 'policySearch

因为有些字段没有isLoading状态

我试图想出一种以编程方式从DataStatewith Typescript收集密钥的方法。在javascript中看起来像这样:

const keysIWant = {}
Object.keys(dataState).forEach(key => {
 if(dataState[key].isLoading) keysIWant[key] = true
})
type FieldsThatHaveLoadingState = keyof typeof keysIWant

是否可以仅使用 Typescript 类型和检查来进行这种集合?

背部

下面显示的方法正确地将有效键限制为函数调用。

必须使用嵌套的分布式条件来表达这一点的复杂性有望随着https://github.com/microsoft/TypeScript/issues/23188上的工作而消失

interface DataState {
  dashboard: {
    isLoading: boolean
  }
  policySearch: {
    isLoading: boolean
  }
  other: {
    someKey: 'someValue'
  }
}

type LoadableKey<T = keyof DataState> = T extends keyof DataState ? DataState[T] extends { isLoading: boolean } ? T : never : never

const toggleDataLoading = (stateKey: LoadableKey) => {
  console.log(`Loading ${stateKey}`)
}

toggleDataLoading('dashboard');

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TypeScript为接口中的特定键及其类型的匹配值添加了类型支持

在typescript中的接口中精确指定多个类型的值:

TypeScript:如何创建类型或接口,该类型或接口是具有n个键之一或字符串的对象?

TypeScript 接口中的自引用键类型

在Typescript中,如何允许类型具有指向该类型的递归值的泛型的所有键?

类像 Typescript 接口中的类型

从TypeScript中的函数返回对象(具有特定键,值类型)

TypeScript:如何为具有许多相同类型的键和相同类型的值的对象创建接口?

如何从TypeScript的接口中排除键

值作为接口中的类型

如何定义具有Key String索引但具有特定类型的已知键的TypeScript接口?

typescript:获取接口中基本类的类型

具有特定键和值集的TypeScript类型

Typescript:将函数作为接口中的类型传递

为什么可以在TypeScript中将接口中可能的数字值转换为类实现中的不可能的数字值?

Typescript 映射类型 - 枚举值作为键,接口对应的值作为值

Typescript实现具有相同键但类型不同的接口

TypeScript 接口中具有不可预测字段的对象

如何在 Typescript 函数接口中约束泛型类型?

如何防止在TypeScript类型和接口中使用“ any”

如何根据另一个属性的键在接口中键入属性在 TypeScript 中具有未知结构?

如何从Typescript的接口中提取特定类型的所有字段的名称?

TypeScript:如何从类型中仅提取类型数组的键和值

Typescript:接口中的常量

如何在Angular接口中实现键,值对对象?

Typescript:如何创建与对象数组中的一个对象具有完全相同形状的新键/值对类型?

如何在 Typescript 中使用枚举值作为接口键

如何在TypeScript中返回接口键类型?

Typescript React 如何在接口中声明 json 对象?