How To Build Your First TypeScript Project - TODO List Application

  Рет қаралды 239,321

Web Dev Simplified

Web Dev Simplified

Күн бұрын

It is finally time that I create a full TypeScript project. In this video I show you how to create an entire TODO list application in TypeScript. I also show you how to get started with TypeScript in both a basic and advanced way.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/t...
Node Download Video: • Your First Node.js Web...
Optional Chaining Video: • 5 Must Know JavaScript...
Optional Chaining Article: blog.webdevsimplified.com/202...
Should You Use TypeScript Video: • Is JavaScript Dead?
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:49 - How To Install TypeScript
02:10 - Basic TypeScript Setup
06:01 - Bundler TypeScript Setup
10:30 - How To Build The Todo List App
#WebDevelopment #WDS #TypeScript

Пікірлер: 213
@dechobarca
@dechobarca 2 жыл бұрын
Hey Kyle, great to see you covering some TypeScript. I would definitely be interested in future videos if you decide to cover more advanced topics. Cheers!
@19cornholio90
@19cornholio90 2 жыл бұрын
This was a perfect intro tutorial for a TS project. I followed along the tutorial, and then wrote down the steps I took. The next day I created the tutorial based on these steps. Then the next day I created it from scratch. Great learning experience. Thanks!!
@spoodermen2530
@spoodermen2530 Жыл бұрын
dis is da weh doing thing from memory is really good, makes you remember it for a long time when we recollect and do things
@lucydelaluna
@lucydelaluna Жыл бұрын
You're such a great teacher. Highly appreciate your content and ability to explain things so simply.
@njo_lv
@njo_lv Жыл бұрын
Loving these project tutorials. I am learning both React and TypeScript and your videos have been gold. The fast pace challenges me to keep up. Thank you for the clear and concise content. 👏
@256k_
@256k_ Жыл бұрын
this was a great intro for me, i watched many videos going into a lot of theory, but seeing it in practice and seeing right away the linting and error warnings and how the code is a lot more reliable like people say. thank you
@hachapacha5081
@hachapacha5081 2 жыл бұрын
dude this tutorial is so useful.i have try to learn typescript for a long time but I couldn't find a clear tutorial. you killed it man. please make more.
@darkjedi6614
@darkjedi6614 Жыл бұрын
LOVED this tutorial! Very informative and very easy to follow! Thank you so much. Like the others, I would love to see more TypeScript tutorials. If possible, some centered around API usage please. I'm still learning TypeScript and this tutorial helped me so much. Thank you! :)
@swapnilkuwar7040
@swapnilkuwar7040 2 жыл бұрын
When you're going to give guitar lessons?
@Vyse86
@Vyse86 2 жыл бұрын
Yes...been wanting a nice quick TypeScript tutorial. Thanks!
@kasopejohnson3831
@kasopejohnson3831 Жыл бұрын
Really great simple hands-on application of typescript for practice. One thing I noted, when the browser threw an error trying to run module syntax, it was actually because you didn't specify the type of the script as "module" in your script tag
@HHJoshHH
@HHJoshHH 2 ай бұрын
Yay I got all the way through it this time! I'm so pumped that I was able to do this so fast. I've been working hard to get this far. Thanks Kyle. You rock man.
@taroserigano6546
@taroserigano6546 2 жыл бұрын
Awesome Kyle! I was waiting for Typescript projects!
@kraxen72
@kraxen72 2 жыл бұрын
great tutorial. please more typescript ones, for example how to properly define interfaces, types and set up definition files. also please try svelte (with vite or sveltekit)
@scottlexium
@scottlexium 2 жыл бұрын
You just made me love typescript 😂, please do a playlist on it for beginners
@RC-14
@RC-14 2 жыл бұрын
A video about all of the configs would be nice.
@tejaswan
@tejaswan 2 жыл бұрын
I have just planed to learn typescript. and u made a video on typescript 👏
@marcelobrasil-developer8678
@marcelobrasil-developer8678 2 жыл бұрын
Great video as always!! Keep it up with the Typescript!
@DennisVeeMusic
@DennisVeeMusic 2 жыл бұрын
What a great lesson! Thanks a lot!
@simpleedge
@simpleedge Жыл бұрын
Woah! I finally get why typescript is so amazing!!!! It preemptively exposes possible errors in your code before you deploy! 😱😱 This is 🔥🔥🔥🔥
@develxper7931
@develxper7931 2 жыл бұрын
Thanks very much , i really appreciate your content , you literally simplify complex things
@DragonWhisky
@DragonWhisky Жыл бұрын
Thank you, Kyle. I enjoy this short course.
@DonWeaita
@DonWeaita 2 жыл бұрын
This is just what I need it, nice timing.
@Working800
@Working800 2 жыл бұрын
Great video as always, I'll definitely try it
@r4rbit
@r4rbit 2 жыл бұрын
I followed this tutorial to create my first web app ever. Little did I know, it would also make creating my first Angular project so easy (Tic-tac-toe by Fireship). I've learned so much with your videos. Thank you for being such a great teacher and for sharing what you know Kyle. Greetings from El Salvador!
@ajsyt
@ajsyt 2 жыл бұрын
Or just use npm init vite and select vanilla-ts ⚡
@oggy107
@oggy107 2 жыл бұрын
vite is 🔥
@beinyourguard
@beinyourguard 2 жыл бұрын
vite is really cool
@AmodeusR
@AmodeusR 2 жыл бұрын
The best!
@ccedev
@ccedev Жыл бұрын
I switched from webpack to vite, and I never want to go back. I tried Svelte for my portfolio development, and I don't want to change that. Some tools are overrated, but many are amazing.
@haythamkenway1561
@haythamkenway1561 2 ай бұрын
Vite is garbage. for couple seconds faster compiling time, you have to always and always configure the module bundler. folder structure is also inconvenient. and lasty, why the hell I need to install module bundler plugin to add PWA functionality to my project? you can literally have PWA on vanilla js project without any kind of plugin. it is fast because it has nothing inside of it and you have to reinvent the damn wheel.
@mrFighter924
@mrFighter924 5 ай бұрын
Finally someone locally do it! Thank you!
@Marty72
@Marty72 2 жыл бұрын
Best demonstration of the benefits given by using TS
@firstname-lastname
@firstname-lastname 2 жыл бұрын
Hands down, best small TS intro ever :)
@codingislove3707
@codingislove3707 2 жыл бұрын
nice! an advanced typescript project would be awesome. also a bigger reactjs typescript project would be sweet! thx
@jonsson7460
@jonsson7460 Жыл бұрын
agree!
@shadmanfatin777
@shadmanfatin777 2 жыл бұрын
*Really excited to see you reaching 1 Million Subs Kyle brother*
@27sosite73
@27sosite73 Жыл бұрын
Kyle, you are THE LEGEND thank you!!!
@aravindgop1
@aravindgop1 2 жыл бұрын
That was a quick and a very good video... i have been following you for a while now and I am eager to see your desk setup and other cosmetic stuff behind the scenes which usually any other youtubers would have posted a hundred times :)
@Niksorus
@Niksorus 2 жыл бұрын
Amzing intro, I would love more!
@lookwhoneedsahobbie
@lookwhoneedsahobbie 2 жыл бұрын
This is awesome thank you for this 🙏
@enriqueruiz320
@enriqueruiz320 Жыл бұрын
Justo lo que buscaba... pocos tutoriales de estos 🤯🤯
@shozdott
@shozdott Жыл бұрын
You crack me up lol , love how you impliment shallow concerns even ... " You can make changed to this If you need , If you want to like know how this works " lol
@belkocik
@belkocik 2 жыл бұрын
NICE! Looking forward to more TS! :)
@user-mo3cw6go7c
@user-mo3cw6go7c 10 ай бұрын
You make it simple. Thanks ❤❤
@Salah-YT
@Salah-YT 9 ай бұрын
thank you so much
@kurdmajid4874
@kurdmajid4874 Жыл бұрын
amazing video helped me understand typescript way better.
@khoinguyen-ft2ys
@khoinguyen-ft2ys 2 жыл бұрын
Thanks for your video. Please make more videos about typescript, especially videos about type, convert type, generic type, error with type... JavaScript is not dead, but today a lot of people write code using typescript so I think you should add more videos about it
@jakeedgar3076
@jakeedgar3076 2 жыл бұрын
Would love more typescript!
@chiroaksun8737
@chiroaksun8737 2 жыл бұрын
PLS MORE TYPESCRIPT... Very nice content thank you very much, i learn a lot with your tutorials :D
@cbsaikumar
@cbsaikumar 2 жыл бұрын
Loved it, also Please cover some advanced concepts like generics etc
@xtraszone
@xtraszone 2 жыл бұрын
Nothing is more exiting than starting a typescript project 😁
@faizanahmed9304
@faizanahmed9304 2 жыл бұрын
Yeah
@robertoacuna4667
@robertoacuna4667 3 ай бұрын
wow amazing thank you
@crim-son
@crim-son 2 жыл бұрын
Awesome content kyle💪
@imigi427
@imigi427 Жыл бұрын
Thank you for that tutorial
@StrayKev
@StrayKev 2 жыл бұрын
I have been waiting for this.
@adairoreyes1644
@adairoreyes1644 2 жыл бұрын
I loved it, please make more TS content :)
@yazhini513
@yazhini513 Жыл бұрын
Thank you!!
@bryson2662
@bryson2662 2 жыл бұрын
Woot! Kyle doing typescript.
@sadullahtanrikulu
@sadullahtanrikulu 2 жыл бұрын
Thank you, very useful video, i got a plenty of benefits. :)
@mahmoud-bakheet
@mahmoud-bakheet 2 жыл бұрын
Thank you ❤❤❤
@thursmornsunlight
@thursmornsunlight Жыл бұрын
This looks great. I have no idea why I have this right-click error. But I am sure it'll work on other computers LOL. I am always getting errors when I follow tutorials. Ha! Uncaught TypeError: event.cancelBubble is not a function at HTMLDocument.bringBackDefault (new_rightclick.js:87:31) Thanks for the videos! Hope to see more typescript videos!
@noobbot7392
@noobbot7392 2 жыл бұрын
would definitely love to learn typescript as now i am seeing javascript wouldn't provide much design patterns in backend development
@captainom5065
@captainom5065 2 жыл бұрын
Ur great thanks
@broadshare
@broadshare 2 жыл бұрын
I like typescript, please do more projects on typescript
@mohitmohlia8420
@mohitmohlia8420 2 жыл бұрын
YES YES YES MORE TYPESCRIPT TUTORIALS !!!!
@michaeldoh9069
@michaeldoh9069 2 жыл бұрын
Web Dev Simplified as advertised 👍
@outhwithauldraft5979
@outhwithauldraft5979 2 жыл бұрын
9:24 wait hold the frickin' phone for a second. how does NOT give an error? the dist folder does not exist nor does the index.js file. what is this magic?
@alvaprince4726
@alvaprince4726 Жыл бұрын
I agree. Even when it is manually created tsc doesn't spit the index.js out into the dist folder. So how is he getting it to work??
@halestormtv
@halestormtv 9 ай бұрын
I resolved by Ctrl+C to cancel in terminal, then re-run with npm start. Then my html had the HI msg in the console output.
@arifinoid9936
@arifinoid9936 2 жыл бұрын
More typescripts please 👍
@typicalmolly7737
@typicalmolly7737 Жыл бұрын
godly tutorial man
Жыл бұрын
Good Jobs 🤟🏿
@suryapratapsingh5149
@suryapratapsingh5149 2 жыл бұрын
as usual great video, I Need to understand generics completely so please bring up some videos if your time permits.
@thevividversatilechannel4807
@thevividversatilechannel4807 Жыл бұрын
@13:36 That is a type assertion (`as` syntax) You can use `document.getElementById("new-task-form")`. This is the same as `document.getElementById("new-task-form") as HTMLFormElement`. @15:00 You can use the non-null assertion operator if you are sure that what you are using is not null and not undefined. This is an exclamation mark (!) and is used after an expression. When creating (no need to use this operator afterwards): `const input = document.querySelector("#new-task-title")!` When using: `input!.value` Note: this is removed in transpilation and is just to make TypeScript happy.
@kevyyar
@kevyyar Жыл бұрын
thank you that works. This KZbinr never responds to comments but it helps people who read them.
@augustocapeto8444
@augustocapeto8444 4 ай бұрын
thanks! changing the 'const form' fixed everything here (page was reloading even with preventDefault, wasn't adding tasks nor saving them)
@neo9117
@neo9117 7 ай бұрын
more vanilla js & ts videos please this really helps me
@raitaskeen
@raitaskeen 7 ай бұрын
Hello dear please make more TS projects like this your efforts are amazing 🥰
@faizanahmed9304
@faizanahmed9304 2 жыл бұрын
Yes, we would love to see more tutorials on Typescript
@ankittyagi1178
@ankittyagi1178 2 жыл бұрын
Love you man
@slashd
@slashd 2 жыл бұрын
Great video, I learned a lot from it! Also, is there any Svelte video's coming soon?
@bekagray837
@bekagray837 2 жыл бұрын
Please make more TypeScript tutorials!!
@kuroexmachina
@kuroexmachina 2 жыл бұрын
sheeeeeesh he finally decided to join the TS elite gang
@alvirarahman1559
@alvirarahman1559 Жыл бұрын
OMG, can u make a TS Project series? One beginners project, and then go slightly advanced to really advanced? That would be brilliant.
@kevin3495
@kevin3495 Жыл бұрын
you can pick any normal js beginners project master it and try to build it with typescript
@eles108
@eles108 Жыл бұрын
Thanks. You may give more TypeScript.
@Berserkaroid
@Berserkaroid 2 жыл бұрын
Great video introducing typescipt. My only comment is when you are typing console commands (like npm), don't have the input line at the bottom of the video as the youtube timeline blocks it when the video is paused.
@TheScriptingLegend
@TheScriptingLegend 2 жыл бұрын
Would love to see how to use react with typescript
@hikari1690
@hikari1690 2 жыл бұрын
Any tutorial from you is good. I feel my single dead braincell reviving with every video I watch. At this rate it might start working and maybe even multiply so I can finally have 2 braincells to rub together
@geneee
@geneee Жыл бұрын
would this work in the loadTasks function? function loadTasks(): Task[] { const taskJSON = localStorage.getItem("TASKS") as string return JSON.parse(taskJSON) } basically type assertion.
@ibrahimyoussef4489
@ibrahimyoussef4489 3 ай бұрын
I will be happy of Kyle make many games with vanilla Typescript
@techvidsnet
@techvidsnet 8 ай бұрын
Hey Kyle thanks for the video. I have a question. bind checkbox on change on newTask event that was called on submit when item is pushed to array how that checkbox still bind to the value
@AlexCernat
@AlexCernat 2 жыл бұрын
great video, thanks! just one question: I saw that you used == in ts, or in javascript the recommended comparison operator in === (to exclude type coercion and unneeded side effects); should I assume that ts compiler "transforms" ts == into javascript === and == is the right operator in ts?
@justSomeUserOnYT
@justSomeUserOnYT 2 жыл бұрын
JavaScript is interpreted, not compiled. Typescript is simply transpiled into JavaScript. However I don't think the transpiling would replace a == for a ===
@konnichiwa01
@konnichiwa01 2 жыл бұрын
@@justSomeUserOnYT do you know how to remove a to-do. example to delete a single to-do
@chinmayghule8272
@chinmayghule8272 10 ай бұрын
If you're using Vite and you get an error when you create a vanilla typescript project and try to run it, trying deleting the project and starting again or re-installing the packages 'Vite' and 'Typescript'. In my case for some reason when creating the project using Vite the 'Vite' library wasn't installed properly, and the problem went away after I installed it again.
@compncheese8358
@compncheese8358 Жыл бұрын
* Me copying and diving into deep details with every line of code Simplified does* Simplified: We will be delteing all this Me: 🙂
@ztamnaja
@ztamnaja 2 жыл бұрын
so cooooool
@rishabsharma5307
@rishabsharma5307 2 жыл бұрын
Typescript is 🔥
@enginvolkan
@enginvolkan Жыл бұрын
Hi, thanks for your nice videos. I'd like to ask if you have any idea about the "'tsc' is not recognized..." problem. I tried everything on the net and cannot solve it. Thanks.
@user-gi6yc5nu6g
@user-gi6yc5nu6g 2 жыл бұрын
Hey, is there a reason that you writing your functions in the old way instead of arrow functions ? thanks
@irvingmontero5653
@irvingmontero5653 2 жыл бұрын
I think it's because arrow functions are not hoisted. Hoisting basically puts all declarations of variables and functions to the top of the script at runtime. That's why you can invoke a function before declaring it.
@hoyinli7462
@hoyinli7462 2 жыл бұрын
finally you start using TS!
@imperror555
@imperror555 2 жыл бұрын
TS must have in any new projects
@captainom5065
@captainom5065 2 жыл бұрын
Pls make one with pure javascript and sevelte
@pscheung206
@pscheung206 Жыл бұрын
I got a little confused by the setup instructions after when it looked like the app was setup, then deleted then setup again with a new command. Does the cmd line action `npx create-snowpack-app . --template @snowpack/app-template-blank-typescript --force` ...completely take the place of the prior npm setup in the tutorial? 'npm init -y' and 'npm i --save-dev typescript' ? Thanks!
@abhinavjha3082
@abhinavjha3082 Жыл бұрын
Yep, it completely takes place of those two commands
@WispOfSoul
@WispOfSoul Жыл бұрын
if you plan on doing a project like this, please note, snowpack is no longer maintained please don't use it, instead use something like vitejs, parcel, rollupjs or esbuild
@kevin3495
@kevin3495 Жыл бұрын
yea, but the point of this video is litteraly just how to get started with using typescript this will work with other package bundler
@tomasburian6550
@tomasburian6550 2 жыл бұрын
When it comes to TS, we've done this type of projects to death. I'd appreciate something that deals with async functions or something more complex.
@jameswan2963
@jameswan2963 2 жыл бұрын
Can a snowpack project be host under nodejs?
@DJ_Melech
@DJ_Melech 8 ай бұрын
at 4:13 you show the console with "hi 2" but how do you launch the dev server to get the app running in our browser? I can't see "Hi 2" in my console when I try and open the index.html file in my browser.
@catafest-work
@catafest-work 2 жыл бұрын
can you tell me why you don't have a dist folder build with tsc command because I don't see the booleans inputs from HTML and I don't have errors on my project. Also I used your github repo and not work ... maybe I miss a step on this video tutorial. thank you.
@andresrv88
@andresrv88 Жыл бұрын
Hi! I'm leaving this here because I could not find anything on the Snowpack website or on Stackoverflow. I installed the `html2json` module and the @types that come with it. I even created a code to use it, but it is failing with the following error: Unhandled Runtime Error Uncaught TypeError: Cannot set properties of undefined (setting 'HTMLParser') I don't seem to find the reason why is not working. If I remove the import, or even more, it works if I remove the reference inside the code to that module. If anyone know why is this happening, I would appreciate the help! Thanks!!
@swaroopbabaleshwar6072
@swaroopbabaleshwar6072 Ай бұрын
at 10:24 video where does snopack keeps compiled ts code ? how does this snopack tells browser to use the uuid from node_modues ?
@codewithengineer
@codewithengineer 2 жыл бұрын
There are some website where one can auto fill a form using resume upload. How do we make such thing?
@Steve-Richter
@Steve-Richter Жыл бұрын
where is the /dist folder and the index.js file that was created by snowpack?
@halestormtv
@halestormtv 9 ай бұрын
there is no actual dist folder. After adding the script line to HTML, I resolved by Ctrl+C to cancel in terminal, then re-run with npm start. Then my html had the HI msg in the console output.
Can I Create This Typing Animation Using TypeScript?
27:18
Web Dev Simplified
Рет қаралды 46 М.
TypeScript - The Basics
12:01
Fireship
Рет қаралды 1,5 МЛН
Василиса наняла личного массажиста 😂 #shorts
00:22
Денис Кукояка
Рет қаралды 8 МЛН
FOOLED THE GUARD🤢
00:54
INO
Рет қаралды 60 МЛН
Children deceived dad #comedy
00:19
yuzvikii_family
Рет қаралды 3,3 МЛН
Whyyyy? 😭 #shorts by Leisi Crazy
00:16
Leisi Crazy
Рет қаралды 20 МЛН
How To Create An Advanced Shopping Cart With React and TypeScript
1:01:38
Web Dev Simplified
Рет қаралды 340 М.
Learn useState In 15 Minutes - React Hooks Explained
15:45
Web Dev Simplified
Рет қаралды 1,1 МЛН
State Managers Are Making Your Code Worse In React
13:33
Web Dev Simplified
Рет қаралды 157 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 164 М.
Liskov: The Liskov Substitution Principle
4:23
Turing Awardee Clips
Рет қаралды 19 М.
TypeScript in 100 Seconds
2:25
Fireship
Рет қаралды 827 М.
Html Css JavaScript TypeScript Todo List.
14:48
sitowebveloce
Рет қаралды 1,3 М.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 455 М.
Василиса наняла личного массажиста 😂 #shorts
00:22
Денис Кукояка
Рет қаралды 8 МЛН