How to correctly infer a keyof on an array in generic methods

[languid plinth]

We created a pipe that sorts an array and that have sort options.
The options are an array of SortOption ts interface SortOption<Type, Key extends keyof Type, Value> { property: Key; order?: 'asc' | 'desc'; transformFn?: (value: Type[Key]) => Value; }

What we expect:
The option transformFn must have its value argument well inferred corresponding of the option property (for each option in our options array)

What we currently have:
The option transformFn has its value argument type inferred with the union return type of all the keys of Type (you can see an example on the screenshots below)

[brisk kettle]

could you share some code that demonstrates the problem (like what's in your screenshot) via the TS playground? (https://www.typescriptlang.org/play)

[languid plinth]

Yeah I can do that! I currently don’t have my computer but I’ll do it as soon as possible

[languid plinth]

here is the reproduction https://stackblitz.com/edit/angular-ivy-vmfhbu?file=src%2Fapp%2Fsort.pipe.ts,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts,tsconfig.json

[languid plinth]

Nobody has an idea?

[brisk kettle]

if you're willing to change the call sites to be varargs-style with a rest parameter rather than using an array you can do something like this:

[steady river]

mkantor#7432

Playground Link

Preview:```ts
interface SortOption<
Type,
Key extends keyof Type,
Value

{
property: Key
order?: "asc" | "desc"
transformFn?: (value: Type[Key]) => Value
}

type SortOptions<
Type,
Keys extends readonly (keyof Type)[],
Value

= {
[I in keyof Keys]: SortOption<Type, Keys[I], Value>
...```

You can choose specific lines to embed by selecting them before copying the link.

[brisk kettle]

that's the only way i know of to force typescript to infer the type of each array element individually while still applying a constraint. otherwise i think you'll need to write out more type annotations

(i simplified your example and removed all of the angular stuff to make it easier to play with, but hopefully you see how this can be applied to your code)

if you're willing to write as const at call sites you could do it with an array like this:

[steady river]

mkantor#7432

Playground Link

Preview:```ts
interface SortOption<
Type,
Key extends keyof Type,
Value

{
property: Key
order?: "asc" | "desc"
transformFn?: (value: Type[Key]) => Value
}

type SortOptions<
Type,
Keys extends readonly (keyof Type)[],
Value

= {
[I in keyof Keys]: SortOption<Type, Keys[I], Value>
...```

You can choose specific lines to embed by selecting them before copying the link.

[brisk kettle]

but to my personal taste the varargs style in my previous playground feels nicer for this

[languid plinth]

Thank you very much for your answer! I also prefer the first one! 😄 I need to practice generic types some more now! I still lack some knowledge about it 😜

[languid plinth]

Do you maybe have some great resources to reach your knowledge of TS generic types? I know that I lack some knowledge and would like to learn it much much better

is the TS doc enough? (I admit that I never fully read it, only some parts of it when I needed)

[brisk kettle]

the page on generics is pretty good:

!hb generics

[steady river]

Handbook

Generics

[brisk kettle]

but yeah, reading through the whole thing at some point is useful. you can skim the parts that seem comfortable to you already, but it's roughly ordered in a way that makes sense, so i recommend starting from the beginning

other than that really just playing around with stuff a lot. it'll become ingrained after a while

hanging out on this server helps too 🙂