8 TypeScript Tips To Expand Your Mind (and improve your code)

00:00 Intro
00:33 ReactNode vs Element
01:26 using for Unit Tests
03:08 Aliasing any to TODO
03:47 Generic functions vs any
04:56 Const Type Parameters
06:11 NoInfer
08:06 (typeof array)[number]
09:09 ElementRef
My PR's to React: github.com/DefinitelyTyped/De...
Become a TypeScript Wizard with my free beginners TypeScript Course:
www.totaltypescript.com/tutor...
Follow Matt on Twitter
/ mattpocockuk
Join the Discord:
mattpocock.com/discord

[@mattpocockuk]

The analytics on this video are crazy - most of you are coming from outside KZbin! So, I'd love to know - how did you find this video?

[@quangminhtran9968]

an admin share the post to Angular community im verry appreciate it !

[@agmmtoo]

Chrome homepage suggestion.

[@jrgenr]

Google app homepage suggestion

[@starsonahill5310]

Google News

[@sleepwiththefishes]

Shared by a colleague

[@ReggieJohnson87]

Wake up honey, a new utility type just dropped!

[@rafael.aloizio1769]

There he 1000 times

[@fkhan]

I woke up

[@joaodias1023]

Hahaha ​@@rafael.aloizio1769o Lá Ele em inglês fica estranho 😂

[@rafael.aloizio1769]

@@joaodias1023 eu tentei pelo menos kkkkkkkkkkk, e eu nem sei como falar, foi direto do reverso kkkk, se tu souber uma tradução melhor... Lança pra gente hehe

[@rahulspoudel]

😂😂

[@ernestofuentes9333]

Congratulations for your baby Matt. Now your life is going get another level. Thanks for de video.

[@Billiam112]

@5:40, the Scottish(?) accent caught me off guard. 😀

[@ScriptCoded]

Was just about to go here commenting just that 😄

[@theseangle]

That's like a whole different person lol

[@MartinKapal]

Was he impersonating someone specific?

[@DemanaJaire]

You might not know, but Matt has a linguistic channel about English. He hasn't uploaded for years, but I think it's still there.

[@SkyyySi]

Congratulations for your new wizard apprentice 😊 Btw I personally like this format, since having a little more context like this is nice over "single sentence + code.png"

[@devdribbles]

100% agree with this! Seeing the NoInfer example helped flesh out the related social media posts I saw earlier.

[@Azoraqua]

Congratulations with the little one!

[@DarkStoorM_]

*New Wizard has joined the game.*

[@JuanMoisesTorrijos]

Congratulations on the baby. Since 90% of my social media consumption is KZbin, it's a good idea to share your knowledge on other SM platforms here.

[@RNDev666]

love these videos! its kind of difficult finding the sweet spot with ts content, its usually either very basic or very advanced, but this video really hits it. great job!

[@hartmut-a9dt]

I like that Your videos are short. Very cool & helpful!

[@cjcheshire]

Really cool, very happy for more of these. Especially as you’ve got other priorities to focus on too :)

[@Beni9819]

More advanced React/TypeScript channels are so hard to find. This is incredible. Keep it up!

[@thisweekinreact]

Great tips as always! The using for mocks is going to be so convenient!

[@chrisstroud1915]

These were great, I'd definitely love to see more videos like this!

[@ronildo]

Matt I really like this format by the way and congrats on your baby 🙏

[@rojka-_-]

Congrats man, best youtuber on typescript.

[@Rebel101]

Amazing tips! Thank you Matt!

[@lachezarraychev1391]

Congrats on the baby! Wish you all the best, may the future wizard be healthy and bring you a lot of joy and happiness!

[@JustinSBarrett]

Definitely like this format! I'm a relatively new subscriber, and also new to TS, so any little nuggets I can find-even those I might not fully understand now-are most welcome.

[@FurryDanOriginal]

I used to prefer the following, rather than declaring a NoInfer type as it naturally resolves the problem, rather than trying to work around it: declare function createFSM(config: { initial: TDependentState, states: TState[] }): TState; Though, now that NoInfer is officially integrated into the language, I might start using it anyways.

