Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Generics: Type as property name

Is it possible with generics to pass an object for usage as not only the type, but as the key?

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

When I do that, it says

Property 'store' does not exist on type 'ajaxData'

Is there a way for me to access that property? It works once compiled since all that is removed, but how can I get it working in the editor?

Edit

After thinking about it, I think I don't want the interface and the property to be the same. I think I would want to use an interface with name x, so maybe something like this:

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

res1.data.category.category
res2.data.catList.categories
like image 719
Get Off My Lawn Avatar asked Oct 31 '17 20:10

Get Off My Lawn


1 Answers

Yes if you have property name as explicit literal type, you can declare a type having property with that name by using mapped type syntax:

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

So the complete example should look like

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
}
like image 165
artem Avatar answered Sep 28 '22 06:09

artem