Infer is easier than you think

Фильм және анимация

TypeScript's infer keyword is MUCH narrower, much less widely used than you think it is. It has ONE use case, and we cover it in a ridiculous amount of depth here.
Become a TypeScript Wizard with Matt's upcoming TypeScript Course:
www.totaltypescript.com/
Follow Matt on Twitter
/ mattpocockuk

Пікірлер: 162

  • @nyambe
    @nyambe Жыл бұрын

    You really are the Typescript wizard.

  • @marsinearth1264

    @marsinearth1264

    Жыл бұрын

    Indeed he is

  • @vikingthedude

    @vikingthedude

    Жыл бұрын

    Harry

  • @johnyepthomi892

    @johnyepthomi892

    11 ай бұрын

    He filters out BS and get to the point in the clearest way possible. Communication is key.

  • @jeralm
    @jeralm Жыл бұрын

    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.

  • @ivan_dramaliev
    @ivan_dramaliev Жыл бұрын

    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 acting as the arguments), and the 'extends' and 'infer' operators are there for type pattern matching and extraction.

  • @user-hd7ju4wu4b

    @user-hd7ju4wu4b

    10 ай бұрын

    Came to say this, you are very right

  • @Rostgnom

    @Rostgnom

    9 ай бұрын

    What's the mathematical anology to the `unknown` type?

  • @user-hd7ju4wu4b

    @user-hd7ju4wu4b

    9 ай бұрын

    @@Rostgnom i see it as a set that contains all the other sets

  • @Alastairtheduke1

    @Alastairtheduke1

    9 ай бұрын

    What's the 'never' type? Something you haven't put into a set yet?

  • @user-hd7ju4wu4b

    @user-hd7ju4wu4b

    9 ай бұрын

    @@Alastairtheduke1 just empty set with no elements

  • @dueft4479
    @dueft4479 Жыл бұрын

    The comparison with the replace-regex was awesome. Helped me alot to understand infer better! Thx Matt!

  • @jasonstewart7983
    @jasonstewart7983 Жыл бұрын

    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!

  • @prcodes3479
    @prcodes3479 Жыл бұрын

    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!

  • @WilderPoo
    @WilderPoo Жыл бұрын

    I love that this is 13:37 long

  • @mattpocockuk

    @mattpocockuk

    Жыл бұрын

    Gotta go deep

  • @hansschenker

    @hansschenker

    5 ай бұрын

    the longer an explanation is the more shallow it gets!@@mattpocockuk

  • @MrMcFyfey
    @MrMcFyfey Жыл бұрын

    Great explanation, thanks Matt! I've been trying to find some more advanced typescript tutorials for a while now

  • @edgeeffect
    @edgeeffect Жыл бұрын

    I'm a recent "convert" to your channel. There's a lot of (let's face it) simply awful programming tutorial channels on KZread 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.

  • @samerkayali4525
    @samerkayali4525 Жыл бұрын

    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!

  • @darrenvong9404
    @darrenvong9404 Жыл бұрын

    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!

  • @user-mf1ft6iz4l
    @user-mf1ft6iz4l Жыл бұрын

    He explained everything in a very simple and easy to understand way. thank you

  • @EpicNicks
    @EpicNicks3 ай бұрын

    Came here after seeing the infer keyword in the ReturnType generic type definition wondering what this magic was. Thanks for the explanation.

  • @SimonCoulton
    @SimonCoulton Жыл бұрын

    Been working on some typesafe express middleware lately, and infer really did a number on me. This cleared things up heaps, thanks for this!

  • @GustavoDiaz93
    @GustavoDiaz93 Жыл бұрын

    Love your style of teaching.

  • @BlueeyesChineseguy
    @BlueeyesChineseguy Жыл бұрын

    The regex analogue really helps paint the mental model, great video!

  • @wiskasIO
    @wiskasIO11 ай бұрын

    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!

  • @codecleric4972
    @codecleric49723 ай бұрын

    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

  • @birrafondaio
    @birrafondaio11 ай бұрын

    Underrated Master of Typescript 👌

  • @Spytie1
    @Spytie1 Жыл бұрын

    i liked because you are awesome, your explanations, the energy, the pedagogie, a true wizard legend

  • @Timjstewart
    @Timjstewart8 ай бұрын

    Very insightful! Thank you.

  • @rostislavzhuravsky3342
    @rostislavzhuravsky3342 Жыл бұрын

    Thank you very much! I am a Ruby developer who is interested in TS and your videos really help me dive deep into TS.

  • @samautrey3834
    @samautrey3834 Жыл бұрын

    This is definitely the missing explanation for "infer" that I was needing. Great job, can't wait to see more content.

  • @adiutama
    @adiutama Жыл бұрын

    Thank you Matt, your explanation really help me understand Typescript better. Now I'm also enjoy doing Type Chalenge because of it.

  • @denischudinov2379
    @denischudinov2379 Жыл бұрын

    A brilliant explanation!

  • @WesleyHandy
    @WesleyHandy Жыл бұрын

    Love your videos! Sharing with my team

  • @ponssuarez
    @ponssuarez Жыл бұрын

    Thanks Matt!!

  • @johnpeterson8493
    @johnpeterson8493 Жыл бұрын

    Loved the video. You're a gem

  • @peachesfruitella
    @peachesfruitella Жыл бұрын

    Liked the pairing with ‘never’ explanation, and how to think about its usage, felt like an aha moment 🎉

  • @elielberra2867
    @elielberra28673 ай бұрын

    Amazing video! Thank you so much for this super clear and helpful explanation :)

  • @EddyVinck
    @EddyVinck Жыл бұрын

    This is brilliantly explained. Thank you Matt! I got my employer to buy Total TypeScript for me, can't wait to dig in!

  • @davidzarandi9287
    @davidzarandi9287 Жыл бұрын

    This is exactly what I was looking for, thank you

  • @user-cp7fl1jl5e
    @user-cp7fl1jl5e Жыл бұрын

    Awesome explanation! Easy to digest

  • @TDefton
    @TDefton Жыл бұрын

    You are so good at teaching 😍 thanks for sharing your knowledge

  • @leotravel85
    @leotravel85 Жыл бұрын

    Best explanation ever. Thank you

  • @dawid_dahl
    @dawid_dahl6 ай бұрын

    Great explanation, thanks!

  • @GLawSomnia
    @GLawSomnia Жыл бұрын

    The object examples made it clear to me :D Thanks

  • @vladimirmryscuk8409
    @vladimirmryscuk8409 Жыл бұрын

    Great content, Matt 😜

  • @kasperaamodt
    @kasperaamodt Жыл бұрын

    Genuinely thought I was subscribed until the shout out at the end, now I am! Great vid

  • @dasten123
    @dasten123 Жыл бұрын

    Really, really awesome explanation!

  • @matej2714
    @matej2714 Жыл бұрын

    great content man keep it up 💪🏼

  • @rafaeltab
    @rafaeltab Жыл бұрын

    Now this. This is extremely useful.

  • @HichamKazan
    @HichamKazan Жыл бұрын

    explained brilliantly

  • @filipkud1
    @filipkud1 Жыл бұрын

    I have to apply this knowledge somehow into my head now. That was great!

  • @anush8
    @anush8 Жыл бұрын

    You have my respect kind sir.

  • @ivaylopetrov9956
    @ivaylopetrov99567 ай бұрын

    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 💪

  • @bartoszgoebiowski1538
    @bartoszgoebiowski1538 Жыл бұрын

    Thank you, you are amazing!

  • @betoreyes3564
    @betoreyes35646 ай бұрын

    Great video ❤, regards from México

  • @cristiantorres853
    @cristiantorres853 Жыл бұрын

    I totally love it! finally, I understand these crazy extends I was thinking of it as a extending some parent class or something It was driving me crazy

  • @culi7068
    @culi7068 Жыл бұрын

    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

  • @NedCollyer
    @NedCollyer Жыл бұрын

    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".

  • @FunctionGermany
    @FunctionGermany Жыл бұрын

    great explanation

  • @AhsanKhan-eb2zb
    @AhsanKhan-eb2zb Жыл бұрын

    great explanation

  • @ljuglampa
    @ljuglampa Жыл бұрын

    You might be a TypeScript wizard, not sure, but I do know you're a educational wizard! Thank you for doing these ❤️

  • @bartek...
    @bartek... Жыл бұрын

    Video length is epic!!!

  • @grzesieksgs
    @grzesieksgs Жыл бұрын

    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

  • @mattpocockuk

    @mattpocockuk

    Жыл бұрын

    Thanks pal! Gained 11k subs in 3 weeks so hoping that changes soon!

  • @aldojordanchoque7512
    @aldojordanchoque75124 ай бұрын

    Best explanation

  • @HHJoshHH
    @HHJoshHH5 ай бұрын

    Found you from Theo. You’re awesome Matt! ❤ 💻

  • @andsheterliak
    @andsheterliak Жыл бұрын

    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.

  • @NoOne-ev3jn
    @NoOne-ev3jn Жыл бұрын

    I just found a gem kind of channels

  • @henrym5034
    @henrym50346 ай бұрын

    This is gem

  • @colorofadog
    @colorofadog5 ай бұрын

    wow amazing! thanks!

  • @dawidwraga
    @dawidwraga Жыл бұрын

    Lovely thanks

  • @nabinsaud4688
    @nabinsaud4688 Жыл бұрын

    I am your fan typescript wizard ❤️

  • @jcollins519
    @jcollins519 Жыл бұрын

    I liked it. Literally and metaphorically

  • @-anonim-3008
    @-anonim-300825 күн бұрын

    Thanks a lot! That's easy)

  • @CompanionCube
    @CompanionCube4 ай бұрын

    manager: when a user clicks this button, please increase the counter in the db web devs af:

  • @btiwari-games5279
    @btiwari-games5279 Жыл бұрын

    I'll like to tell my friends about you as that typescript guy

  • @ofira8328
    @ofira8328 Жыл бұрын

    Really helpful! Thank you! The only complaint is the jumping between examples (going down then up the file), makes it harder to follow

  • @mauriciopereyra3339
    @mauriciopereyra333910 ай бұрын

    Que bien explicado

  • @ajgubi19
    @ajgubi19 Жыл бұрын

    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.

  • @frontend3409
    @frontend3409 Жыл бұрын

    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.

  • @KevinCourbet
    @KevinCourbet Жыл бұрын

    Great pedagogy

  • @clarkdnro
    @clarkdnro Жыл бұрын

    love how he said boolean with french style :)) funny teacher

  • @EdersonBerti
    @EdersonBerti Жыл бұрын

    Could you make a video explain peer dependencies like a TypeScript Wizard?

  • @KoenVerheyen
    @KoenVerheyen Жыл бұрын

    Why not use regex backreferences ($1) here as an analogy?

  • @EthanStandel
    @EthanStandel Жыл бұрын

    Good God, I've been declaring so many different generic arguments with default values when I should have been using infer

  • @hugodsa89
    @hugodsa89 Жыл бұрын

    My man

  • @culi7068
    @culi7068 Жыл бұрын

    what I learned was, do type AntiArray = T extends (infer U)[] ? U : never; not type AntiArray = T extends unknown[] ? T[0] : never;

  • @lukaszklejszta2736
    @lukaszklejszta2736 Жыл бұрын

    Combine composition with infer keyword and you will get unimaginable solutions.

  • @_timestamp
    @_timestamp Жыл бұрын

    Great video Matt! Is it also possible to infer the type of function parameters? What's the correct way?

  • @mattpocockuk

    @mattpocockuk

    Жыл бұрын

    Yes! export type Parameters = T extends (...args: infer TParameters) => any ? TParameters : never;

  • @mateussarmento7692
    @mateussarmento7692Ай бұрын

    I believe never should be nothing and unknown should be something in typescript.

  • @Atmos41
    @Atmos413 ай бұрын

    Infer is like extracting a type as a variable. As soon as I understand that, Infer was easy.

  • @novailoveyou
    @novailoveyou Жыл бұрын

    Just another quite not so easy thing made simple. infer is really useful and super fun!

  • @TypeScriptTV
    @TypeScriptTV Жыл бұрын

    The fact that the length of this video is 13:37 🤯

  • @ya4dang1
    @ya4dang19 ай бұрын

    Hello TS Wizard!

  • @alvesvaren
    @alvesvaren Жыл бұрын

    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.

  • @alvesvaren

    @alvesvaren

    Жыл бұрын

    The type looks like this: export type Replace = T extends `${infer L}${S}${infer R}` ? Replace : `${A}${T}`

  • @aleksander5298
    @aleksander5298 Жыл бұрын

    Hi Matt, when will the course be available for purchase? What bonuses do I lose if I use the regional price?

  • @mattpocockuk

    @mattpocockuk

    Жыл бұрын

    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.

  • @aleksander5298

    @aleksander5298

    Жыл бұрын

    @@mattpocockuk sounds good, thanks for the answer

  • @HappyCheeryChap
    @HappyCheeryChap Жыл бұрын

    Video duration is leet!

  • @adtc
    @adtc9 ай бұрын

    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?

  • @ashleyjbartlett
    @ashleyjbartlett Жыл бұрын

    it took me a most of this video to realise the ternary statement was for the extends, not the infer. Ah hah.

  • @elmalleable
    @elmalleable7 ай бұрын

    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?

  • @justMeJustBri
    @justMeJustBri Жыл бұрын

    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!

  • @mattpocockuk

    @mattpocockuk

    Жыл бұрын

    type Blah = NonNullable;

  • @BlackxesWasTaken
    @BlackxesWasTaken9 ай бұрын

    Can you tell me the font-family you used here ?

  • @frandrumming
    @frandrumming Жыл бұрын

    well.. subscribed :D

  • @vkiperman
    @vkiperman8 ай бұрын

    This went by a little fast. But very interesting!!!

  • @flydexo
    @flydexo Жыл бұрын

    Hi, my request may be peculiar but, could you make a video where you show how typescript utility types are used in real life situations because the only time I need to use them is within type-challenges (kinda like a bubble). So is it only me or many people feel this ?

  • @lukaszklejszta2736

    @lukaszklejszta2736

    Жыл бұрын

    Which utility types?

  • @arturamorfati
    @arturamorfati Жыл бұрын

    i should like it and i do like it🖤

  • @aprilmintacpineda2713
    @aprilmintacpineda2713 Жыл бұрын

    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.

  • @sidisting1381
    @sidisting1381 Жыл бұрын

    I didn't understand anything. 😅😅 what are the prerequisites to understand this?

Келесі