Learn TypeScript Generics In 13 Minutes

TypeScript Simplified Course: courses.webdevsimplified.com/...
By far one of the hardest TypeScript concepts to understand when first learning TypeScript is generics. They introduce new syntax, new logic, and a new way of thinking all at the same time which is tough to comprehend. In this video I will be breaking down everything you need to know about generics (including advanced generic features).
📚 Materials/References:
TypeScript Simplified Course: courses.webdevsimplified.com/...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:49 - When To Use Generics
02:04 - Generic Function Basics
06:40 - Generic Type Basics
09:24 - Advanced Generic Features
#TypeScript #WDS #TypeScriptGeneric

[@WebSurfingIsMyPastime]

I needed more info on generics and I had already signed up for the react course on webdev. I'm glad I purchased the course on typescript. The extra info in your course was exactly what I needed to guide me through a basic understanding of generics.

[@newgem6825]

Whenever I find it very hard to grasp a concept, I run to this channel. You are the GOAT

[@fabianpetersen2452]

I'm currently learning Typescript and struggled a lot getting used to the syntax and trying to figure out what must be passed in to remove all these errors even though the code is correct with plain react/javascript. Thanks Kyle, this will assist me tremendously going forward.

[@waseemtahir6740]

This is shortest and the best explanation of generics in TS. Thanks for this Kyle.

[@felistusobieze8951]

I enjoyed this. Thanks for clarifying. I actually use this but never knew I was implementing a generic type system. Learnt new stuff today.

[@AtaurRahman-vm1uz]

Probably the best video for generics in youtube. Hats of man.

[@lauragreen3132]

I was baffled by Generics in the docs & other tutorials. This is incredibly helpful and clear. Thank you.

[@mondirhallouli]

great video! finally got a better idea on how generics work. I had the basic notion but never understood them like this. They are kinda placeholders for a type(s).

[@sergiom.954]

Great video! 👏I have been working with typescript for 3 years (angular) and I didn't even know this generic types possibilities.

[@Martin97perussini]

Excellent, you honored the "simplified" to your name with this video, really easy to understand this way

[@theisoj]

Great video so far! Thanks Kyle as always! 👍

[@gyros9162]

This is the shortest and best explanation generic types and functions I've ever saw

[@gheorghitacristea5750]

Shortest, you sure?

[@khawajamohsin7194]

I just realised how much i needed this video. Good work.

[@user-yb3cj7rg7q]

Great tutorial. Your explanation is awesome.

[@PrabhuKripaHai]

Nicely explained, it just fit into my mind. Thanks.😊

[@Matiast9477]

This was great, now I need to understand when you get to that point where you see stuff like T extende keyof K or something like that

[@user-xf9rz2xy6d]

Really need your nextjs course, Kyle!!!

[@caioveb]

The best drops of knowledge in video I ever seen! Congratulations, man! And thank you very very much

[@pakistanigymers2k22]

Loved your explanation!!! 😁

[@Belgabor]

Very good introduction. One thing I would recommend for people just starting to learn this, do not even start naming generic parameters with single letters, be expressive. You may start out with a simple type where it's clear what 'T' is, but after a few weeks it has T, R, E, O and W. And a month later you have no idea any more what each of the letters are supposed to mean.

[@MartinKonicek]

thank you a much, I love your courses

[@crvlwanek]

The type system in TypeScript is so much more expressive than other languages. It has great inferencing, keyof for derived types, even ternaries for narrowing/filtering types

[@arshiagholami7611]

You need an expressive type system to support types in a dynamic scripting language.

[@oscarljimenez5717]

@@arshiagholami7611actually not, for example python type system is very basic.

[@arshiagholami7611]

@@oscarljimenez5717 python doesn't have a type system. it's a type hint for your IDE.

[@ElektrykFlaaj]

@@arshiagholami7611 Rust has even more expressive type system than TS, and it's a static typed language

[@arshiagholami7611]

@@ElektrykFlaaj no it doesn't, i've coded in both languages for years and I can tell you typescript's type system is way more complex for obvious reasons. I love rust tho 😇

[@romaniaplus]

Love to see you simplifying the crazy webdev today everything build on top of everything. This mess starts to kill me.

[@ClaytonBoyle]

Just an amazing 12 minutes of content. Thank you so much

[@jattoritittor8342]

Thank you very much for always simplifying very well this kind of typescript concepts :D

[@magorzatagajlusz9170]

so amazing! it's really easy to understand 😄

[@HectorGiudatto]

You really do the web dev simplified!!!😀

[@therealj4282]

Nice clear explanation - so many people get tied up in knots trying to explain generics.

[@rEmIxKoOL]

Amazing! Clear and helpful

[@Amanrauniyar-dm7in]

brother your next level thankyou for all these

[@MrVipulLal]

Brilliant video, as usual

[@secret786786]

Amazing video... Really helpful!!

