Typescript Project from Scratch | Complete Tutorial for Beginners

Web Dev Roadmap for Beginners (Free!): https://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: https://bit.ly/WebDevMaster
– Master the Coding Interview: https://bit.ly/FAANGInterview
– Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions – Please post them to my Discord ➜ https://discord.gg/neKghyefqh

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

🔗 All Resources for this Typescript Course: https://github.com/gitdagray/typescript-course

🔗 Playlist for this Typescript Course: http://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: https://youtu.be/EfAl9bwzVZk

📚 Tutorial References:
🔗 Typescript Official Website: https://www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: https://dev.to/destrodevshow/typescript-and-c-both-created-by-the-same-person-named-anders-hejlsberg-42g4
🔗 Stackoverflow Survey Results: https://survey.stackoverflow.co/2022/#technology-most-popular-technologies
🔗 MDN – Static Typing: https://developer.mozilla.org/en-US/docs/Glossary/Static_typing
🔗 MDN – Dynamic Typing: https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing
🔗 MDN – Type Coercion: https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
🔗 TS Type Assertions: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

⚙ Web Dev Tools:
🔗 Vite: https://vitejs.dev/
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Node.js & npm: https://nodejs.org/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Was this Typescript Project from Scratch tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#typescript #project #scratch