Very cleanly spoken. The mental model for 'infer' is super valuable. The comparison of 'extends' to a regex match and 'infer' to the capture group of the regex was what I was missing. It's so much easier to get my head around this after watching this video. Three cheers!
To me, the most intuitive mental model for types (in TypeScript) is that of (mathematical) sets. 'never' is simply the empty set, 'any' is the set of everything, 'string' is the infinite set of all possible strings, while any particular string (e.g. 'abc') when used as a type is simply the set consisting of a single element that is that particular string, and so on. Generics act somewhat like functions at the level of the type system (with the types listed between < and > acting as the arguments), and the 'extends' and 'infer' operators are there for type pattern matching and extraction.
Incredible. I grok'd the official docs explanation and it helped me understand some parts of a project codebase that I was struggling with before. But after watching this video, it's absolutely crystal clear and gives me much more context for how it can be used more broadly
I was happy and satisfied with the basic pattern matching mental model of infer, then you completely blew my mind when you went even deeper into infer black magic and completely demystified it. Well done!
I'm a recent "convert" to your channel. There's a lot of (let's face it) simply awful programming tutorial channels on TH-cam and it's such a rare treat to find one, like this, that's of really good quality. It's got to the stage now where you're knocking "Arjan Codes" of of my personal number 1 spot. Keep up the excellent work.
You just made infer so easy! it was a thing that I have struggle to understand until seeing this video! Matt thanks a lot! You are a true hero and TypeScript mage!
Ahh ok. I don't think I fully grasped the potential of `infer` until you brought in the bit about being able to confer constraints on it with the extends keyword. Really cool stuff
Thanks so much for this amazing video Matt! You really helped me solidify my understanding of infer. One thing I have been struggling with is inferring generic function parameters. If you take this map function, T and U are inferred as unknown: ```ts type MapFunction = (mapper: (val: T) => U, list: T[]) => U[] type MapParameters = Parameters // [mapper: (val: unknown) => unknown, list: unknown[]] ``` This makes sense given T and U have no constraints. If you added constraints such as `` then the mapper `val` and `list` types would be of type `string` and the mapper return type would be of type `number` However a mapping function should remain generic and what I really want/need here is: ```ts type MapParameters = Parameters // [mapper: (val: T) => U, list: T[]] ``` This would bind the relationship between the mapper val argument and the list type. The relationship between the mapper val argument and the list are decoupled with the unknown type. For arguments sake, let's say I defined PartialFunction type: ```ts // Implementation 1 type PartialFunction1 = F extends (...args: infer A) => infer R ? (...args: Partial) => R : never // Implementation 2 type PartialFunction2 any> = ( ...args: Partial ) => ReturnType ``` Both of these PartialFunction types are the same (or so I believe) and both create the following type for the MapFunction defined above: ```ts type PartialMap1 = PartialFunction1 type PartialMap2 = PartialFunction2 // PartialMap1 = (mapper?: ((val: unknown) => unknown) | undefined, list?: unknown[] | undefined) => unknown[] // PartialMap2 = (mapper?: ((val: unknown) => unknown) | undefined, list?: unknown[] | undefined) => unknown[] ``` Since the params of the generic MapFunction are being inferred as unknown and then spread onto the new function, the generic constraint between the mapper function and the list is lost. Is there anyway that you know of to solve for this or is this a current limitation of TypeScript? Here's a link to TypeScript playground with the types shared above: www.typescriptlang.org/play/?#code/C4TwDgpgBAsghmAYgVwHYGNgEsD2qoC8UAPACoA0UAqgHwAUAtgpAE4BcUdAbnADYekAlIRrVKvLAGdgAgNoBdYQVFUFAKFCRYCAApwWcBhGAQWkwlD0GjJs8XhI0mXKlEB6N1FlMwrDtz4ONABrVBwAd1QlURCwyPEpGShYiNQFeTUNcGgrbD4UDGw8AEZiRFEiRCgIAA8TVAATczoAOjb9AHNJDixUADNTKABBaKhegZYoACU1KCgAfk42ls7uy3083mIhmlGZuY5UCC5TTM0cjax8pyLUACYy6rqIRubl1Y44VBAFUa+QCqcWZQd4sLocXJXLZWQzGUySMo0GhqPbGZAsVCkbKIs7ZdYsTYOYoWSHXQouUoOArOPDuTyMZimeb+AL8ZKoUKpUYpSLCAA+7IaED6vQgDQS0mZ7M5kQUUAFaCFIqODW5HLiaQy53xhIQdxJlzJNPu9gQ1NudM4PlYUrorKC6q5ImlGv5guFovFUAkkodMs18vdyrFav96iAA
Thanks. Perfect :) Infer was the missing piece of the puzzle for me. I sorta understood what it was doing, but the syntax was just a bit nuts with the all the "extends matching".
Even though I have an idea of what infer does, I still learnt something new from this (didn't know it's only applicable to conditional types)! Can't wait to dig into Total TypeScript more as you expand the content in that course!
I gotta say that your videos are very intimidating for me because I'm still at an intermediate level in JS Bootcamp but your calm style and clear explanations make me kinda understand much of what you expose in your videos once I watch them a couple of times. I can't wait to reach a level where I'm ready to buy your TS course. Thank you, great work!
Thank you very much for the channel Matt aka TS Wizard 🙏. Just want to mention that something about the starting explanation what is conditional type and basically constrain in TS. So I understand it as the construction 'A extends B' basically means A subset of B. From SetTheory in Maths. I saw that many people are replaying this part, including me. Happy coding 💪
Dude You are one of the best web-dev related channels on YT, and You only have a bit more than 20k followers... Hope Your channel will grow because You definitely deserve it! Buying Your paid course! :D
Unfortunately, despite its popularity, Typescript has very poor documentation. Very often I don't understand what Typescript can or can't do. Thanks Matt for explaining those tricky parts.
my mind exploded somehere near 5 minute, but i survived until the end and remember one crucial thing: about the only use case of infer. Did i hate the video? I made it until the end so i give a thumb up.
Request: Please plan your examples ahead of time. After making each change, take some time to explain it. No need to rush. Thanks for your videos. They are super helpful.
What happens when you have a union of infers and the object being inferred from matches more than one pattern? Does it follow the first pattern, last one or a union of all?
Great video, thank you. Your way of building a mental model similar to `String.replace` is a great way to think and remember it. One interesting bit about GetFromDeepObject that I played around with and found out is that if you have this: type GetFromDeepObject = T extends { a: { b: { c: infer C; } } } | { c: infer C } ? C : never You could even do something like this: type Test = GetFromDeepObject and Test will end up as string | boolean. Cool!
Any tips on how to use infer to get the type of an array item? I have types being generated from swagger This comes from the generator: type Thing = { org_key: string; role: "viewer" | "editor" | "admin"; }[] | undefined Trying to do type Blah = Thing[0] doesn't work because ofthe | undefined. Any help would be greatly appreciated!
I've seen infer used in a really cool type that replaces parts of strings in a template literal within a type. I still can't really understand how it works there even after watching this.
Hey pal, we'll put it back on sale in January once we've got the second module ready. We are planning some bonus content, but we haven't released info about it yet. If you buy it via PPP we can always upgrade you if needed.
You really are the Typescript wizard.
Indeed he is
Harry
He filters out BS and get to the point in the clearest way possible. Communication is key.
I already considered myself an advanced TypeScript dev, but a good understanding of infer was missing from my arsenal. Thank you so much for this.
The comparison with the replace-regex was awesome. Helped me alot to understand infer better! Thx Matt!
Very cleanly spoken. The mental model for 'infer' is super valuable. The comparison of 'extends' to a regex match and 'infer' to the capture group of the regex was what I was missing. It's so much easier to get my head around this after watching this video. Three cheers!
To me, the most intuitive mental model for types (in TypeScript) is that of (mathematical) sets. 'never' is simply the empty set, 'any' is the set of everything, 'string' is the infinite set of all possible strings, while any particular string (e.g. 'abc') when used as a type is simply the set consisting of a single element that is that particular string, and so on. Generics act somewhat like functions at the level of the type system (with the types listed between < and > acting as the arguments), and the 'extends' and 'infer' operators are there for type pattern matching and extraction.
Came to say this, you are very right
What's the mathematical anology to the `unknown` type?
@@Rostgnom i see it as a set that contains all the other sets
What's the 'never' type? Something you haven't put into a set yet?
@@Alastairtheduke1 just empty set with no elements
Incredible. I grok'd the official docs explanation and it helped me understand some parts of a project codebase that I was struggling with before. But after watching this video, it's absolutely crystal clear and gives me much more context for how it can be used more broadly
I was happy and satisfied with the basic pattern matching mental model of infer, then you completely blew my mind when you went even deeper into infer black magic and completely demystified it. Well done!
Underrated Master of Typescript 👌
I'm a recent "convert" to your channel. There's a lot of (let's face it) simply awful programming tutorial channels on TH-cam and it's such a rare treat to find one, like this, that's of really good quality. It's got to the stage now where you're knocking "Arjan Codes" of of my personal number 1 spot. Keep up the excellent work.
Great explanation, thanks Matt! I've been trying to find some more advanced typescript tutorials for a while now
You just made infer so easy! it was a thing that I have struggle to understand until seeing this video! Matt thanks a lot! You are a true hero and TypeScript mage!
He explained everything in a very simple and easy to understand way. thank you
I love that this is 13:37 long
Gotta go deep
the longer an explanation is the more shallow it gets!@@mattpocockuk
Liked the pairing with ‘never’ explanation, and how to think about its usage, felt like an aha moment 🎉
The regex analogue really helps paint the mental model, great video!
This is brilliantly explained. Thank you Matt! I got my employer to buy Total TypeScript for me, can't wait to dig in!
Ahh ok. I don't think I fully grasped the potential of `infer` until you brought in the bit about being able to confer constraints on it with the extends keyword. Really cool stuff
Thanks so much for this amazing video Matt!
You really helped me solidify my understanding of infer.
One thing I have been struggling with is inferring generic function parameters.
If you take this map function, T and U are inferred as unknown:
```ts
type MapFunction = (mapper: (val: T) => U, list: T[]) => U[]
type MapParameters = Parameters // [mapper: (val: unknown) => unknown, list: unknown[]]
```
This makes sense given T and U have no constraints.
If you added constraints such as `` then the mapper `val` and `list` types would be of type `string` and the mapper return type would be of type `number`
However a mapping function should remain generic and what I really want/need here is:
```ts
type MapParameters = Parameters // [mapper: (val: T) => U, list: T[]]
```
This would bind the relationship between the mapper val argument and the list type.
The relationship between the mapper val argument and the list are decoupled with the unknown type.
For arguments sake, let's say I defined PartialFunction type:
```ts
// Implementation 1
type PartialFunction1 = F extends (...args: infer A) => infer R
? (...args: Partial) => R
: never
// Implementation 2
type PartialFunction2 any> = (
...args: Partial
) => ReturnType
```
Both of these PartialFunction types are the same (or so I believe) and both create the following type for the MapFunction defined above:
```ts
type PartialMap1 = PartialFunction1
type PartialMap2 = PartialFunction2
// PartialMap1 = (mapper?: ((val: unknown) => unknown) | undefined, list?: unknown[] | undefined) => unknown[]
// PartialMap2 = (mapper?: ((val: unknown) => unknown) | undefined, list?: unknown[] | undefined) => unknown[]
```
Since the params of the generic MapFunction are being inferred as unknown and then spread onto the new function, the generic constraint between the mapper function and the list is lost.
Is there anyway that you know of to solve for this or is this a current limitation of TypeScript?
Here's a link to TypeScript playground with the types shared above:
www.typescriptlang.org/play/?#code/C4TwDgpgBAsghmAYgVwHYGNgEsD2qoC8UAPACoA0UAqgHwAUAtgpAE4BcUdAbnADYekAlIRrVKvLAGdgAgNoBdYQVFUFAKFCRYCAApwWcBhGAQWkwlD0GjJs8XhI0mXKlEB6N1FlMwrDtz4ONABrVBwAd1QlURCwyPEpGShYiNQFeTUNcGgrbD4UDGw8AEZiRFEiRCgIAA8TVAATczoAOjb9AHNJDixUADNTKABBaKhegZYoACU1KCgAfk42ls7uy3083mIhmlGZuY5UCC5TTM0cjax8pyLUACYy6rqIRubl1Y44VBAFUa+QCqcWZQd4sLocXJXLZWQzGUySMo0GhqPbGZAsVCkbKIs7ZdYsTYOYoWSHXQouUoOArOPDuTyMZimeb+AL8ZKoUKpUYpSLCAA+7IaED6vQgDQS0mZ7M5kQUUAFaCFIqODW5HLiaQy53xhIQdxJlzJNPu9gQ1NudM4PlYUrorKC6q5ImlGv5guFovFUAkkodMs18vdyrFav96iAA
Came here after seeing the infer keyword in the ReturnType generic type definition wondering what this magic was.
Thanks for the explanation.
Thanks. Perfect :) Infer was the missing piece of the puzzle for me. I sorta understood what it was doing, but the syntax was just a bit nuts with the all the "extends matching".
You might be a TypeScript wizard, not sure, but I do know you're a educational wizard! Thank you for doing these ❤️
Been working on some typesafe express middleware lately, and infer really did a number on me. This cleared things up heaps, thanks for this!
Even though I have an idea of what infer does, I still learnt something new from this (didn't know it's only applicable to conditional types)! Can't wait to dig into Total TypeScript more as you expand the content in that course!
I gotta say that your videos are very intimidating for me because I'm still at an intermediate level in JS Bootcamp but your calm style and clear explanations make me kinda understand much of what you expose in your videos once I watch them a couple of times. I can't wait to reach a level where I'm ready to buy your TS course. Thank you, great work!
I have to apply this knowledge somehow into my head now. That was great!
Thank you very much! I am a Ruby developer who is interested in TS and your videos really help me dive deep into TS.
Thank you very much for the channel Matt aka TS Wizard 🙏. Just want to mention that something about the starting explanation what is conditional type and basically constrain in TS. So I understand it as the construction 'A extends B' basically means A subset of B. From SetTheory in Maths. I saw that many people are replaying this part, including me.
Happy coding 💪
This is definitely the missing explanation for "infer" that I was needing. Great job, can't wait to see more content.
Genuinely thought I was subscribed until the shout out at the end, now I am! Great vid
i liked because you are awesome, your explanations, the energy, the pedagogie, a true wizard legend
Thank you Matt, your explanation really help me understand Typescript better. Now I'm also enjoy doing Type Chalenge because of it.
Now this. This is extremely useful.
This is exactly what I was looking for, thank you
explained brilliantly
Love your style of teaching.
Awesome explanation! Easy to digest
Video length is epic!!!
Love your videos! Sharing with my team
The object examples made it clear to me :D Thanks
I just found a gem kind of channels
great explanation
Very insightful! Thank you.
Best explanation ever. Thank you
Dude You are one of the best web-dev related channels on YT, and You only have a bit more than 20k followers... Hope Your channel will grow because You definitely deserve it! Buying Your paid course! :D
Thanks pal! Gained 11k subs in 3 weeks so hoping that changes soon!
A brilliant explanation!
You have my respect kind sir.
Amazing video! Thank you so much for this super clear and helpful explanation :)
You are so good at teaching 😍 thanks for sharing your knowledge
I liked it. Literally and metaphorically
Really, really awesome explanation!
Great explanation, thanks!
Unfortunately, despite its popularity, Typescript has very poor documentation. Very often I don't understand what Typescript can or can't do.
Thanks Matt for explaining those tricky parts.
Loved the video. You're a gem
Found you from Theo. You’re awesome Matt! ❤ 💻
You're amazing, man! Thank you!
Thanks Matt!!
Really helpful! Thank you!
The only complaint is the jumping between examples (going down then up the file), makes it harder to follow
Best explanation
Great video ❤, regards from México
I'll like to tell my friends about you as that typescript guy
Great content, Matt 😜
Could you make a video explain peer dependencies like a TypeScript Wizard?
This is gem
I am your fan typescript wizard ❤️
great content man keep it up 💪🏼
Thank you, you are amazing!
my mind exploded somehere near 5 minute, but i survived until the end and remember one crucial thing: about the only use case of infer. Did i hate the video? I made it until the end so i give a thumb up.
love how he said boolean with french style :)) funny teacher
what I learned was, do
type AntiArray = T extends (infer U)[] ? U : never;
not
type AntiArray = T extends unknown[] ? T[0] : never;
great explanation
manager: when a user clicks this button, please increase the counter in the db
web devs af:
wow amazing! thanks!
Lovely thanks
The fact that the length of this video is 13:37 🤯
Combine composition with infer keyword and you will get unimaginable solutions.
Great video Matt! Is it also possible to infer the type of function parameters? What's the correct way?
Yes!
export type Parameters = T extends (...args: infer TParameters) => any ? TParameters : never;
Just another quite not so easy thing made simple. infer is really useful and super fun!
Great pedagogy
Request: Please plan your examples ahead of time. After making each change, take some time to explain it. No need to rush. Thanks for your videos. They are super helpful.
What happens when you have a union of infers and the object being inferred from matches more than one pattern? Does it follow the first pattern, last one or a union of all?
Good God, I've been declaring so many different generic arguments with default values when I should have been using infer
Why not use regex backreferences ($1) here as an analogy?
I didn't understand anything. 😅😅 what are the prerequisites to understand this?
Great video, thank you. Your way of building a mental model similar to `String.replace` is a great way to think and remember it.
One interesting bit about GetFromDeepObject that I played around with and found out is that if you have this:
type GetFromDeepObject = T extends
{
a: {
b: {
c: infer C;
}
}
} | {
c: infer C
} ? C : never
You could even do something like this:
type Test = GetFromDeepObject
and Test will end up as string | boolean. Cool!
Any tips on how to use infer to get the type of an array item?
I have types being generated from swagger
This comes from the generator:
type Thing = {
org_key: string;
role: "viewer" | "editor" | "admin";
}[] | undefined
Trying to do type Blah = Thing[0] doesn't work because ofthe | undefined.
Any help would be greatly appreciated!
type Blah = NonNullable;
Hello TS Wizard!
My man
Thanks a lot! That's easy)
I believe never should be nothing and unknown should be something in typescript.
I might be wrong but is infer basically acting like a tag that says tells ts to pay attention to something. Which we can reuse for more things?
I've seen infer used in a really cool type that replaces parts of strings in a template literal within a type. I still can't really understand how it works there even after watching this.
The type looks like this:
export type Replace = T extends `${infer L}${S}${infer R}` ?
Replace : `${A}${T}`
This went by a little fast. But very interesting!!!
Hi Matt, when will the course be available for purchase? What bonuses do I lose if I use the regional price?
Hey pal, we'll put it back on sale in January once we've got the second module ready. We are planning some bonus content, but we haven't released info about it yet. If you buy it via PPP we can always upgrade you if needed.
@@mattpocockuk sounds good, thanks for the answer
Que bien explicado
What are you??!! A wiza.... Ah okay!! Right!!
Can you tell me the font-family you used here ?
Video duration is leet!
So infer keyword allows you to grab the type of the thing that was passed and use it later as if it’s a variable.
Infer is like extracting a type as a variable. As soon as I understand that, Infer was easy.
it took me a most of this video to realise the ternary statement was for the extends, not the infer. Ah hah.