[@abhidadhaniya5701]

Great video kyle, Please cover keywords like Infer, As and Satisfy in Typescript. Thank you.

[@alexanderkomanov4151]

Thanks a lot for this!

[@MagicPants647]

I like thinkin of generics as just a way to pass in types to a function or another type. kinda like how you’d pass in parameters to a function.

[@eduardherasym689]

best webDev channel. Thanks)

[@YusufxonToshkandiy]

perfect , and thanks bro

[@tubenzr]

long time no see Kyle, as always great content. 👍👍👍

[@SlickStatus]

Very helpful ❤

[@gunjan4075]

This is super useful for writing clean Typescript code. Thanks for sharing!

[@david.thomas.108]

Super informative video thanks 👍

[@naturevibesvlogs810]

Easy explanation ,Simplified the explanation of generic type easy to understand.

[@StephenRayner]

Already good with generics, this is a decent coverage of them.

[@pro100tom]

Man, after watching all kinds of your videos I am now convinced you are the one to explain the monads!

[@fifty-plus]

Monads are easy but often over complicated. kzbin.infoC2-ljnsckrs?si=cHTDnp5xmdRE_b9f

[@javadbagheri9921]

Amazing ❤

[@theidanking]

Thank you! You know how to explain

[@true_visual]

Thank you very very much for this tutorial! Can you please make a video about differences between Generics and Interfaces? I am pretty new and if someone would ask me to define a type of something, my mind thinks "Interface" at once!

[@RandikaTechWork]

Rally good one .. Keep it up..!!

[@LeVanHienFEFPLHN]

Great video, thanks for kyle

[@_WyreZ]

So good. Ty!

[@ehsanset6709]

Very helpful, Thanks

[@fifty-plus]

Its a better practice to name your generic arguments prefixed with T, like TModel, TRequest, etc. like we do in C#. Yes it's Hungarian-like but it works well to distinguish generic arguments while keeping them explicit and descriptive.

[@ivan.jeremic]

Hungarian-like. What does that even mean?

[@fifty-plus]

@@ivan.jeremic Hungarian notation.

[@IannoOfAlgodoo]

Marking your type in TS with T, makes code messy IMO.

[@norbusherpa3665]

it was so fun to watch this

[@Kat8dev]

really good explanation

[@bencipherx]

I have not started watching this but when I saw the video, I said if I don’t understand this concept after watching your videos then I can never understand it from anywhere else. Already seeing positive comments so 😅fingers crossed 🤞

[@dukeselwood]

Great video!

[@iqbalibrahim4713]

You sir, are a hero

[@Hamza.dev-AI]

it's been a long time since I've seen you ❤

[@deepkfiz7121]

thank you!!!!!

[@DEV_XO]

Amazing!

[@gageracer]

bro, you just explained it so well! Now I don't hate generics that much. My only issue was that for some reason you need to put generics between the name and the parenthesis. I was trying to use it for svelte 5 props and was doing: let {name} = $props() and had no idea why it wasn't working. fyi you need to do it $props()

[@joe-skeen]

I think that choice came from other C-family languages that also use the same syntax for generics, like C# and Java to make it more approachable and intuitive for those developers. But for someone that hasn't worked with strongly typed languages in the past, they are understandably intimidating

[@dinguskhan8883]

Would love to see a video about what stuff makes typescript’s inference not work

[@d-princecoder4031]

great simplification

[@StephenMoreira]

Great content.

[@NazwaBricksZajeta]

Thank you for clarifying this!

[@_neuromanser_]

Never used this, but it seems useful.

[@fuadagayev-mg7fk]

Best Generics explain one of!

[@rohitpandey4411]

you are awesome😇

[@AkioJunichiro]

Another generics use is to work with interface, then you can pass any type that respect at minimum the interface structure

[@kylesandstrom853]

Great video and explanation as always, I really like your video tutorials... but TS still feels like overkill in most use cases I've seen.

[@ms.crawford1335]

Brilliant

[@Cognitoman]

Think of generics like functions for types, the generic takes a type as an argument. Once you think of it like that… it’s easy

[@armagananteplioglu9031]

This was a great explanation thank you very much!

[@mosescosme8629]

My favorite part of this video was learning that I've already been using Generics everywhere and had no idea that's what they were called.

[@danilomourelle]

I don't know man. I would say that it gonna use extends a lot when using generics... Every time I neede an explicit generic, half of time is with extends... Great video by the way...

[@abnow1998]

Awesome

[@mukullataroy2195]

Ahh generics.... My worst enemy

[@joe-skeen]

Right next to regular expressions, no doubt 😉

[@yohanneskindu8794]

​@@joe-skeenchatgpt used to do it's magic for me on regex

[@elixirdeveloper6673]

I feel u

[@unleash-gamplay]

Same to you

[@elixirdeveloper6673]

@@unleash-gamplay dw bro practice makes perfect

[@tomasburian6550]

