Typescript Project from Scratch | Complete Tutorial for Beginners

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to build a Typescript Project from scratch in this complete tutorial for beginners. This tutorial is NOT for Javascript beginners, but it is designed for anyone that has been learning Typescript and wants to build a project that applies Typescript fundamentals. This project is part of my Typescript for Beginners video series.
🚀 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 Project from Scratch
(00:00) Intro
(00:08) Welcome
(00:28) Project Intro
(01:01) Install Node.js
(01:22) Project Set Up with Vite
(05:23) Starter Code in Course Resources
(07:03) Challenge 1: ListItem Class
(08:48) Solution for Challenge 1
(12:28) Challenge 2: FullList Class
(15:03) Solution for Challenge 2
(23:51) Challenge 3: ListTemplate Class
(26:03) Solution for Challenge 3
(36:53) Pulling It Together in main.ts
(46:47) Does It Work?
📚 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:
🔗 Vite: vitejs.dev/
🔗 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 Project from Scratch tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#typescript #project #scratch

[@siddiqahmed3274]

At first it looks too much for too little, but the way everything is organized looks so satisfying and pleasing. Thank you for all this♥️

[@DaveGrayTeachesCode]

You are welcome!

[@DaveGrayTeachesCode]

This Typescript Project (and challenges) is for you if you have been learning Typescript either from my Typescript for Beginners series or from other sources. It is NOT for Javascript beginners. You will be challenged to build a full project from scratch that implements interfaces into class structures and apply Typescript fundamentals for self-documenting code. Questions? Please ask on my Discord here: discord.gg/neKghyefqh

[@prakashbanjade4374]

I haven't made any projects using OOPs while working with JS but this video made me love with OOPs.

[@benankit2341]

Finally some worth watching content.

[@bmehder]

Thank you, Dave. I hope you plan to do more of these TypeScript projects.

[@DaveGrayTeachesCode]

For sure! You're welcome!

[@danielkleszczynski2745]

Hi Dave. I'd like to thank you for a hard work that you put into creating these tutorials. Especially your clear way of thinking and explaining make your lessons stand out from the others. ;-) Although I use Typescript and other technologies at my daily work as required it is always refreshing to see another point of view of a fellow developer. Do you plan to create series of tutorials on Angular or perhaps some backend stuff in the future?

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏 In the future, I do plan to do more backend tutorials, but I have no current plans for Angular.

[@zacharymarcotte7576]

Great project ! Thank you for this! Keep the good work 👌

[@DaveGrayTeachesCode]

Thanks, will do! 🚀

[@aarondiaz2506]

Hi dave, would be really cool if you could add a design patterns and a data structures and algorithms with js or ts videos in the future. I am learning a ton with your ts series and your playlist on advance js, it makes me happy, thank you!

[@010timeboy27]

The shear amount of effort put into these videos is incredible. And for free!? You deserve all the plaudits you receive. Bravo.

[@DaveGrayTeachesCode]

Thank you!

[@MichelleRodriguez-uf7hq]

He deserve a coffee

[@VilliamLundin-bw2mg]

great course, thnaks!

[@sufyad9356]

Hats off to the hardwork !!! ♥

[@DaveGrayTeachesCode]

Thank you!

[@user-sb9ve6zd6p]

Super COOL!!! More practice with TS please! Thank you!!!

[@DaveGrayTeachesCode]

Keep going in this series! There is more! 🚀

[@chidiebereezeokwelume]

Thank you for this wonderful content ❤

[@DaveGrayTeachesCode]

You're very welcome!

[@k303k]

I find it a little hard to follow but i'l rewatch it Thanks for the video Dave

[@Saldymedis]

Thank you so much!

[@brahmgaur4731]

i really love your work sir, you are an excellent person to learn from. I am really thankful to you for helping me in my journey. keep up the good work, Love from INDIA..❤🇮🇳

[@DaveGrayTeachesCode]

Thank you for the kind words and hello to India! 👋

[@fizzdevdesigns5699]

Great project. It is always so important to put to the test what has been learned. I completed your TS course and was thinking 'what can I apply it to?...' and Shazam! You posted this! Fantastic! One question : why the choice of a string for ID? Why not a number (which would ease up the processing when creating a new one?) Thank you again, your contents are gold!

[@DaveGrayTeachesCode]

Glad it was helpful! I'm not finished with the course yet 😀 ...string for ID question - mostly preference here, but often, IDs are strings so I went with that. I kept it simple here but IDs frequently have prefixes like DGTC0001 or similar. They can be calculated or received from a database, etc.

[@MOJICA7257]

Thanks Dave!!

[@DaveGrayTeachesCode]

You're welcome!

[@TravinskiyVladislav]

Thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@davithchhung7577]

Great video as always Dave. Btw have you seen new version of react router ? It looks really nice. It's good If you can make a video cover everything about it.

[@DaveGrayTeachesCode]

Thank you and great request!

[@datadriveAshura]

Thanks for sharing.

