Typescript Generics | Beginners Tutorial with Examples

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn about Typescript Generics in this Typescript beginners tutorial with examples. Typescript Generics allow for type variables which are helpful when we do not know what type will be passed to a TS function, interface, type alias or class.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- Master the Coding Interview: bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Typescript Course: github.com/gitdagray/typescri...
🔗 Playlist for this Typescript Course: bit.ly/3GcNJ78
Typescript Generics | Beginners Tutorial with Examples
(00:00) Intro
(00:05) Welcome
(00:28) Starter code and set up
(01:33) What are Generics?
(02:02) Basic Example and Syntax
(03:46) isObject example
(05:53) isTrue with keyof Assertion
(11:03) Interface with Generic example
(13:00) Narrowing Generics with Extends
(15:05) Multiple Type Variables & Extends with keyof
(19:43) Class with Generics
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: • JavaScript Full Course...
📚 Tutorial References:
🔗 Typescript Official Website: www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: dev.to/destrodevshow/typescri...
🔗 Stackoverflow Survey Results: survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: www.typescriptlang.org/docs/h...
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Node.js & npm: nodejs.org/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
Was this Typescript Generics tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#typescript #generics #tutorial

[@DaveGrayTeachesCode]

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

[@madhavjha844]

It was tough for me, maybe I'll have to watch it again. Content was great as always.

[@caffeinated-pixels]

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 KZbinrs advertise their tutorials as being for beginners but then completely fail to explain fundamental steps and concepts. Great stuff!

[@DaveGrayTeachesCode]

Glad it was helpful! I really appreciate the feedback! 💯

[@aarondiaz2506]

Dave you the man! Best TS tutorial series i have seen on KZbin, from beginner to "advance". It's long but pays off to see it (no more headaches from TS erros 🤣)

[@studyingasyouwere]

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!

[@DaveGrayTeachesCode]

Nice work!

[@VanPetersonKpoti]

I like all your content. They are always top notch and well done. Typescript Generics are not as complicated as we think. Thanks Dave.

[@ScriptRaccoon]

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".

[@DaveGrayTeachesCode]

Agreed and thanks! Yes, with Microsoft behind both TS and VS Code, the integration and dev experience is excellent. 💯

[@sinxenon3181]

Amazing explanation! I'm shocked about how great teacher you are! Thanks a lot!!!

[@loaiamer7097]

Played 20 sec after video posted :D

[@oussemabouyahia474]

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

[@k303k]

Thanks a million Dave!

[@NOTHING-en2ue]

very nice tutorial, thanks a lot 💗

[@roman_k89]

thanks, Dave! Brilliant as always💙💛

[@DaveGrayTeachesCode]

You're very welcome! 💯

[@riyadhossain1706]

Thanks a lot for such an awesome Typescript playlist

[@DaveGrayTeachesCode]

You're welcome!

[@gmjitendra]

Detailed explanation found here over TS Generics. Thanks Dave for this lovely video. :)

[@DaveGrayTeachesCode]

You're welcome!

[@shahramkhaleh3078]

Thanks. for Best typescript tutorial 🌹

[@DaveGrayTeachesCode]

You are welcome 😊

[@1conscience0dimension]

Super clear and perfect examples

[@DaveGrayTeachesCode]

Thank you!

[@sonamohialdin3376]

Amazing tutorial thank you

[@DaveGrayTeachesCode]

You're very welcome!

[@regilearn2138]

Awesome, Eagerly wafting for your REACT with all the hooks/MERN/Redux + TYPESCRIPT ADVANCE real world project. ❤❤LOVE YOU DAVE❤❤

[@DaveGrayTeachesCode]

Thanks!

[@user-fk2eq9dp2p]

Thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@harmez7]

thank you Mr. Gray

[@DaveGrayTeachesCode]

You're welcome!

[@fizzdevdesigns5699]

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?

[@user-te2pe5qm8o]

Dave is always there when you need help in the developer journey

[@DaveGrayTeachesCode]

🙌🚀🚀

[@hosamgnaba3205]

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

[@DaveGrayTeachesCode]

You're welcome!

[@doongie07]

Hey Dave, have you thought about making a cloud computing course?

[@DaveGrayTeachesCode]

I have not but thank you for the request!

[@sparshverma1369]

The first example reminds of templates in C++ in STL

[@adelprog]

null is an object, thanks for this information

[@user-wh6ki2oj3l]

Hi Dave, I hope next you make full tutorial about NextJS with real world project because I like your teaching style

[@DaveGrayTeachesCode]

Thank you for the request and the kind words!

[@learn029]

Can you please also make video on either type for response handling type Left type Right Please make video on this

[@DaveGrayTeachesCode]

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.

[@mohamadlakees8318]

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 ?

[@shubhampatankar1468]

Pls post video on angular

[@harmez7]

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 !

[@DaveGrayTeachesCode]

You got this! 🚀

[@skillkrio]

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.

[@DaveGrayTeachesCode]

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.

[@denmccormik7654]

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

[@DaveGrayTeachesCode]

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.

[@denmccormik7654]

@@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

[@DaveGrayTeachesCode]

@@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.

[@denmccormik7654]

@@DaveGrayTeachesCode Thank you, Dave. Maybe my question is extra stupid. I need some practice to discover it.

[@DaveGrayTeachesCode]

@@denmccormik7654 no question is stupid. That's how we learn. 💯

[@7doors847]

Yeah! TS Tuesday 🤘! ( and maybe some tacos too 😂 )

[@DaveGrayTeachesCode]

Right on! 🌮🌮🌮🌮

[@abubakarsadiqbilyamin7173]

Great course. Really informative. I'd like to join the discord server but the link is expired. Could I have a more recent one?

[@DaveGrayTeachesCode]

Strange because the link does not expire. I just checked. Here it is: discord.gg/neKghyefqh

[@aleksandrpetrov3938]

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? ))

[@DaveGrayTeachesCode]

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.

[@kennedydre8074]

can't we just use the any type?

[@MuhammadSalmanAshraf-hy8gc]

please write problem statment before any example so that we try by ourself nd then match solution with yours

[@ahmedhassan_saver]

Can you please respond to my Twitter message asking you about coming videos titles in this playlist

[@DaveGrayTeachesCode]

Hello Ahmed, I do not check Twitter messages often. Please join my Discord that I check nearly every day: discord.gg/neKghyefqh

[@robertkennedy7772]

promosm

[@dzhaniivanov5837]

100k

[@DaveGrayTeachesCode]

🚀🚀

[@josippardon8933]

Despite video saying it is for beginners, it is not. Especially example with usersArray.

[@siddiqahmed3274]

You should follow the complete series. As this is almost the end of the series you cannot expect to grab all without practicing

[@josippardon8933]

@@siddiqahmed3274 I have gone through every video in series till this one

[@siddiqahmed3274]

@@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.

[@hamzabonga7884]

This is not a beginner friendly I have not understand a single example

[@DaveGrayTeachesCode]

Generics can be difficult to understand. Did you complete the previous 7 chapters before attempting this video? That will help.

[@hamzabonga7884]

@@DaveGrayTeachesCode yes I did complete previous 7 chapters they are completely understandable

[@DaveGrayTeachesCode]

@@hamzabonga7884 Glad to hear I helped with those chapters. Maybe seek some other sources to understand generics if this video didn't help you.

[@user-xn6li8ij2j]

Example is too long and complex for beginners. Should show how the 'T' works first.

[@DaveGrayTeachesCode]

I cannot please everyone. Please feel free to make your own tutorial the way you would like it.

[@Imam.Mehdi_]

​​@@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