[@KekskruemelReloaded]

Exactly what I wanted to say as well. In this particular scenario, using NoInfer feels like a smell. But I'm sure there are other, more useful use cases for it.

[@sp3ctum]

For some reason this just clicked for me. Had a bit of trouble understanding the other example in the video.

[@sp3ctum]

Ok I read the beta release notes for this feature. Looks like the justification is that TDependentState is created only to work around this limitation. So I guess it's semantically clearer not to declare a new generic type parameter.

[@Caldaron]

love the layouting, you fully vertical on the side, looks great ;-)

[@mantovani96]

Love it! I’ve been too busy lately, so I’ve missed some things on other social medias.

[@rushikeshg25]

Congrats Matt!

[@ankitputhran]

Congratulations Matt !!!

[@januszjanus813]

Horizontal view is dope, kudos 😃

[@dr-Jonas-Birch]

andy, thank you. yes i moved it to my advanced typescript playlist

[@abbaskareem5281]

last tip is GOAT 🔥Thank you sir

[@me_rinta]

Oh wow, didn’t know about `const T` stuff! Thanks for the tip!

[@yaiirable]

Reusing content across platforms makes so much sense! Why would you not want to get the most out of the work you are putting in!?

[@ronitgurjar5747]

Ohhhh thanks for this!🔥🔥🔥🔥

[@kedardinde]

Congratulations Matt

[@p10tube]

hello, I definitely want to see more of this :)

[@jonathanbeaumont8878]

Congrats!! 🥳

[@krome305]

Congrats Matt! make sure to teach him typescript well :D

[@jeromealtariba7339]

thks a lot for this video. NoInfer is clearly a game changer. what a powerfull utility type !

[@markilabot14]

Conngratulations Matt!!!!

[@piyushaggarwal5207]

ElementRef looks awesome. I will try that.

[@abdhelal]

Congratulations 🎉 for little wizard 😊

[@rafaveggi]

Congratulations!!

[@biswaranjan6342]

Thanks for this informative video....

[@pythagoras281]

type TODO = any, such an elegant way to increase technical debt 😄

[@theseangle]

But at least it's easily locatable debt. Almost like an installment plan rather than a debt

[@_PCode_]

Congrats!

[@martiananomaly]

Congratulations on the kid, Matt 🎉

[@ColinRichardson]

Nice Video.. Yeah, the example I was showing the the other day is pretty much exactly the same as what you had except backwards.. The array was not the source of truth, but the possible initials were.. :D Just with extra steps since I went through the Vue generic component types also :D It was nice to see NoInfer "just working" with it, with no additional complexity.

[@diegodoumecq5144]

Wow, I've had to resort to multiple generics just to solve the inference problem (basically have one generic extend from the other). It worked but I hated that solution and this NoInfer is way more elegant. Bravo!

[@atmosph]

wish the best luck for the little one! ^^

[@JeremyKolassa]

I've always loved your channel, Matt, but I especially love it now that you've had the child. Having the child yourself, and not putting your wife through those nine months, is such a noble sacrifice. We don't see that very often these days. 😜 But seriously, congrats!

[@Glinkis]

Obviously he used nine women to get it down to a single month, just like how companies throw developers on a project to get it out faster. Makes perfect sense.

[@MichiganTypeScript]

congrats on the baby!

[@DimitarDanailov]

@mattpocockuk thank you very much for the content. Do you think is possible tweets to be added in the description ?

[@SR-zi1pw]

Congratulations 🎉

[@nofacee94]

You are the best.

[@zwanz0r]

Congrats dad! 🎉

[@cn-ml]

I actually didnt know the const type parameters tip. This could have saved me some trouble. I attempted to do this exact thing, but i annotated every function call with doSomething(["hello", "world"] as const) instead of using the parameter.

[@vrildox-to7ir]

Congrats

[@Larry21924]

This is sheer brilliance. I had the pleasure of reading something similar, and it was sheer brilliance. "Unlocking the Brain's Full Potential" by Alexander Sterling

[@RamonBalthazar]

We're less important than the baby and we understand it! Congrats and good luck with fatherhood!