[@DaveGrayTeachesCode]

You're welcome!

[@sinnis_879]

Thanku sir for this project, well I also make some changes into it for experimentation and I learn a lot.😊

[@DaveGrayTeachesCode]

You're welcome! I always do that, too. It helps you learn! 💯

[@nouchance]

Amazing SIR!

[@DaveGrayTeachesCode]

Thank you! Cheers!

[@pratikshakya4373]

hi dave, its a great learning way after the success of this tutorial but when I tried to run the project without using Vite like the previous TS tutorial it doesn't work at all even after i set the same config file. can i get some help on how can i make it work without using Vite?

[@inteliconn995]

Thanks!

[@DaveGrayTeachesCode]

Welcome!

[@alirabiei2344]

could we expect react + typescript (with redux & router) in your amazing channel sir?

[@DaveGrayTeachesCode]

That sounds like a good idea for the future!

[@biLLie_wiLLie]

Classy tutorial. Can you code a node backend with TS for this frontend?

[@DaveGrayTeachesCode]

You can use TS with Node.js. That would be a good beginner project for Node + TS.

[@itech_1]

what kind of extions do you have?

[@vaibhavshukla1685]

i have a question why we need the template here it is way to do in the typescript or it is just the style to do it.. or there is another to do please clear my doubt

[@DunckingTest]

dave great content .i have a question when you step on a function there is a green line that highlight the scope of the function. can you please tell me how to enable that feature

[@DaveGrayTeachesCode]

Go to settings, search for the word bracket. Enable Bracket Pair Colorization. 💯

[@michalnowak2181]

thx

[@net_economy]

Am I right that it is written in MVT architecture?

[@zettai8087]

Only viewing the app after writing all codes isn't really good. I ended up with a bug . When I add an item, it adds but doesn't display any text in the list

[@user-wh6ki2oj3l]

Hi Dave, I'm thinking about an idea that will make you be the first one by making MERN stack with full TypeScript or you could call it MNNN stack ( -Morning No Nut November- I mean Mongodb NestJS NextJS NodeJS) with simple real world application project of course. But first you may make NextJS and NestJS specificly first in separate tutorial so that if there is some codes or functions that you use in MNNN, you could refers to your previous tutorial. As long I search on KZbin there isn't single one that really specific MNNN tutorial but if there is exists, your coding and teaching style are completely different and that makes you have +++ value compared to another, you may want to know what I like or maybe others too about your teaching style: 1. Your voice intonation and naration is great I mean I never feel boring or sleepy while listening to your tutorials 2. Your pronounciation is correct like to say root and route, English is not my native language anyway, it's my third language, but I often feel bother when someone pronouncing that 2 words are the same 3. I like the noisy of your keyboard when you typing, I also prefer using PC keyboard than flat keyboard on laptop, idk maybe I'm weird or something I just like the noisy sounds of my keyboard and mouse 4. Your examples are real world apps and not to do list project like others did, so it can apply or modify to someone's project that have similarity, I'm a student and I learned aloooooot of things from this channel I hope you understand what I'm saying since my English is not perfect

[@DaveGrayTeachesCode]

Thank you for the request and for the kind words! 🙏💯

[@user-wh6ki2oj3l]

@@DaveGrayTeachesCode you're welcome and you know what Dave? we have the same hair style lol

[@DaveGrayTeachesCode]

@@user-wh6ki2oj3l right on!

[@mohammadmahdialvansaz8001]

Thank you sir

[@DaveGrayTeachesCode]

Welcome!

[@tukhtaevoff]

Perfect Tutorial. I ask you to post a new video which is Redux tutorial. I think, That would be great for most of the people.

[@DaveGrayTeachesCode]

Thank you! I have a Redux course here: kzbin.info/www/bejne/hKLdlYmEZ9msrLM

[@jaisuperawesome]

What's meaning of putting underscore?

[@anlgul1571]

Hi Dave, i want to learn Angular based on TypeScript. Which channel or playlist do you suggest?

[@DaveGrayTeachesCode]

I do not have an Angular recommendation. That's one I have stayed away from, but you can find many Typescript videos on KZbin. Matt Pocock is a good Typescript resource.

[@nakayuni]

My Mentor : )

[@Web-Himansu]

Sir we know that from childhood books are the best for learning because if any experienced expert person pass away then his books gives us that knowledge another thing that is you don't wait for that person's for 5 years you read that life time experience at just within 5 minute in that books please sir tell me that books,videos,article, what is the best way to learn anything not just for programming.

[@Web-Himansu]

Sir which operating system best for programming and you used

[@DaveGrayTeachesCode]

Whichever you are comfortable with. If you have always used Windows, stick with it. If you like Macs or Linux, go right ahead. VS Code is available for all 3.

[@akmaljorayev5306]

Pleace , nodejs + typrscript and nodejs project tutorial.

[@SnakePliskin30]

I'm kinda confused how you made the class singleton, although I tested and it is working. Don't we need a method like getInstance to check if instance is not null then we instantiate it else we return the existing static instance?

