I spent my day , querying chatgpt and running around stack overflow , and watching TH-cam videos to learn the compiling process, thanks man you are a life saver ❤
Thank you very much for this video !!! I have been reading articles, forums and asking chatGPT the last 2 days to get my typescript app compile and execute using tsc, tsc-node, ... and playing with all possible options in the config files, without success and with your help, in 10 minutes, I have it working directly, and from VSC and with the integrated debugging support ! Thanks A LOT !
Alex, thanks so much, your video and explanation helped so much as I was getting up on Typescript. I was reading the book Programming Typescript on p.14, on compiling and running, and he lost me. I'm so glad I found your video..🎉
Love seeing true ninjas giving the real, straight forward and clearly explained answers. I have literally run into suggestions about kernel level and /usr/lib mods to get this exact same functionality. Thank you for a great - and VERY helpful video.
typescript helps you to find the error and solve it during development process. is add the code on terminal tsc --init it add typeconfig file which help you to not add the js file if it is an error on ts file which is no Emit on Error tsc will help you to add the type of the variable and function array .
all the commands but still need to watch the video :) node --version npm init npm i -g typescript tsc tsc --version tsc --init --sourceMap --rootDir src --outDir dist tsc npm i --save-dev typescript
this video is absolutely amazing but if I could make 1 suggestion - when showcasing commands that need to be typed into the console to follow your tutorial, it might be worth putting in a hovering textbox over the video for a couple of extra seconds or something, just so that people don't need to pause on the exact half-second that the full command is visible
Video Suggestion/Recommendation: Please make a video explaining TypeScript Callbacks, Promises, and Async/Await. I have yet to find a tutorial in which all of the details regarding such phenomena are fully explained. > Thanks!
I find it easier nowadays just opening a js debug terminal in vscode and running ts-node to run the app, you don't need to have a ts watch task, and no launch.json file, still useful when you need to run the app with multiple env variables and some other custom configs like specific node version without switching with nvm
Hello sir, I got errors in these steps: > tsc --version > tsc --init It says Unauthorised Access & No further steps can be done unless these commands run successfully Why is it so???
Best tutorial. But I now need some help on the folder structure please. Like if I put the HTML, JS, TS, CSS files in the src folder, where should I move the tsconfig and package files so it still compiles without having to also type "tsc"?
That's the way to do it. Very useful video and it helped me a lot. Thank you very much! I would also look into how to set up the test environment, e.g. with Jest. I tried it, but I got stucked.
@@AZisk if it’s not web project then I don’t know what TS is used for to be honest… at best maybe electron but then u can use create electron-vite which ask for vue/react/vanilla since it’s still just web.
@@hanes2 I made several command line utilities using nodejs + ts, so vite is a bit overkill. Until I switched to Deno for those kind utilities because of ability to bundle/build code as executable (also easier to configure).
@@hanes2 python should be great, but my past companies mainly use js and everyone already familiar with so we decide to go with Deno to avoid additional learning curve & tooling setup. Maybe not a great choice, but it works for us lol.
Thanks for clear concise video. Unfortunately, all has changed again. Duplicated exactly your set up (with later versions of software- TS 5.1.6). On initial compile of your index.ts, got following error message: [Running] ts-node "c:\Users\Owner\Desktop\PROJECT\CODE\TSDEV\src\index.ts" 'ts-node' is not recognized as an internal or external command, operable program or batch file.
Thanks for the great video. BTW, why do you use a watch task instead of a build task? Isn't the build task automatically triggered every time you start debugging anyway?
Not disagreeing exactly, but there are loads of typescript videos, but very few on how to just set up your project quickly unless using a specific framework. The comments tend to also add possible variations that might conform your particular situation. If an easier way to do this in VS Code comes out (which it should, btw), we might get a comment or if Alex sees it, a new video 😃
We know that we can export a file to another file with export, but the imported file gives an error in Google Chrome, is this normal or do you get an error like 'Export is not defined' when you export this process?
What if we want to attach the debugger to an existing instance instead of launching? Having to run the watch task every time we do this is not a great solution imo, we should use something like ts-node or nodemon to do the watching.
Alex I have terminal issue where terminal text is so small it's hard to read. Tried changing terminal font size, but no change. Have you any issues with this or how to change the size to normola size. I went into zsh settings and it wont change. M1
I know this is a good tutorial and I'm just dumb but in the first minute I don't even know where you typed does commands, what does commands are, how did they open visual studio...
Alex, I like your videos, but I'm not sure what was the purpose of this video, nobody is coding TS like you did in this video, there are tons of tools that remove all those overheads, Vite for example and lots of others that require way less config, or almost zero config. I've never seen any developer around me doing typescript development like you tried to do in this video. I've seen lot's of reasons to not use tools like vite for example, or webpack or whatever... but adding those tools doesn't hurt performance, nor it affects transpiled version, it's just a DX tools that make your life way easier, both when setting up new project and for larger projects. so I don't know, especially it's problematic when you upgrade to new version of node, it's very problematic when you are not using those tools. I'm developer 18 years already and I just wanted to say that, reinventing the wheel, doesn't make it better, you just wasted lots of time to make something that already existed and worked absolutely fine, same goes for people who think writing application without frameworks and existing tools are bad and they are trying to write everything from scratch by themselves and they can't realize that all those tools were tested by thousands of people and now as you try to not use all those tools, you have to do everything on your own. Especially for Javascript/Typescript right? it changes so quickly, if you are doing everything on your own, you are wasting time on something that you don't need, if you are building application, why not focus on doing that, instead of wasting time on re-creating something that already exists.
Dude, very good content, but this cuts are crazy. I'm watching the code, than your face, then your face from the side. I think the content is good, but this part is completely unnecessary. Put yourself on the corner and let us see the code instead, you are a coder, we are interested in the code, not your face in different angles. really.
Alex is the type of guy I would like to have as a coworker! 😂
Or definitely our supervisor!
I spent my day , querying chatgpt and running around stack overflow , and watching TH-cam videos to learn the compiling process, thanks man you are a life saver ❤
claude ai is good
Thank you very much for this video !!! I have been reading articles, forums and asking chatGPT the last 2 days to get my typescript app compile and execute using tsc, tsc-node, ... and playing with all possible options in the config files, without success and with your help, in 10 minutes, I have it working directly, and from VSC and with the integrated debugging support ! Thanks A LOT !
by the way, you can just initialize empty package.json with npm init -y where y basically says "yes".
yarn, pnpm also have similar functionality
not as fun as pressing enter a bunch of times without looking 👀:)
@@AZisk i totally agree! :3
Npm init
Enter
Enter
Enter
Enter
Enter
Is fun
@@AZisk You could even make a modified Schwarzenegger that repeatedly hit enter 😂 (for even more fun)
@@toadlguy Wow, I don't even know why I didn't think of that. Missed opportunity to use Schwarzenegger 2.0
I was having a headache for the past 6 hours... what a painkiller you are man!
Thanks.
Alex, thanks so much, your video and explanation helped so much as I was getting up on Typescript.
I was reading the book Programming Typescript on p.14, on compiling and running, and he lost me. I'm so glad I found your video..🎉
Love seeing true ninjas giving the real, straight forward and clearly explained answers. I have literally run into suggestions about kernel level and /usr/lib mods to get this exact same functionality. Thank you for a great - and VERY helpful video.
i spent 2 days trying to figure out how to do that. thanks a lot!
This is exactly what I was looking for, thanks !
Thank you for this! This saved me from so much hell starting to learn TypeScript.
Glad it helped!
@@AZisk 8 months later, greatly appreciated! You're a great teacher!
typescript helps you to find the error and solve it during development process. is add the code on terminal tsc --init it add typeconfig file which help you to not add the js file if it is an error on ts file which is no Emit on Error tsc will help you to add the type of the variable and function array .
all the commands but still need to watch the video :)
node --version
npm init
npm i -g typescript
tsc
tsc --version
tsc --init --sourceMap --rootDir src --outDir dist
tsc
npm i --save-dev typescript
thx!
this video is absolutely amazing but if I could make 1 suggestion - when showcasing commands that need to be typed into the console to follow your tutorial, it might be worth putting in a hovering textbox over the video for a couple of extra seconds or something, just so that people don't need to pause on the exact half-second that the full command is visible
its fully visible g
just look
Very interesting, even have been programming TS for 4 years in VScode, I've never used these VSCode tasks.
Video Suggestion/Recommendation:
Please make a video explaining TypeScript Callbacks, Promises, and Async/Await. I have yet to find a tutorial in which all of the details regarding such phenomena are fully explained.
> Thanks!
AMAZING! The only explanation that worked for me... ty very much
Thanks man , i need it as a cloud engineer since we are using aws cdk.
Typescript and node needs to get this module stuff figured out, it's a complete and utter mess
this is really useful! when i was doing a project that use typescript i had no idea what to do. how everything works.
What a god you are. The real MVP. Stay sharp!
you just made it very easy to understand. thank you for this!
Wow. You have done a great job. Can you please advise me on how to learn TypeScript very fast after learning JavaScript?
wow this is some whole new way of doing it!
Thanks for your work👍🏻
well this was easy specially for a noob :)) now all I have to do is watch it again at half speed at least 33 times
I find it easier nowadays just opening a js debug terminal in vscode and running ts-node to run the app, you don't need to have a ts watch task, and no launch.json file, still useful when you need to run the app with multiple env variables and some other custom configs like specific node version without switching with nvm
what about debugging?
@@AZisk the js debug terminal automatically attaches any process running to the debugger process
Hello sir,
I got errors in these steps:
> tsc --version
> tsc --init
It says Unauthorised Access
&
No further steps can be done unless these commands run successfully
Why is it so???
Hahaha nice videos as always. Someone is in a good mood today 😂😂
super man of compiler
You're a blessing man!!! fixed my headache
Very helpful. Thank you!
God bless this man.
Today, we use vite or bun. But It's nice to explain in a clear way how to configure vscode to watch typescript code for debugging.
excellent stuff, thank you!
You are awesome, man!
Best tutorial. But I now need some help on the folder structure please. Like if I put the HTML, JS, TS, CSS files in the src folder, where should I move the tsconfig and package files so it still compiles without having to also type "tsc"?
Next step would be to containerise this setup, I assume ;)
Awesome, thank you
Best tutorial ever ;-)
Glad it helped!
That's the way to do it. Very useful video and it helped me a lot. Thank you very much! I would also look into how to set up the test environment, e.g. with Jest. I tried it, but I got stucked.
Awesome tutorial, thanks
Really good video, thank you!
Many thanks Alain, very helpfull
you are great teacher thank you soo much
Eyy thnx mate highly appericiated
excellent video. helped a lot.
Thank You So Much!
What camera do you use for recording this video? Amazing picture quality
Thanks! I use the Sony A7iv
I would just do ‘pnpm create vite tsdev -template vanilla-ts’… (or vue-ts, or react-ts etc.)….. and easy as that… and pnpm and vite is just awesome.
yes, if creating a web project and then a specific ui framework, sure. but you’re also adding a bunch of extra dependencies.
@@AZisk if it’s not web project then I don’t know what TS is used for to be honest… at best maybe electron but then u can use create electron-vite which ask for vue/react/vanilla since it’s still just web.
@@hanes2 I made several command line utilities using nodejs + ts, so vite is a bit overkill.
Until I switched to Deno for those kind utilities because of ability to bundle/build code as executable (also easier to configure).
@@crushfire2004 it wouldn’t even cross my mind to use JS/TS for CLI tools. Then I my mind would be like depending if need; bash->python->rust
@@hanes2 python should be great, but my past companies mainly use js and everyone already familiar with so we decide to go with Deno to avoid additional learning curve & tooling setup.
Maybe not a great choice, but it works for us lol.
Life saviour.
Thank's Alex❤
insanely helpful
great video. very helpful
wow!! it' s amazing !!!!
Thankyou, you are great
Thanks, man!
Thanks for clear concise video. Unfortunately, all has changed again. Duplicated exactly your set up (with later versions of software- TS 5.1.6). On initial compile of your index.ts, got following error message: [Running] ts-node "c:\Users\Owner\Desktop\PROJECT\CODE\TSDEV\src\index.ts"
'ts-node' is not recognized as an internal or external command, operable program or batch file.
Thanks for the great video. BTW, why do you use a watch task instead of a build task? Isn't the build task automatically triggered every time you start debugging anyway?
Hi Alex, you're a life saver with stuff like this. One Question nevertheless, does this also work for debugging Angular applications?
This is good tutorial!
can;t believe it's 2023 and things are still that complicated
very good man
Do I need to do this process every single time? Wich steps can I skip?
thanks man
thx bro, you should create a complete ts tutorial
Not disagreeing exactly, but there are loads of typescript videos, but very few on how to just set up your project quickly unless using a specific framework. The comments tend to also add possible variations that might conform your particular situation. If an easier way to do this in VS Code comes out (which it should, btw), we might get a comment or if Alex sees it, a new video 😃
8:57 you didn't need to tell me to subscribe because you deserve it 😊
Thanks!
Wow thanks so much!
Hi! Have you tried dotnet core + angular on mac? Can you recommend any nswag studio alternative on apple silicon?
We know that we can export a file to another file with export, but the imported file gives an error in Google Chrome, is this normal or do you get an error like 'Export is not defined' when you export this process?
What if we want to attach the debugger to an existing instance instead of launching?
Having to run the watch task every time we do this is not a great solution imo, we should use something like ts-node or nodemon to do the watching.
It would be good to see how to do the same for Visual Studio proper. For a web project.
the best!
what about text autofill?
Hi, I am getting error import { Chicken } from "./chicken.TS"; While importing
Been switched to Deno & Go for past 1 year, does ts-node (& ts-node-dev) still relevant?
I have this weird issue when importing TS files. it imports them with .js prefix but its a ts file. why is that?
My vscode is not highlighting errors in the 'ts' file. Any insight?
'npm init -y' uses all the defaults.
yes, but is it as fun 🤩
@@AZisk Think of the money saved from otherwise replacing worn out enter keys!
@@joostschuur this is very true, but it’s such a liberating feeling to let go of efficiency and throw caution to the wind ;)
tsc --init --sourceMap --rootDir src --outDir dist
i have a problem while writing command (tsc --versiov)
You are so cool 👍
supper!
Alex I have terminal issue where terminal text is so small it's hard to read. Tried changing terminal font size, but no change. Have you any issues with this or how to change the size to normola size. I went into zsh settings and it wont change. M1
nvm - gives issues, why do we need v 18 of node? nbm needs bash to properly install now. Ah it has all changed AGAIN.
I know this is a good tutorial and I'm just dumb but in the first minute I don't even know where you typed does commands, what does commands are, how did they open visual studio...
3:58 ${workspaceFolder} makes the wrong path, causing "Cannot find module" error
in my case i just deleted the launch.json and it worked
glad to see using js has improved since 1996... looks even more dumpster firey today :D
why didn't you use npm init -y
Buenisimo
try „npm init -y“
Too more zooms and outs ;) BTW Nice topic.
Great video - little less cutting to the side of your face and not showing the screen and commands
in some messed up way, this video, too, will be outdated haha
probably already is
it's complicated way it's not beginner-Friendly
Warning: Don't follow along with him, just watch whole video and understand what to do and what not to do...😜😜
Alex, I like your videos, but I'm not sure what was the purpose of this video, nobody is coding TS like you did in this video, there are tons of tools that remove all those overheads, Vite for example and lots of others that require way less config, or almost zero config. I've never seen any developer around me doing typescript development like you tried to do in this video. I've seen lot's of reasons to not use tools like vite for example, or webpack or whatever... but adding those tools doesn't hurt performance, nor it affects transpiled version, it's just a DX tools that make your life way easier, both when setting up new project and for larger projects. so I don't know, especially it's problematic when you upgrade to new version of node, it's very problematic when you are not using those tools. I'm developer 18 years already and I just wanted to say that, reinventing the wheel, doesn't make it better, you just wasted lots of time to make something that already existed and worked absolutely fine, same goes for people who think writing application without frameworks and existing tools are bad and they are trying to write everything from scratch by themselves and they can't realize that all those tools were tested by thousands of people and now as you try to not use all those tools, you have to do everything on your own. Especially for Javascript/Typescript right? it changes so quickly, if you are doing everything on your own, you are wasting time on something that you don't need, if you are building application, why not focus on doing that, instead of wasting time on re-creating something that already exists.
Thanks for this video. For the auto compilation could we just use: tsc -w ?
Dude, very good content, but this cuts are crazy. I'm watching the code, than your face, then your face from the side. I think the content is good, but this part is completely unnecessary. Put yourself on the corner and let us see the code instead, you are a coder, we are interested in the code, not your face in different angles. really.
THANKS A LOT, this was the only tutorial that actually works for me! Thanks again!!!
Thanks!
wow thank you so much!