【问题标题】:Generics: Type as property name泛型:类型为属性名称
【发布时间】:2017-11-01 06:11:00
【问题描述】:

是否可以使用泛型传递一个对象,不仅作为类型,而且作为键?

interface store {
  category: string
}

interface ajaxResponse<T> {
  data: ajaxData<T>
  errors: string[]
  success: boolean
}

interface ajaxData<T> {
  rewards: {
    amount: number
    error: string
  }
  T: T
}

function get<T>(url): Promise<ajaxResponse<T>> {
    // make ajax GET request
    // return json object
}

let res = await get<store>('/my/url')

res.data.store.category

当我这样做时,它会说

“ajaxData”类型上不存在属性“store”

有没有办法让我访问该属性?它一旦编译就可以工作,因为所有内容都被删除了,但我怎样才能让它在编辑器中工作?

编辑

想了想,我觉得我不希望接口和属性一样。我想我会想使用名称为xinterface,所以可能是这样的:

let res1 = await get<storeA, 'category'>('/my/url1')
let res2 = await get<storeB, 'catList'>('/my/url2')

res1.data.category.category
res2.data.catList.categories

【问题讨论】:

  • 它“有效”是因为 T: T 声明了一个名为 T 的属性 - 属性名称不会发生通用参数替换
  • 没有参数替换是什么意思?你的意思是我没有做一个,还是一个不存在?
  • 我在您的代码中看到了res.data.store.category,我想您希望ajaxData&lt;T&gt; ... { T: T} 在您将store 传递为T 时扩展为{store: store}。实际发生的是它被扩展为{T: store}
  • 是的,我可以在编辑器中调用 res.data.T.category,但这会在运行时中断 javascript。有什么建议吗?
  • 那么你应该有一些代码在 ajaxData 中初始化T,当你调用get&lt;store&gt; 时,它的值符合store 接口,为此你可能需要通过构造函数或get 的普通参数以及泛型类型参数&lt;store&gt;Interfaces and generics only describe shape of objects for the compiler to do typechecking, they have no effect at runtime.

标签: javascript typescript


【解决方案1】:

是的,如果您将属性名称作为显式文字类型,则可以使用 mapped type syntax 声明具有该名称的属性的类型:

type A<T, PropertyName extends string> = {[P in PropertyName]: T}

所以完整的例子应该是这样的

interface store {
  category: string
}

interface ajaxResponse<T, PropertyName extends string> {
  data: ajaxData<T, PropertyName>
  errors: string[]
  success: boolean
}

type ajaxData<T, PropertyName extends string> = {
  rewards: {
    amount: number
    error: string
  }
} & {[P in PropertyName]: T}




function get<T, PropertyName extends string>(url): Promise<ajaxResponse<T, PropertyName>> {
    // make ajax GET request
    // return json object
  return null;
}

async function test() {
  let res = await get<store, 'store'>('/my/url')

  res.data.store.category
}

【讨论】:

  • 您在&amp; {[P in PropertyName]: T } 上有任何文档吗?我以前从未见过。我也从未使用过type ... = {}
  • 它叫mapped type,我加了一个链接。它必须是type,而不是接口,因此如果您需要在其中添加其他属性,则只能将&amp; 用作intersection type
猜你喜欢
  • 2022-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-05-16
  • 2011-10-08
  • 2017-12-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多