Advanced TypeScript: Let’s Learn Generics!

If you've never used typescript generics, it can be pretty intimidating. In this episode, Matt Pocock will teach us this advanced TypeScript concept.

00:00:00 - Welcome
00:00:44 - Who is Matt Pocock?
00:05:41 - Today’s topic is…
00:07:45 - Why would someone need Advanced TypeScript?
00:12:59 - What is a generic in TypeScript?
00:14:29 - Are generics a workaround for TypeScript type lock in?
00:17:37 - Where to begin with Advanced TypeScript
00:29:10 - When it clicks for Jason
00:32:36 - Number two is a banger
00:45:40 - Problem number 3
00:53:16 - Problem number four
01:09:14 - Problem number 8

Links

This episode was sponsored by:

Credits:

[yumcaxion]

This was really useful for me! I've been using TypeScript in a medium-sized React app I'm working on and have wondered a number of times if more advanced knowledge (including a better understanding of generics) would help me make certain things more extensible. I think this helped put in perspective where some of these patterns might actually be useful and where it might be better to simplify my usage instead of trying to get overly clever. Seeing some of the syntax livecoded also helped cement a few things I might have seen once or twice but that just hadn't clicked for some reason.

[koko]

Nice to have M. Pocock on the podcast. It's crazy to see this man had his 1st junior dev job 4years ago \o/

[bigmistqke]

The musician to dev pipeline. Interesting. I make music too and w me the coding process and music making process are often intertwined: coding while listening to a beat on an endless loop, from time to time taking a break from code and producing a little and back and forward. Is a lot of fun.

[hugodsa]

Honestly a "Generic" is just a "Yet to be defined" type, that obtains its' definition at the moment of use. Its' definition is derived on the moment of consumption through the logic of its conditional assignment.

[xAndy]

Jason, thanks for hosting this. I've used generics a few times but this video is what I needed to feel more polished. <T>errific!

[linuseklund]

i've been ssing around on a friends soft soft for years, finally bought it. I found your videos and instantly subscribed and have been

[scottamolinari]

Yup. That's me. I can get rid of the red squiggly lines. But, I'm far away from writing APIs in TypeScript myself. Had to comment on the "why this complicated deep TS stuff?" question.

[karpo]

Awesome TypeScript lessons with code examples, thank you for sharing mr. Jason
You Rock 🤘

[BlurryBit]

26:54 my first aha moment of this video. :D
I am sure I will find more. Great work!!

[felipegutierrez]

The stuffs you said about autocomplete and found errors before something happens is what made me change to TS

[diegoji]

It clicks also for me! Amazing, thanks guys 🤩💙

[dopetag]

1:17:01 the moment it clicked for Matt. "I think we found a bug in TypeScript" 😅

[dev_smple]

Here's the quickest dirty solution :3
In the original problem just make the function argument instead of
Key: TItem = 'a'
Make it
Key = 'a' as TItem


Now everything works with correct types but if u call Ur function with no args
getObjkey() (it's return type is a union of all possible values of Ur object:3)
Which u can fix by getObjKey<'a'>()

[thearcticmonkey]

I love the people influencing the dev community!

[egm]

Actually there is a simpler solution for the last exercise:
const getObjKey = <Tkey extends ObjKey>(key: Tkey = "a" as Tkey) => {
return obj[key];
};
notice the "as Tkey" part

[scottamolinari]

At 1:06:00. Couldn't a type be declared to be string, like...

type TRoute = string;

...in order to get rid of the "TRoute extends string" everywhere?

[ROVAKAN]

i personaly do art for art, do software to earn my keep. and i'm here to learn some stuff

[alvarobyrne]

shouldn't solution no. 3 by @Learn With Jason be included in the repo, some PR or what not? Note to self: Typescript can infer FROM the refer type or it can infer THE return type : that is so neat.

[olehsolomka]

I have a question, does those overloads order matter?)

[devops-sushi]

It actually wasnt a typescript bug i guess it was caused by the faulty function definitiion and the interpreter broke until the next valid code state