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.
Sometimes, the way you order your object properties matters.
Let's imagine we create a function that takes in an object as its argument. In this object, there are two properties: produce
and consume
.
const process = <T>(obj: {
produce: (input: string) => T;
consume: (t: T) => void;
}) => {
const value = obj.produce("abc");
obj.consume(value);
};
// ---cut---
process({
produce: (input) => Number(input),
consume: (output) => console.log(output),
// ^?
});
produce
takes in an input of string
and returns some type. consume
then takes in that value and does something with it. Because of a clever type definition, TypeScript can infer the type of the value returned by produce
and pass it to consume
:
const process = <T >(obj : {
produce : (input : string) => T ;
consume : (t : T ) => void;
}) => {
const value = obj .produce ("abc");
obj .consume (value );
};
We can use this setup with any type of value, and it'll just work:
process ({
produce : (input ) => input + "hello",
consume : (output ) => console .log (output ),});
process ({
produce : (input ) => ({ value : input }),
consume : (output ) => console .log (output ),});
This all looks great, until one of our users complains to us. They're trying to use our function, but it's not working:
const process = <T>(obj: {
produce: (input: string) => T;
consume: (t: T) => void;
}) => {
const value = obj.produce("abc");
obj.consume(value);
};
// ---cut---
process({
consume: (output) => console.log(output),
// ^?
produce: (input) => Number(input),
});
The output
is being seen by TypeScript as unknown
. This feels very odd, as the produce
function is clearly returning a number
. What's going on?
The difference here is that the user specified consume
before produce
. Since TypeScript 4.7, in this PR, TypeScript now uses the order of properties to inform its inference. This was added to fix various long-standing bugs (linked in the PR) with context-sensitive functions.
This means that, in some very narrow cases, the order you specify your properties matters. So if you're running up against strange errors to do with property ordering, that's why!
NoInfer
?You might be wondering if you could use NoInfer
to fix this. That seems sensible, given that NoInfer
is used to force TypeScript to avoid inference on certain targets.
However, it doesn't:
const process = <T>(obj: {
produce: (input: string) => T;
consume: NoInfer<(t: T) => void>;
}) => {
const value = obj.produce("abc");
obj.consume(value);
};
process({
consume: (output) => console.log(output),
// ^?
produce: (input) => Number(input),
});
The result is still unknown
. How frustrating!
Share this article with your friends
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 how to use corepack
to configure package managers in Node.js projects, ensuring you always use the correct one.