In this tutorial, we'll learn about Typescript Generics and look at several examples of how to use them. If you have questions, please join my Discord server where I answer questions and you can chat with other web dev students: discord.gg/neKghyefqh
I've been using typescript on an almost daily basis for the past five months now and I still find these videos useful. I also like that you explain everything in each video - how to set up the project, how to use VS Code, keyboard shortcuts, etc. A lot of TH-camrs advertise their tutorials as being for beginners but then completely fail to explain fundamental steps and concepts. Great stuff!
That example where the keys are inferred and you get that drop-down is just awesome. I think this showcases very well why TypeScript is not (what I still thought months ago) a burden, but rather a huge help. The compiler (or is it the editor?) tells me right away which values can be passed in. It guides me in the right direction all the time. Someone recently put out a tweet saying something like "Coding in JavaScript after coding with TypeScript for so long feels like driving without a steering wheel".
Dave you the man! Best TS tutorial series i have seen on TH-cam, from beginner to "advance". It's long but pays off to see it (no more headaches from TS erros 🤣)
I have been a while using react with typescript and I thought that i know everything till I see this video, great content Dave , you are the best developer I ve never seen
remember to keep striving for progress over perfection, and little progress everyday will go a very long way ... let saying : String[] = ['very','inspiring','saying',':)']... thank you man
When you say response handling, I think of promises and fetch requests. Is there a link where you specifically saw these names for types? I can name a type anything and generics can also be anything.
that's some weird ass syntax right there but thanks to you Dave i had much easier time wrapping my head around it . Bring it on you flipping TS sonofa JS ! aint gonna beat me !
Hello, Dave I've already asked this question on your discord channel, but maybe it will be useful for other people here: Can you explain why we use `as keyof T` on 11:05?? Because for me `arg` is typeof T, not typeof `keys of T` So this is confusing `keyof T` returns union Type, not type describing object, but method `keys` expects object So to simplify it When we pass obj in our function { id:1, name: 2} It should look like Object.keys(arg as ("id" | "name")) But for me it doesn't make sense because arg should be object
Object.keys() just returns the keys of the object as an array. We are checking to see if the generic data we passed to the function as arg is an object. If it is an object, we pass it to Object.keys() to iterate through the array. However, TS doesn't like that until we tell it arg is viewed as keys here.
@@DaveGrayTeachesCode but how object can be viewed as union type of values? I understand if we use ` arg as {[key:string] : any} ` But why TS accept `arg as `string | string | string`` Keyof T returns string | string | string Arg is object So we tell TS that we pass string in method which expects only object And it works
@@denmccormik7654 Object.keys() only returns the keys in an array. I cannot answer _why_ TS does things in a certain way, but this is what TS accepts here.
Dave can you help me to setup my github. I always keep my notes in github but sometimes that needs to be updated too. I was thinking a clear way to do that. I saw you html repo where you had 10 seperate folder and one readme file inside one single repo. How you did that ? I tried doing that but commit history tracks the entire project but i wanted to have each separate folder to have its own commit history. Can you explain me how can i do that just like yours. seems like repo nesting.
What I do still has a commit history. I'm not creating branches but instead, just adding new folders to the same "main" branch. You may actually be interested in creating separate branches where each has its own history.
Great series!!! Thank you so much! In the isTrue function, I kind of prefer an 'object' assertion in the object case because it feels more self-explanatory: if (isObj(arg) && !Object.keys(arg as object).length) return {arg, is: false} ... Does it make sense?
for some reason I don't have any type Error in the example with Object.keys(arg). But if I put as keyof T, I will get this error: "Conversion of type 'T' to type 'keyof T' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first." Why is that? ))
Sounds like you have something different from the example code - see the link to the course resources. However, the suggestion you received is talking about a double assertion where you say "as unknown" followed by "as keyof T". It can work in a pinch but no example here should need that.
@@josippardon8933 okay that's good. I hope you have practiced that as well. This is is a advance concept so if you don't grasp it, leave it for now and when you need it you can come back. On the second note if you try the examples yourself, breaking it, you will get it.
@@DaveGrayTeachesCode Yes ,,, instead of making generics easier you made it very difficult.... You teaching style is good ...in this vide you just messed the generics in loops and isArray and null is object etc...which are difficult for beginners... I am not complaining...I am just a student watching your video,,, it was hard for as I came here to learn generics and got stuck in loops and null is Array etc
![[안방1열 직캠4K] 베이비몬스터 치키타 'DRIP' (BABYMONSTER CHIQUITA FanCam) @SBS Inkigayo 241110](http://i.ytimg.com/vi/tnlxo79cAqY/mqdefault.jpg)
In this tutorial, we'll learn about Typescript Generics and look at several examples of how to use them. If you have questions, please join my Discord server where I answer questions and you can chat with other web dev students: discord.gg/neKghyefqh
I've been using typescript on an almost daily basis for the past five months now and I still find these videos useful. I also like that you explain everything in each video - how to set up the project, how to use VS Code, keyboard shortcuts, etc. A lot of TH-camrs advertise their tutorials as being for beginners but then completely fail to explain fundamental steps and concepts. Great stuff!
Glad it was helpful! I really appreciate the feedback! 💯
Thanks Dave. I learnt HTML and CSS from your videos from scratch and now I post my own web dev content! Thank you for inspiring me!
Nice work!
It was tough for me, maybe I'll have to watch it again. Content was great as always.
That example where the keys are inferred and you get that drop-down is just awesome. I think this showcases very well why TypeScript is not (what I still thought months ago) a burden, but rather a huge help. The compiler (or is it the editor?) tells me right away which values can be passed in. It guides me in the right direction all the time. Someone recently put out a tweet saying something like "Coding in JavaScript after coding with TypeScript for so long feels like driving without a steering wheel".
Agreed and thanks! Yes, with Microsoft behind both TS and VS Code, the integration and dev experience is excellent. 💯
Dave you the man! Best TS tutorial series i have seen on TH-cam, from beginner to "advance". It's long but pays off to see it (no more headaches from TS erros 🤣)
I have been a while using react with typescript and I thought that i know everything till I see this video, great content Dave , you are the best developer I ve never seen
remember to keep striving for progress over perfection, and little progress everyday will go a very long way ... let saying : String[] = ['very','inspiring','saying',':)']... thank you man
You're welcome!
I like all your content.
They are always top notch and well done.
Typescript Generics are not as complicated as we think.
Thanks Dave.
Amazing explanation! I'm shocked about how great teacher you are! Thanks a lot!!!
Awesome, Eagerly wafting for your REACT with all the hooks/MERN/Redux + TYPESCRIPT ADVANCE real world project. ❤❤LOVE YOU DAVE❤❤
Thanks!
Can you please also make video on either type for response handling
type Left
type Right
Please make video on this
When you say response handling, I think of promises and fetch requests. Is there a link where you specifically saw these names for types? I can name a type anything and generics can also be anything.
Detailed explanation found here over TS Generics. Thanks Dave for this lovely video. :)
You're welcome!
Played 20 sec after video posted :D
Dave is always there when you need help in the developer journey
🙌🚀🚀
Thanks a lot for such an awesome Typescript playlist
You're welcome!
Hey Dave, have you thought about making a cloud computing course?
I have not but thank you for the request!
Thanks. for Best typescript tutorial 🌹
You are welcome 😊
Super clear and perfect examples
Thank you!
thanks, Dave! Brilliant as always💙💛
You're very welcome! 💯
null is an object, thanks for this information
Thanks a million Dave!
very nice tutorial, thanks a lot 💗
Hi Dave, I hope next you make full tutorial about NextJS with real world project because I like your teaching style
Thank you for the request and the kind words!
The first example reminds of templates in C++ in STL
Amazing tutorial thank you
You're very welcome!
thank you Mr. Gray
You're welcome!
that's some weird ass syntax right there
but thanks to you Dave i had much easier time wrapping my head around it .
Bring it on you flipping TS sonofa JS !
aint gonna beat me !
You got this! 🚀
Hay Dave ,i have a question ,in user Array example i understand everything in example except the T[k][ ] ,why you wrote it like this ?
Hello, Dave
I've already asked this question on your discord channel, but maybe it will be useful for other people here:
Can you explain why we use
`as keyof T` on 11:05??
Because for me `arg` is typeof T, not typeof `keys of T`
So this is confusing
`keyof T` returns union Type, not type describing object, but method `keys` expects object
So to simplify it
When we pass obj in our function
{ id:1, name: 2}
It should look like
Object.keys(arg as ("id" | "name"))
But for me it doesn't make sense because arg should be object
Object.keys() just returns the keys of the object as an array. We are checking to see if the generic data we passed to the function as arg is an object. If it is an object, we pass it to Object.keys() to iterate through the array. However, TS doesn't like that until we tell it arg is viewed as keys here.
@@DaveGrayTeachesCode but how object can be viewed as union type of values?
I understand if we use ` arg as {[key:string] : any} `
But why TS accept `arg as `string | string | string``
Keyof T returns string | string | string
Arg is object
So we tell TS that we pass string in method which expects only object
And it works
@@denmccormik7654 Object.keys() only returns the keys in an array. I cannot answer _why_ TS does things in a certain way, but this is what TS accepts here.
@@DaveGrayTeachesCode Thank you, Dave. Maybe my question is extra stupid. I need some practice to discover it.
@@denmccormik7654 no question is stupid. That's how we learn. 💯
Thank you, Dave
You're welcome!
Dave can you help me to setup my github. I always keep my notes in github but sometimes that needs to be updated too. I was thinking a clear way to do that. I saw you html repo where you had 10 seperate folder and one readme file inside one single repo. How you did that ? I tried doing that but commit history tracks the entire project but i wanted to have each separate folder to have its own commit history. Can you explain me how can i do that just like yours. seems like repo nesting.
What I do still has a commit history. I'm not creating branches but instead, just adding new folders to the same "main" branch. You may actually be interested in creating separate branches where each has its own history.
Great series!!! Thank you so much! In the isTrue function, I kind of prefer an 'object' assertion in the object case because it feels more self-explanatory: if (isObj(arg) && !Object.keys(arg as object).length) return {arg, is: false}
... Does it make sense?
Pls post video on angular
Yeah! TS Tuesday 🤘! ( and maybe some tacos too 😂 )
Right on! 🌮🌮🌮🌮
for some reason I don't have any type Error in the example with Object.keys(arg). But if I put as keyof T, I will get this error:
"Conversion of type 'T' to type 'keyof T' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first."
Why is that? ))
Sounds like you have something different from the example code - see the link to the course resources. However, the suggestion you received is talking about a double assertion where you say "as unknown" followed by "as keyof T". It can work in a pinch but no example here should need that.
Great course. Really informative. I'd like to join the discord server but the link is expired. Could I have a more recent one?
Strange because the link does not expire. I just checked. Here it is: discord.gg/neKghyefqh
please write problem statment before any example so that we try by ourself nd then match solution with yours
can't we just use the any type?
Can you please respond to my Twitter message asking you about coming videos titles in this playlist
Hello Ahmed, I do not check Twitter messages often. Please join my Discord that I check nearly every day: discord.gg/neKghyefqh
promosm
This is not a beginner friendly I have not understand a single example
Generics can be difficult to understand. Did you complete the previous 7 chapters before attempting this video? That will help.
@@DaveGrayTeachesCode yes I did complete previous 7 chapters they are completely understandable
@@hamzabonga7884 Glad to hear I helped with those chapters. Maybe seek some other sources to understand generics if this video didn't help you.
Despite video saying it is for beginners, it is not. Especially example with usersArray.
You should follow the complete series. As this is almost the end of the series you cannot expect to grab all without practicing
@@siddiqahmed3274 I have gone through every video in series till this one
@@josippardon8933 okay that's good. I hope you have practiced that as well. This is is a advance concept so if you don't grasp it, leave it for now and when you need it you can come back. On the second note if you try the examples yourself, breaking it, you will get it.
100k
🚀🚀
Example is too long and complex for beginners. Should show how the 'T' works first.
I cannot please everyone. Please feel free to make your own tutorial the way you would like it.
@@DaveGrayTeachesCode
Yes ,,, instead of making generics easier you made it very difficult....
You teaching style is good ...in this vide you just messed the generics in loops and isArray and null is object etc...which are difficult for beginners...
I am not complaining...I am just a student watching your video,,, it was hard for as I came here to learn generics and got stuck in loops and null is Array etc