[@deatho0ne587]

Like most of these and congrats. Hmm, the type TODO = any; it may be great for library code. But have a doubt in most Prod code it is needed since could just search for any and which should not be in most cases.

[@palrevesz8629]

Congrats on the baby ;-)

[@codeChuck]

Finally, the man lives to his name and is applying the right tools for the job :) Congrats on a child! Well done! :D

[@ChimbzZ]

Not sure I understand the semantics NoInfer type. Can anyone explain the syntax please?

[@AmrouBouaziz]

The `NoInfer` is so cool! can you explain how the community solution works. It might be interesting to use the same techniques for another situation

[@dr-Jonas-Birch]

You create an array with one member and then you index into that array's member which returns the original input value. The computation makes it hard for TS to infer. -dr Jonas Birch, new ts wizard

[@AmrouBouaziz]

@@dr-Jonas-Birch that makes sense! Thanks wizard 🪄

[@timmeehan2365]

That const generic is fire, I had never heard about it before. Always had to add "as const" in the params to achieve that narrow typing :/

[@artyomtaranenko2267]

Yesterday I have a problem: why TS (or maybe declare types react) dosen't care about what i pass to useRef for input HTMLInputElement or HTMLDivElement, no any error, but if I try to pass HTMLAnchorElement I got an a error. Someone can explain me, what I do wrong?)

[@EvanEdrok]

How early do you plan on teaching your new little one coding?? 😊 Congrats 🎉

[@dealloc]

When moving from JS to TS when TS was almost fresh out the oven, we'd have an alias type called $TSFixMe for 'any'. That way it also didn't conflict with actual TODO comments :P

[@adtc]

That "NoInfer" thing... where was it several days ago when I badly needed it?! Now I don't need it anymore, and I don't even remember where I did... lol Edit: I remember now, it was the props of a component, where TS was inferring T from the wrong prop. It's exactly what it was designed for!

[@Learnbynet]

3:00 i prefer use `type Any = any` this allow me to track all *any in my app and try to fix if ts allow it, sometime no, ts is not perfect.

[@AK-vx4dy]

Congratulations to mother, child & father :) Looking at my practice, time will be less and less as kid grow, at least for few years.

[@Dude29]

Post the link in the description to the PR you opened on the JSX repo

[@mattpocockuk]

Done!

[@Dude29]

🙏@@mattpocockuk

[@hasankahya589]

Wow

[@libenhailu5193]

We want more...

[@blizzy78]

can you say "purple burglar alarm"? asking for a friend

[@jaydeepkarena]

Are you reading effective TypeScript?

[@mattpocockuk]

Yes, it's good! New edition coming this year I think.

[@edgeeffect]

I like how you've got a tip to ignore `any` because you should NEVER use `any`.... and then another tip that makes good use of... erm... `any`. ;)

[@mattpocockuk]

shhhhhh

[@poki6041]

Alien code XD

[@6644guilherme]

I still cant compreheend infer now theyve made noInfer x.x

[@gidmanone]

The Typescript community is slowly but unknowingly creating another (ugly) javascript monster.

[@mattpocockuk]

That's no way to talk about my child

[@gidmanone]

@@mattpocockuk I'm sorry Daddy😃. but I'm sure you agree with me that they building up complexity, solving one problem with another. Looks like we are back in Javascript land (from the other end🥲)

[@rikithikatakizu2]

ComponentProps/ComponentPropsWithoutRef but at the same time ElementRef. Why not ComponentRef??? Agh, React....

[@TankorSmash]

5:41 what in the world

[@penewoldahh]

Have you ever heard of typescript booleanish?

[@mattpocockuk]

No!

[@Killputin777]

you not explaining stuff. only showing

[@mattpocockuk]

What felt confusing? What left you with questions?

[@aramp]

put your insta in the description Matt

[@QwDragon]

Congratulations! I've found this version: type NoInfer = T extends infer U ? U : never; Is it better or worth then type NoInfer = [T][T extends any ? 0 : never]; ? Anyway, ts implemented it as intristic, so I think there were some reasons for that?

[@heavierthanlight7173]

Congrats Matt!