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.
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.
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.
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 🤞
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.
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.
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.
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.
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.
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
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).
Is Typescript really necessary? I have not wrapped my head around why there is a use to make code more complex just to make sure you are using the correct type of variables. I mean... I know what my variables are intended to be when I create them and when I use them later. So I'm not sure of the whole point of TS.
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.
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!
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. 😄
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...
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 }