Top. I'm to this day shocked how little attention people give to TS given that we use it everywhere in the professional world. Learning as much of it as possible can make a developer go a long way. The same goes for writing tests.

[@assk477]

Verry nice

[@user-du2ru7gc4s]

Always different ❤

[@jasonlough6640]

At 4:02, you pass to tell it what the generic value passed in should be. Makes sense. At 4:37, you seem to be passing in... the return type? querySelector, now input is of type HTMLInputElement. so which is it, the type passed in or a return type?

[@kenichiwaaa]

If you pause at 4:42, you can see that the generic is placed after the semicolon, meaning the return type. At 4:02, Kyle specifically use the generic for the parameter passed in. So it can be both. It is just a matter of how and where you define it

[@LittleLily_]

The generic type can be used anywhere in the function, either in the input arguments, the return type, or even both. For example: function foo(a: T) { return "foo" } function bar(a: T): T { return a } function getFoo(obj: { foo: T }): T { return obj.foo }

[@renishcharaniya6532]

Which extension are you using? the one when you Hover shows the ts types passed.

[@Luke_UPPX]

thanks

[@benjaoliva3383]

Great video!! Just one question about the last part, is there a way to merge the generic default type with the passed one ? Like Data will always be an abject with status key at least, but i pass a type on variable definition that is an object with name so the variable should have a data key with object containing status and name as value. Is that possible ?

[@im-essi]

type ApiResponse = { status: number } & T where T is some object type like { name: string } or whatever, is one way, if I understood you correctly. Should then always have status, and add whatever fields else you want.

[@benjaoliva3383]

@@im-essi hmm I see. Chat GPT gave me this: type DefaultData = { status: string; }; type CustomData = { data: DefaultData & T; }; // Example usage const myVariable: CustomData = { data: { status: "success", name: "John", }, }; But here he creates a new type for doing that in place of using the type passed at variable definition. I like more your approach, thanks!

[@drprdcts]

Yes, & is the operator for union (this AND that), and | is the operator for intersection (either-or)

[@joe-skeen]

Or just use extends:

[@themightysapien]

You are a G.

[@edisonj9664]

Typescript generics explained well

[@dawid_dahl]

With (string | number)[] you said, when the type returned from getFirstElement was “string | number”: “But TypeScript is not smart enough to know that (what we passed in was actually a string).” It’s not that TS is not smart enough. It was that the type was explicitly set as “string | number”, and since the function has not actually been run yet, there is no way TS could possibly know that, no matter how smart it was. It was simply respecting the programmer’s wishes, not being stupid. 😄

[@superuser8636]

Coming from C++, I love everything about TypeScript

[@EminErtacPehlivan]

nice content , I wish you sell your ts course cheaper hence we could buy it my friend 😂

[@HungNguyen-vi4rr]

8:00 no no, it is smart enough to force you to put the Generic Type there. If it automatically generated / inferred types there, Generic Type would be useless there: no validation errors, it works as 'any' type all the way :)). They need Generic Type to acknowledge that what type you want to validate "data"

[@mygelbergstresser7729]

Could you cover a video about importing a JSON file and how to type that?

[@stevezelaznik5872]

type JsonPrimitive = null | string | number | boolean; type JsonData = JsonPrimitive | JsonData[] | { [key: string]: JsonData };

[@boxboxerson991]

see this is good because it's not some vague opinion piece on how types are better than interfaces or some nonsense. exclusively stuff like this pls.

[@jasonlough6640]

Its weird, because one syntax function foo(n: string) says "this function will accept this kind of thing, which makes sure you only pass this kind of thing" while the other function foo(n:T) says "this function takes anything, but that anything is now consistent". The second one wont stop you from sending "apples" to function checkBankAccountBalance(n:T), so it seems counterproductive.

[@stevezelaznik5872]

The point of a generic is to define a relation between two or more things. For example a return type T of a function being the same as its argument type T. In your example the generic only applies to one thing, so it doesn’t define a relationship between anything.

[@jasonlough6640]

@@stevezelaznik5872 makes sense.

[@albiummid]

Now generics are simplified 🎉

[@eyobsamuel8722]

did you know? the intro music in the video is done by Kyle, with that guitar. @Kyle, please confirm.

[@ilyaskarim1952]

I lost an interview because I didn't name the generics. I used generics for a long time. Interviewer asked me to explain generics but I was unable to explain because I didn't at that time that these are called generics 😅

[@enlightenedarchitect1673]

i wish you were a private tutor!

[@leekuncoins6347]

Yeah for someone came from OOP like me, generics be like my life saver, because I don’t need to write if smth !== undefined multiple time 😂)

[@vspoke9150]

Funny how when I was learning java everyone was hating on it, now that I see how popular TS is the same stuff or worse

[@user-es2jt6qe2o]

Hi kyle, my age is 28 by now. Can i still begin my coding career in this age?