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!
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!!
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.
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)
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
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.
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.
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. 👏
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! :)
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?
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.
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
@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.
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.
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
I went through this but found I need more basic / assumed knowledge in this video, such as the idea of object, function, component. What video or webpage resource do you recommend?
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!
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.
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 :)
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.
here is my problem with videos like this, he used snowpack which was updated at the time, but hasn't been updated in 3 years. This is a massive issue with modern web dev. To many services that are never updated.
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.
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!!
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
Is there some way to throw exceptions in JS? If you want to read an element with a specific ID and it returns null then that means your program is clearly broken. "Catching" this with the question mark operator and pretending the program can continue will only make it harder to understand why your users see a blank or uninteractive page where nothing happens.
thats why he write "if (input?.value === null || ...) return;" that line is gonna stop the program if the value is null or the input is not defined, you can check if input is exist if not you can throw exeption to it. by the way you can throw exceptions in JS like this: throw new Error(message)
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.
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
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.
Uncaught HierarchyRequestError: Failed to execute 'append' on 'Element': The new child element contains the parent. above error is shown while adding task. please help me to get rid of this
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
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!
Hi Kyle, I am pretty new with TypeScript and I followed the tutorial, when I added the list - then it doesn't show as the checkbox for me. Not sure if I do miss something. I have been reviewing it over again and again. If you could please help. Thank you so much
would this work in the loadTasks function? function loadTasks(): Task[] { const taskJSON = localStorage.getItem("TASKS") as string return JSON.parse(taskJSON) } basically type assertion.
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?
JavaScript is interpreted, not compiled. Typescript is simply transpiled into JavaScript. However I don't think the transpiling would replace a == for a ===
"npm run start" in your project's folder (where you have the package.json saved), to start the snowpack live server. it will watch for changes and refresh automatically.
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!
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!!
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
You just made me love typescript 😂, please do a playlist on it for beginners
A video about all of the configs would be nice.
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.
You're such a great teacher. Highly appreciate your content and ability to explain things so simply.
I have just planed to learn typescript. and u made a video on typescript 👏
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)
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
Or just use npm init vite and select vanilla-ts ⚡
vite is 🔥
vite is really cool
The best!
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.
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.
When you're going to give guitar lessons?
nice! an advanced typescript project would be awesome. also a bigger reactjs typescript project would be sweet! thx
agree!
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. 👏
*Really excited to see you reaching 1 Million Subs Kyle brother*
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! :)
Yes...been wanting a nice quick TypeScript tutorial. Thanks!
Nothing is more exiting than starting a typescript project 😁
Yeah
Finally someone locally do it! Thank you!
Woah! I finally get why typescript is so amazing!!!! It preemptively exposes possible errors in your code before you deploy! 😱😱 This is 🔥🔥🔥🔥
Hands down, best small TS intro ever :)
amazing video helped me understand typescript way better.
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?
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??
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.
It's because the file is transpiled in memory, so the only file he needed is index.ts (which snowpack compiled into index.js in memory)
Thank you, Kyle. I enjoy this short course.
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.
Best demonstration of the benefits given by using TS
PLS MORE TYPESCRIPT... Very nice content thank you very much, i learn a lot with your tutorials :D
Awesome Kyle! I was waiting for Typescript projects!
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
Yes, we would love to see more tutorials on Typescript
@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.
thank you that works. This TH-camr never responds to comments but it helps people who read them.
thanks! changing the 'const form' fixed everything here (page was reloading even with preventDefault, wasn't adding tasks nor saving them)
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.
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
Thanks very much , i really appreciate your content , you literally simplify complex things
I went through this but found I need more basic / assumed knowledge in this video, such as the idea of object, function, component. What video or webpage resource do you recommend?
OMG, can u make a TS Project series? One beginners project, and then go slightly advanced to really advanced? That would be brilliant.
you can pick any normal js beginners project master it and try to build it with typescript
would definitely love to learn typescript as now i am seeing javascript wouldn't provide much design patterns in backend development
Kyle, you are THE LEGEND
thank you!!!
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!
Great explanation!
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.
Loved it, also Please cover some advanced concepts like generics etc
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 :)
You make it simple. Thanks ❤❤
Woot! Kyle doing typescript.
This is just what I need it, nice timing.
Hello dear please make more TS projects like this your efforts are amazing 🥰
where is the /dist folder and the index.js file that was created by snowpack?
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.
I like typescript, please do more projects on typescript
here is my problem with videos like this, he used snowpack which was updated at the time, but hasn't been updated in 3 years. This is a massive issue with modern web dev. To many services that are never updated.
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.
more vanilla js & ts videos please this really helps me
thank you so much
Hey 👋.. why did you create the type instead of interface? Can't we use the interface to define inside the parameter.
Please clear my doubt
Great video as always!! Keep it up with the Typescript!
I will be happy of Kyle make many games with vanilla Typescript
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!!
as usual great video, I Need to understand generics completely so please bring up some videos if your time permits.
NICE! Looking forward to more TS! :)
Would love more typescript!
Thanks. You may give more TypeScript.
Amzing intro, I would love more!
Web Dev Simplified as advertised 👍
YES YES YES MORE TYPESCRIPT TUTORIALS !!!!
Justo lo que buscaba... pocos tutoriales de estos 🤯🤯
Please make more TypeScript tutorials!!
Thank you for that tutorial
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
Is there some way to throw exceptions in JS?
If you want to read an element with a specific ID and it returns null then that means your program is clearly broken. "Catching" this with the question mark operator and pretending the program can continue will only make it harder to understand why your users see a blank or uninteractive page where nothing happens.
thats why he write "if (input?.value === null || ...) return;" that line is gonna stop the program if the value is null or the input is not defined, you can check if input is exist if not you can throw exeption to it.
by the way you can throw exceptions in JS like this: throw new Error(message)
also it will throw error automatically if some element is missing thats what ? are for
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.
My page is reloading even with the preventDefault
check all your const in the beginning(list, form, input)
Great video, I learned a lot from it! Also, is there any Svelte video's coming soon?
at 10:24 video
where does snopack keeps compiled ts code ?
how does this snopack tells browser to use the uuid from node_modues ?
sheeeeeesh
he finally decided to join the TS elite gang
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
I have been waiting for this.
Great video as always, I'll definitely try it
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.
Uncaught HierarchyRequestError: Failed to execute 'append' on 'Element': The new child element contains the parent.
above error is shown while adding task. please help me to get rid of this
Awesome content kyle💪
More typescripts please 👍
The minesweeper code is different then what you have on TypeScript Simplified tutorial, Please update it
Kyle is the kind of breezing over errors as if they were part of the script.
There are some website where one can auto fill a form using resume upload. How do we make such thing?
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
yea, but the point of this video is litteraly just how to get started with using typescript this will work with other package bundler
i don’t even get why would you change to TS it’s literally JS but more complicated…
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!
* Me copying and diving into deep details with every line of code Simplified does*
Simplified: We will be delteing all this
Me: 🙂
You can make Vue.js 3 Composition API, Setup Script with TypeScript and Fetch API video? I don't see much videos along this topic on youtube..
Hi Kyle, I am pretty new with TypeScript and I followed the tutorial, when I added the list - then it doesn't show as the checkbox for me. Not sure if I do miss something. I have been reviewing it over again and again. If you could please help. Thank you so much
got the same problem
would this work in the loadTasks function?
function loadTasks(): Task[] {
const taskJSON = localStorage.getItem("TASKS") as string
return JSON.parse(taskJSON)
}
basically type assertion.
wow amazing thank you
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?
JavaScript is interpreted, not compiled.
Typescript is simply transpiled into JavaScript.
However I don't think the transpiling would replace a == for a ===
@@justSomeUserOnYT do you know how to remove a to-do. example to delete a single to-do
This is a very noob question; how do I even run the application on the browser. Do I have to use http or express?
no, you can litteraly create a file with any name and with extension .html and thats it you just created a webpage
"npm run start" in your project's folder (where you have the package.json saved), to start the snowpack live server. it will watch for changes and refresh automatically.
Would love to see how to use react with typescript
Thank you, very useful video, i got a plenty of benefits. :)
I loved it, please make more TS content :)
For anyone getting an error with that uuid import.. just keep going her resolves it at: ~18:30 it is supposed to be an error
What a great lesson! Thanks a lot!
finally you start using TS!
godly tutorial man
Hi kyle, why you not make new react video? Just vanilla js. Are you done with react?
Video about whats new in react 18 would be nice ❤