THIS is EASY TypeScript Setup in VSCode
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 2024
- This is how to setup a TypeScript project for development and debugging in VSCode the easy way.
#typescript #vscode #nodejs
▶️ install node with nvm - • Install Node and NVM o...
▶️ Setting up new M2 Mac Mini for software development - • Setting up new M2 Mac ...
▶️ Setting up new MacBook for software development - • Setting up new MacBook...
▶️ confronting my interviewer - • I CONFRONTED my interv...
▶️ big tech or free(lance)? - • big tech or free(lance)?
▶️ coders won't SURVIVE in the new world - • coders won't SURVIVE i...
▶️ is software engineering hard? - • is software engineerin...
▶️ on imposter syndrome - • I’m an imposter
- - - - - - - - -
❤️ SUBSCRIBE TO MY TH-cam CHANNEL 📺
Click here to subscribe: / alexanderziskind
- - - - - - - - -
📱LET'S CONNECT ON SOCIAL MEDIA
ALEX ON TWITTER: / digitalix
----
00:00 Setting up Environment
00:37 Creating a New Project
01:21 NPM Init
01:36 Installing Typescript
02:06 tsconfig
02:56 Create Directories
03:22 Debugging in VS Code
04:08 Adding Chicken Class
05:14 Fixing ES Module Error
05:51 Customizing Launch Config
06:44 Typescript Watch Process
08:07 Running Build Task - วิทยาศาสตร์และเทคโนโลยี
![[TH] VCT Pacific Stage 2 - Playoffs Day 1 // GEN vs RRQ | TLN vs TS](http://i.ytimg.com/vi/JhkzKOhvOps/mqdefault.jpg)
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 ❤
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 !
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..🎉
This is exactly what I was looking for, thanks !
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.
you just made it very easy to understand. thank you for this!
AMAZING! The only explanation that worked for me... ty very much
You're a blessing man!!! fixed my headache
i spent 2 days trying to figure out how to do that. thanks a lot!
Thanks for your work👍🏻
You are awesome, man!
Very interesting, even have been programming TS for 4 years in VScode, I've never used these VSCode tasks.
Really good video, thank you!
excellent video. helped a lot.
Many thanks Alain, very helpfull
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!
wow!! it' s amazing !!!!
Awesome tutorial, thanks
Eyy thnx mate highly appericiated
Hahaha nice videos as always. Someone is in a good mood today 😂😂
insanely helpful
What a god you are. The real MVP. Stay sharp!
wow this is some whole new way of doing it!
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
Best tutorial ever ;-)
Glad it helped!
you are great teacher thank you soo much
Awesome, thank you
great video. very helpful
God bless this man.
Thank's Alex❤
this is really useful! when i was doing a project that use typescript i had no idea what to do. how everything works.
This is good tutorial!
Thankyou, you are great
Hi Alex, you're a life saver with stuff like this. One Question nevertheless, does this also work for debugging Angular applications?
the best!
Thanks, man!
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.
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!
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?
Thanks!
wow thank you so much!
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
Wow. You have done a great job. Can you please advise me on how to learn TypeScript very fast after learning JavaScript?
Hi! Have you tried dotnet core + angular on mac? Can you recommend any nswag studio alternative on apple silicon?
Buenisimo
supper!
You are so cool 👍
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 .
Typescript and node needs to get this module stuff figured out, it's a complete and utter mess
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
What camera do you use for recording this video? Amazing picture quality
Thanks! I use the Sony A7iv
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?
Do I need to do this process every single time? Wich steps can I skip?
Next step would be to containerise this setup, I assume ;)
Been switched to Deno & Go for past 1 year, does ts-node (& ts-node-dev) still relevant?
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
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.
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.
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
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 😃
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.
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!
I have this weird issue when importing TS files. it imports them with .js prefix but its a ts file. why is that?
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.
My vscode is not highlighting errors in the 'ts' file. Any insight?
what about text autofill?
Hi, I am getting error import { Chicken } from "./chicken.TS"; While importing
'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 ;)
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 have a problem while writing command (tsc --versiov)
can;t believe it's 2023 and things are still that complicated
Too more zooms and outs ;) BTW Nice topic.
It would be good to see how to do the same for Visual Studio proper. For a web project.
try „npm init -y“
why didn't you use npm init -y
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
Great video - little less cutting to the side of your face and not showing the screen and commands
tsc --init --sourceMap --rootDir src --outDir dist
instead of all that use npx anshu create projectname
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 ?
Thanks!
Wow thanks so much!