Infer is easier than you think

Sdílet
Vložit
  • čas přidán 26. 06. 2024
  • 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
  • Krátké a kreslené filmy

Komentáře • 162

  • @nyambe
    @nyambe Před rokem +118

    You really are the Typescript wizard.

  • @jeralm
    @jeralm Před rokem +76

    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 Před rokem +35

    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.

    • @user-hd7ju4wu4b
      @user-hd7ju4wu4b Před 10 měsíci +2

      Came to say this, you are very right

    • @Rostgnom
      @Rostgnom Před 9 měsíci +3

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

    • @user-hd7ju4wu4b
      @user-hd7ju4wu4b Před 9 měsíci +3

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

    • @Alastairtheduke1
      @Alastairtheduke1 Před 9 měsíci

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

    • @user-hd7ju4wu4b
      @user-hd7ju4wu4b Před 9 měsíci +1

      @@Alastairtheduke1 just empty set with no elements

  • @dueft4479
    @dueft4479 Před rokem +20

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

  • @jasonstewart7983
    @jasonstewart7983 Před rokem +11

    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 Před rokem +4

    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 Před rokem +11

    I love that this is 13:37 long

    • @mattpocockuk
      @mattpocockuk  Před rokem +8

      Gotta go deep

    • @hansschenker
      @hansschenker Před 5 měsíci

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

  • @MrMcFyfey
    @MrMcFyfey Před rokem +7

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

  • @edgeeffect
    @edgeeffect Před rokem +2

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

    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 Před rokem +2

    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 Před rokem +1

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

  • @EpicNicks
    @EpicNicks Před 3 měsíci

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

  • @SimonCoulton
    @SimonCoulton Před rokem

    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 Před rokem

    Love your style of teaching.

  • @BlueeyesChineseguy
    @BlueeyesChineseguy Před rokem +1

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

  • @wiskasIO
    @wiskasIO Před 11 měsíci

    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
    @codecleric4972 Před 3 měsíci

    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
    @birrafondaio Před 11 měsíci

    Underrated Master of Typescript 👌

  • @Spytie1
    @Spytie1 Před rokem

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

  • @Timjstewart
    @Timjstewart Před 8 měsíci

    Very insightful! Thank you.

  • @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 Před rokem

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

  • @adiutama
    @adiutama Před rokem

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

  • @denischudinov2379
    @denischudinov2379 Před rokem

    A brilliant explanation!

  • @WesleyHandy
    @WesleyHandy Před rokem

    Love your videos! Sharing with my team

  • @ponssuarez
    @ponssuarez Před rokem

    Thanks Matt!!

  • @johnpeterson8493
    @johnpeterson8493 Před rokem

    Loved the video. You're a gem

  • @peachesfruitella
    @peachesfruitella Před rokem +2

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

  • @elielberra2867
    @elielberra2867 Před 3 měsíci

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

  • @EddyVinck
    @EddyVinck Před rokem +1

    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 Před rokem

    This is exactly what I was looking for, thank you

  • @user-cp7fl1jl5e
    @user-cp7fl1jl5e Před rokem

    Awesome explanation! Easy to digest

  • @TDefton
    @TDefton Před rokem

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

  • @leotravel85
    @leotravel85 Před rokem

    Best explanation ever. Thank you

  • @dawid_dahl
    @dawid_dahl Před 6 měsíci

    Great explanation, thanks!

  • @GLawSomnia
    @GLawSomnia Před rokem

    The object examples made it clear to me :D Thanks

  • @vladimirmryscuk8409
    @vladimirmryscuk8409 Před rokem

    Great content, Matt 😜

  • @kasperaamodt
    @kasperaamodt Před rokem

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

  • @dasten123
    @dasten123 Před rokem

    Really, really awesome explanation!

  • @matej2714
    @matej2714 Před rokem

    great content man keep it up 💪🏼

  • @rafaeltab
    @rafaeltab Před rokem +1

    Now this. This is extremely useful.

  • @filipkud1
    @filipkud1 Před rokem

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

  • @HichamKazan
    @HichamKazan Před rokem

    explained brilliantly

  • @anush8
    @anush8 Před rokem

    You have my respect kind sir.

  • @ivaylopetrov9956
    @ivaylopetrov9956 Před 7 měsíci

    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

    Thank you, you are amazing!

  • @betoreyes3564
    @betoreyes3564 Před 6 měsíci

    Great video ❤, regards from México

  • @cristiantorres853
    @cristiantorres853 Před rokem

    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 Před rokem

    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 Před rokem +2

    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 Před rokem +1

    great explanation

  • @AhsanKhan-eb2zb
    @AhsanKhan-eb2zb Před rokem

    great explanation

  • @ljuglampa
    @ljuglampa Před rokem +41

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

  • @bartek...
    @bartek... Před rokem

    Video length is epic!!!

  • @grzesieksgs
    @grzesieksgs Před rokem +1

    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  Před rokem

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

  • @aldojordanchoque7512
    @aldojordanchoque7512 Před 4 měsíci

    Best explanation

  • @HHJoshHH
    @HHJoshHH Před 5 měsíci

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

  • @andsheterliak
    @andsheterliak Před rokem +4

    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 Před rokem

    I just found a gem kind of channels

  • @henrym5034
    @henrym5034 Před 6 měsíci

    This is gem

  • @colorofadog
    @colorofadog Před 5 měsíci

    wow amazing! thanks!

  • @dawidwraga
    @dawidwraga Před rokem

    Lovely thanks

  • @nabinsaud4688
    @nabinsaud4688 Před rokem

    I am your fan typescript wizard ❤️

  • @jcollins519
    @jcollins519 Před rokem

    I liked it. Literally and metaphorically

  • @-anonim-3008
    @-anonim-3008 Před 26 dny

    Thanks a lot! That's easy)

  • @CompanionCube
    @CompanionCube Před 4 měsíci

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

  • @btiwari-games5279
    @btiwari-games5279 Před rokem

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

  • @ofira8328
    @ofira8328 Před rokem

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

  • @mauriciopereyra3339
    @mauriciopereyra3339 Před 10 měsíci

    Que bien explicado

  • @ajgubi19
    @ajgubi19 Před rokem +1

    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 Před rokem

    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 Před rokem

    Great pedagogy

  • @clarkdnro
    @clarkdnro Před rokem

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

  • @EdersonBerti
    @EdersonBerti Před rokem

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

  • @KoenVerheyen
    @KoenVerheyen Před rokem +1

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

  • @EthanStandel
    @EthanStandel Před rokem

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

  • @hugodsa89
    @hugodsa89 Před rokem

    My man

  • @culi7068
    @culi7068 Před rokem +1

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

  • @lukaszklejszta2736
    @lukaszklejszta2736 Před rokem

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

  • @_timestamp
    @_timestamp Před rokem

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

    • @mattpocockuk
      @mattpocockuk  Před rokem +1

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

  • @mateussarmento7692
    @mateussarmento7692 Před měsícem

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

  • @Atmos41
    @Atmos41 Před 3 měsíci

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

  • @novailoveyou
    @novailoveyou Před rokem

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

  • @TypeScriptTV
    @TypeScriptTV Před rokem

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

  • @ya4dang1
    @ya4dang1 Před 9 měsíci

    Hello TS Wizard!

  • @alvesvaren
    @alvesvaren Před rokem

    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 Před rokem

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

  • @aleksander5298
    @aleksander5298 Před rokem

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

    • @mattpocockuk
      @mattpocockuk  Před rokem +1

      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 Před rokem

      @@mattpocockuk sounds good, thanks for the answer

  • @HappyCheeryChap
    @HappyCheeryChap Před rokem

    Video duration is leet!

  • @adtc
    @adtc Před 9 měsíci

    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 Před rokem

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

  • @elmalleable
    @elmalleable Před 7 měsíci

    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 Před rokem +1

    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!

  • @BlackxesWasTaken
    @BlackxesWasTaken Před 9 měsíci

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

  • @frandrumming
    @frandrumming Před rokem

    well.. subscribed :D

  • @vkiperman
    @vkiperman Před 8 měsíci

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

  • @flydexo
    @flydexo Před rokem +1

    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 ?

  • @arturamorfati
    @arturamorfati Před rokem

    i should like it and i do like it🖤

  • @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 Před rokem

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