[@DaveGrayTeachesCode]

What you are describing is a frequently used pattern for Singletons, but in this case, what I am doing works well as is.

[@SnakePliskin30]

@@DaveGrayTeachesCode thanks for the answer and for the videos.

[@hananeaderdoure6859]

Are those interfaces mandatory ? Can we create classes without any interface Thank you, great content

[@DaveGrayTeachesCode]

They are a good idea, but not mandatory. An interface helps set up requirements for a class.

[@dharmeshgohil9375]

nice one

[@DaveGrayTeachesCode]

Thanks!

[@michaelscofield2469]

please do typescript for react Tutorial

[@hussainimusa9204]

Good day,thanks for all you do...may God reward you.but please can you create a node and typescript API project or do you have a typescript and node course on Udemy?

[@DaveGrayTeachesCode]

Thank you for the request! I do not use Udemy. However, I do want to create a Node.js and TypeScript tutorial.

[@hussainimusa9204]

Thank you sir, would be looking forward to that sir

[@khitibhusannaik1471]

Sir is your videos always free for people who are willing to learn programming.

[@DaveGrayTeachesCode]

The videos I publish to KZbin are free 💯

[@true_visual]

Is it normal if I understand everything but when it comes to make something on my own everything gets deleted from my mind and I'm like someone with no idea on everything?

[@codie1372]

I have one question cant we use functions instead of class i always found that classes are just complicated and too much boilerplate code which is difficult to understand

[@DaveGrayTeachesCode]

Of course, there is always more than one way to do something. I would not consider any tutorial as _the only way_ to achieve the result. That said, TypeScript works well with classes and when not using a library like React or a framework, the OOP approach of using classes and methods organizes the code well. TS has also been said to add "too much boilerplate" but it provides benefits of readability and organization - same goes for classes.

[@Salah-YT]

thank u for the video but I understand about %50 so I think this is not a beginner TS project anyway thx

[@DaveGrayTeachesCode]

It is part of my TS series for beginners ( kzbin.info/aero/PL0Zuz27SZ-6NS8GXt5nPrcYpust89zq_b ) If you start at the beginning of the series and work your way to this video, it should apply much of what you learn along the way.

[@Salah-YT]

​@@DaveGrayTeachesCode thank u for that but I didn't follow along I have a course from Udemy so I'm halfway and I'm in the advanced section and the teacher using a lot of classes so I'm really bad for class and I hate it I can't learn so even more than a year I did a lot of courses javascript but is till struggle so maybe u think this is for a beginner but for me is not so I love ur channel anyway but I'm on tutorial hell bro I don't know what to do I spend a lot of money on Udemy and I do a lot of project on KZbin but still I can't make even small project by my self for anything I must watch the video so thank u anyway bro

[@DaveGrayTeachesCode]

@@Salah-YT keep learning just a little bit every day. I don't think this specific tutorial is a good follow-up to all the previous lessons. Lesson number one in the series starts from scratch. I recommend a beginner start at lesson 1 and work their way towards this project.

[@Salah-YT]

@@DaveGrayTeachesCode ok bro when i done my course ill think about that and thank u so much

[@Web-Himansu]

Sir Javascript bible book good or not

[@willyhorizont8672]

🚀🚀🚀

[@Web-Himansu]

Sir which is best books or video courses and article or their own websites? And sir how to connect with you lifetime how to join with you please sir tell

[@DaveGrayTeachesCode]

You can join my Discord for discussions. Link is in the description.

[@ua2894]

Dave you didn't check whether the load method works!

[@DaveGrayTeachesCode]

I don't remember, but if the code is there, you can check it 🙃

[@ahmadnabil5779]

Please make tutorial refresh token using redux toolkit query

[@DaveGrayTeachesCode]

It has already been made: kzbin.info/www/bejne/Y3utd4Rvl9CImNE

[@ahmadnabil5779]

@@DaveGrayTeachesCode sorry i didn't look for it first, thank youu

[@firstlastcode]

Anybody here who can help me get a job please? My PC is spoilt please guys I need job I don't have job yet my carrier is hinded please. I don't really have much experience so I always feel like I need to practice more and more

[@azizbekjuraev1]

I think u are making it very difficult by using class instead of function. New people learning ts will be disappointed for sure if they see this video

[@kubakazimierczak6646]

It's my first contact with learning TS (but not with types in general) and I feel disappointed by this video. There was no real explaination as to why we use interfaces and what for. The type inference, which is the powerful and useful concept, was not even mentioned for first 30 minutes of the video. After 28 minutes of watchtime, it just feels that the tutor doesn’t explain what is happening at all. He just tells what he has typed, which in my opinion is exactly why this tutorial takes almost 50 minutes. Mind you that I have experience with programming in different languages so for a well-versed person this tutorial might be too broad. Not that it isn't good - it just wasn't a fit for my skill level and the understanding I wanted to get.

[@michaelsaucedo3952]

Getters Setters