Very often it feels like - yes its totally clear and so easy - when watching videos like this. Then we go back to work and in most cases our problems are more complex and they still need some time to get around that barrier in the head and apply what we just have learned. I tought myself the generic stuff by using it in my daily work and I still keep watching videos like this to learn about the very edgew cases - the smart little things I missed in the documentation documents in the web.
Hey Oliver, how much of Generics are you using on a daily basis or monthly basis when developing with TS? I just finished learning the basics of TS and I'm under the assumption that 80/20 principle applies here. 80% of typescript development comes from 20% of the core fundamentals such as type inference, type annotation, unions, and function return types. Past that, are generics SUPER DUPER important to use or can we take them lightly and just not focus too much ?
@@hassansyed6087 Generics have become an important part in my daily work. But we use them with care. Once you are into them and you understand them things can get very fast very complex, if you over-use them. Most common part to use Generics is when you have a method with a switch case in it, just switching between types of the same kind (implementing some interface). In this case you might want to introduce a generic method where your generic type is something like function myFunction(T myTypeInstance) { /* ... */ }
I just had completed the rust book and searching for the term "generics" on youtube, came across this video( just for second perspective to make the thing really sink in) nailed it!
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
@@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 😇
This video is a great introduction to generics! Generics can be a confusing topic, but this video breaks it down into clear and easy-to-understand concepts. I especially liked the way he showed how to use generics with API responses. This is a common use case for generics, and it was helpful to see how to create a generic API response type that can be reused for different API endpoints.
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.
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.
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?
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
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 }
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 🤞
Hey @kyle, That is an awesome video. I wanted to point something in your last example regarding object. The value of new Date() would resolve to `object` so that might not work well. I think a more robust definition for an object would be Record or something along those lines. What are your thoughts? And thanks once again for another great video.
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.
Idk how, but I always understand what you are saying and what ur trying to teach. English is my 2nd language and when I watch other tutorials it feels like WTH it's not understandable. But when I watch your videos it feels like this is so ez
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.
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).
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()
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
Short question about generics. When I have this type: export type TExtensionConfig = { oExtClass: TExt; oExtConfig?: ConstructorParameters[1]; }; How look's the array type for this? Background. I woul'd like to have a settings object who have a property "aExtensions". Each extension object should have a property called "oExtClass" for defining the extension class and an optional property called "oExtConfig". Each array item can have another extension / another generic class. The extension class is a abstract. Thanks.
as soon as i get a job and my first salary i am buying your course . no shitting . btw that's real nice of you that you make a discount for people in such countries as russia , etc
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!
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"
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.
Ok lets just say if my functions has to support both string and sting[ ]. so instead of doing Element : string| string[ ] how can I use generics here ?
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...
Very often it feels like - yes its totally clear and so easy - when watching videos like this.
Then we go back to work and in most cases our problems are more complex and they still need some time to get around that barrier in the head and apply what we just have learned.
I tought myself the generic stuff by using it in my daily work and I still keep watching videos like this to learn about the very edgew cases - the smart little things I missed in the documentation documents in the web.
Hey Oliver, how much of Generics are you using on a daily basis or monthly basis when developing with TS?
I just finished learning the basics of TS and I'm under the assumption that 80/20 principle applies here.
80% of typescript development comes from 20% of the core fundamentals such as type inference, type annotation, unions, and function return types.
Past that, are generics SUPER DUPER important to use or can we take them lightly and just not focus too much ?
@@hassansyed6087 Generics have become an important part in my daily work. But we use them with care. Once you are into them and you understand them things can get very fast very complex, if you over-use them.
Most common part to use Generics is when you have a method with a switch case in it, just switching between types of the same kind (implementing some interface). In this case you might want to introduce a generic method where your generic type is something like function myFunction(T myTypeInstance) { /* ... */ }
Whenever I find it very hard to grasp a concept, I run to this channel. You are the GOAT
This is shortest and the best explanation of generics in TS. Thanks for this Kyle.
This is the shortest and best explanation generic types and functions I've ever saw
Shortest, you sure?
Excellent, you honored the "simplified" to your name with this video, really easy to understand this way
I was baffled by Generics in the docs & other tutorials. This is incredibly helpful and clear. Thank you.
I just had completed the rust book and searching for the term "generics" on youtube, came across this video( just for second perspective to make the thing really sink in) nailed it!
Really need your nextjs course, Kyle!!!
He is really a Beast at explanations. Making complex things simple and crisp.
You are really doing a great job bro. Keep doing it for us.
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
You need an expressive type system to support types in a dynamic scripting language.
@@arshiagholami7611actually not, for example python type system is very basic.
@@oscarljimenez5717 python doesn't have a type system. it's a type hint for your IDE.
@@arshiagholami7611 Rust has even more expressive type system than TS, and it's a static typed language
@@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 😇
The best drops of knowledge in video I ever seen! Congratulations, man! And thank you very very much
This video is a great introduction to generics! Generics can be a confusing topic, but this video breaks it down into clear and easy-to-understand concepts. I especially liked the way he showed how to use generics with API responses. This is a common use case for generics, and it was helpful to see how to create a generic API response type that can be reused for different API endpoints.
Dude, this is exactly what I needed, amazing video! 👏👏👏
Probably the best video for generics in youtube. Hats of man.
is it a joke?
@@true227 Why do you think its a joke? Simple explanation.
Simply the best explanation of TypeScript generics out there. Kyle, you're a legend. Thanks for making these videos 🙏🏻
You are the one of the teacher who I know in TH-cam , I did not understand until I watched this video why we needs typescript
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.
Nice clear explanation - so many people get tied up in knots trying to explain generics.
I enjoyed this. Thanks for clarifying. I actually use this but never knew I was implementing a generic type system.
Learnt new stuff today.
Wow, this is the first time I feel like I understand what Generics type is. BIG THANK YOU!
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.
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?
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
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 }
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 🤞
Wow this actually exactly what I need to clean up some messy types in my current project.
short and concise, i always come back to refresh my memory
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.
Hey @kyle,
That is an awesome video.
I wanted to point something in your last example regarding object. The value of new Date() would resolve to `object` so that might not work well. I think a more robust definition for an object would be Record or something along those lines. What are your thoughts?
And thanks once again for another great video.
brief and get to the point, really appreciated
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.
Idk how, but I always understand what you are saying and what ur trying to teach. English is my 2nd language and when I watch other tutorials it feels like WTH it's not understandable. But when I watch your videos it feels like this is so ez
Goodness me, and you're not even cutting the video every time! Cheers, mate!
Cool thumbnail. That was the exact emotions I was going through before seeing this video :) Thank you for the video
Man, after watching all kinds of your videos I am now convinced you are the one to explain the monads!
Monads are easy but often over complicated. th-cam.com/users/shortsC2-ljnsckrs?si=cHTDnp5xmdRE_b9f
Just an amazing 12 minutes of content. Thank you so much
Dude thank you very much. You are literally a God
I watched several videos on this and I get rusty with It sometimes. you perfectly explained it.
Very good! Thanks! Could you cover how I can use types, interfaces, enums to replace the JavaScript constants during code migration
Love to see you simplifying the crazy webdev today everything build on top of everything. This mess starts to kill me.
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.
Hungarian-like. What does that even mean?
@@ivan.jeremic Hungarian notation.
Marking your type in TS with T, makes code messy IMO.
Thank you so much, your explanation was really easy and helpful!
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
Easy explanation ,Simplified the explanation of generic type easy to understand.
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).
I just realised how much i needed this video. Good work.
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()
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
best webDev channel. Thanks)
Thank you for clarifying this!
Thank you very much for always simplifying very well this kind of typescript concepts :D
so amazing! it's really easy to understand 😄
Short question about generics.
When I have this type:
export type TExtensionConfig = {
oExtClass: TExt;
oExtConfig?: ConstructorParameters[1];
};
How look's the array type for this?
Background. I woul'd like to have a settings object who have a property "aExtensions".
Each extension object should have a property called "oExtClass" for defining the extension class and an optional property called "oExtConfig".
Each array item can have another extension / another generic class.
The extension class is a abstract.
Thanks.
Great video kyle, Please cover keywords like Infer, As and Satisfy in Typescript. Thank you.
Nicely explained, it just fit into my mind. Thanks.😊
Great video! 👏I have been working with typescript for 3 years (angular) and I didn't even know this generic types possibilities.
brother your next level thankyou for all these
Loved your explanation!!! 😁
Great video so far! Thanks Kyle as always! 👍
You really do the web dev simplified!!!😀
Amazing video... Really helpful!!
as soon as i get a job and my first salary i am buying your course . no shitting . btw that's real nice of you that you make a discount for people in such countries as russia , etc
Thanks for making it happen, do you do blazor, any content references?
Great content, well explained.
Amazing! Clear and helpful
perfect , and thanks bro
great explanation!
Thank you so much, I really appreciate it :)
Great tutorial. Your explanation is awesome.
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
Super informative video thanks 👍
it was so fun to watch this
thank you a much, I love your courses
Best Generics explain one of!
Already good with generics, this is a decent coverage of them.
You sir, are a hero
AMAZING!!!!🙌🙌👋👋👋
This is super useful for writing clean Typescript code. Thanks for sharing!
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!
long time no see Kyle, as always great content. 👍👍👍
Very helpful, Thanks
Thank you, brother :)
Thank you! You know how to explain
very good stuff, thanks!
Thanks a lot for this!
Great video, thanks for kyle
Rally good one .. Keep it up..!!
Any video that shows all the keyboard typing shortcuts, many of which were used here and went over my head?
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.
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"
Thanks!
Brilliant video, as usual
Which extension are you using? the one when you Hover shows the ts types passed.
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.
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.
Great video!
really good explanation
Thank you very much
Ok lets just say if my functions has to support both string and sting[ ]. so instead of doing Element : string| string[ ]
how can I use generics here ?
Typescript generics explained well
Ahh generics.... My worst enemy
Right next to regular expressions, no doubt 😉
@@joe-skeenchatgpt used to do it's magic for me on regex
I feel u
Same to you
@@unleash-gamplay dw bro practice makes perfect
great simplification
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...