This Crazy Syntax Lets You Get An Array Element's Type
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
EDIT: This article discusses type argument placeholders as if they were coming in TypeScript. As it turns out, they never made it into the language. But I'll leave this article up as a historical record - since they might add them again one day.
TypeScript 5.2 introduces type argument placeholders, which let you pass a _
to a type argument to allow it to infer the type instead of using its default.
// The underscores tell TypeScript to infer those type arguments!
func<string, _, _>();
This is a fix for 'partial inference' - a long-requested feature that lets you pass in a single type argument to a function and have TypeScript infer the rest.
The solution is controversial but represents an important incremental step forward.
One of the most discussed features of TypeScript 5.2 is type argument placeholders.
This is a new syntax that lets you pass 'type placeholders' - an _
- as a type argument to force TypeScript to infer the type in that parameter.
Currently, if you pass in a single type argument to a function, TypeScript will NOT infer the rest of the arguments.
Let's take this function:
const makeSelectors = <
TSource ,
TSelectors extends Record <
string,
(source : TSource ) => any
>
>(
selectors : TSelectors
) => {
return selectors ;
};
This takes two type arguments - TSource
and TSelectors
. TSource
is the thing we're selecting from, and TSelectors
is an object of functions that take a TSource
and return something.
If we pass in a single type argument, TypeScript will yell at us for not passing in the second type argument:
const selectors = makeSelectors <{ id : number } >({Expected 2 type arguments, but got 1.2558Expected 2 type arguments, but got 1. id : (source ) => source .id ,Property 'id' does not exist on type 'TSource'.2339Property 'id' does not exist on type 'TSource'.});
But if we do pass in a second type argument, we end up a LOT of duplicated code:
const selectors = makeSelectors <
{ id : number },
// We have to type TSelectors manually!
{
id : (source : { id : number }) => number;
}
>({
id : (source ) => source .id ,
});
This behavior was actually never intended from the TypeScript team. To quote Ryan Cavanaugh, TypeScript's lead dev:
The entire reason we're in a difficult spot here in the first place is that generic defaults were sort of rushed in, when we should have really done partial inference for unspecified type parameters instead.
So this behavior was never really intended - it was just a side-effect of how generics were implemented at the time.
The solution coming in TypeScript 5.2 is "type argument placeholders". Type argument placeholders let you pass in an underscore in the second type argument, and TypeScript will infer the type for you:
const selectors = makeSelectors<
{ id: number },
_ // TypeScript infers the type!
>({
id: (source) => source.id,
});
const result = selectors.id({ id: 1 }); // number
This is a big improvement over needing to manually specify the type.
But this approach is still quite controversial. OSS maintainers from Redux, React Query, XState and ArkType have all expressed a similar concern - that it puts the onus on the consumer of the function to pass in a placeholder. From Mateusz Burzyński, maintainer of XState:
I have some type parameters that are never meant to be provided manually. [...] I can require our users to use
_
(well, we'll have to) but it feels like a chore as that should be provided manually at all call sites.
It appears that TypeScript's current plan is to ship type argument placeholders, then experiment with automatic inference later down the line. From Wes Wigham, the author of the PR:
I think we'd want to ship without that for a bit, and see if the papercut of writing new
F<A,_,_>()
instead ofF<A>()
is actually a big enough difference to warrant it.
So, for now, type argument placeholders are the best solution we have for this problem. But it's likely that this will be revisited in the future.
Type Argument Placeholders: TypeScript's Most Discussed Upcoming Feature
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
Learn how to publish a package to npm with a complete setup including, TypeScript, Prettier, Vitest, GitHub Actions, and versioning with Changesets.
Enums in TypeScript can be confusing, with differences between numeric and string enums causing unexpected behaviors.
Is TypeScript just a linter? No, but yes.
It's a massive ship day. We're launching a free TypeScript book, new course, giveaway, price cut, and sale.
Learn why the order you specify object properties in TypeScript matters and how it can affect type inference in your functions.