THIS is EASY TypeScript Setup in VSCode

[@gokulambalavanan3592]

I spent my day , querying chatgpt and running around stack overflow , and watching KZbin videos to learn the compiling process, thanks man you are a life saver ❤

[@hihohihoi1325]

claude ai is good

[@vinicius18103]

Alex is the type of guy I would like to have as a coworker! 😂

[@theontologist]

Or definitely our supervisor!

[@williamimbert4124]

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 !

[@sofiaknyazeva]

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

[@AZisk]

not as fun as pressing enter a bunch of times without looking 👀:)

[@FoodFoodMoney]

@@AZisk i totally agree! :3 Npm init Enter Enter Enter Enter Enter Is fun

[@toadlguy]

@@AZisk You could even make a modified Schwarzenegger that repeatedly hit enter 😂 (for even more fun)

[@AZisk]

@@toadlguy Wow, I don't even know why I didn't think of that. Missed opportunity to use Schwarzenegger 2.0

[@ishupreetsingh6930]

Thanks!

[@AZisk]

Wow thanks so much!

[@leooel4650]

I was having a headache for the past 6 hours... what a painkiller you are man! Thanks.

[@ukaszwosek7370]

This is exactly what I was looking for, thanks !

[@GerryStilton]

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..🎉

[@soloqVenu]

I actually stopped learning TS after going through this hell. I picked up after 3 years and saw this video. viola! Thank you.

[@jsg240]

Thank you for this! This saved me from so much hell starting to learn TypeScript.

[@AZisk]

Glad it helped!

[@jonathanmalloy9711]

@@AZisk 8 months later, greatly appreciated! You're a great teacher!

[@echobucket]

Typescript and node needs to get this module stuff figured out, it's a complete and utter mess

[@Jeff-k2o]

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.

[@davidelmakias5545]

i spent 2 days trying to figure out how to do that. thanks a lot!

[@CafeAsp]

Thanks for your work👍🏻

[@shinkowski8498]

Best tutorial ever ;-)

[@AZisk]

Glad it helped!

[@lucastaonline]

AMAZING! The only explanation that worked for me... ty very much

[@Renreal-y9h]

you just made it very easy to understand. thank you for this!

[@lodewykduminy9511]

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

[@hihohihoi1325]

its fully visible g just look

[@rakib17874]

You are awesome, man!

[@On30utcOme]

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"?

[@bilaleldabet8404]

Hahaha nice videos as always. Someone is in a good mood today 😂😂

[@galacticdivinity]

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!

[@jonnysharan4393]

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 .

[@modoulaminceesay9211]

Thanks man , i need it as a cloud engineer since we are using aws cdk.

[@hamstertheadventure827]

Very helpful. Thank you!

[@55jugalo]

You're a blessing man!!! fixed my headache

[@martintaanlee]

excellent stuff, thank you!

[@ryzexop454]

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???

[@ZubairAhmed1024]

wow this is some whole new way of doing it!

[@yoyo26-34]

Very interesting, even have been programming TS for 4 years in VScode, I've never used these VSCode tasks.

[@MailsonWei]

this is really useful! when i was doing a project that use typescript i had no idea what to do. how everything works.

[@PRIYANSHU-no4ir]

super man of compiler

[@bestchoice7431]

Wow. You have done a great job. Can you please advise me on how to learn TypeScript very fast after learning JavaScript?

[@justicefor_sandwichlord]

Eyy thnx mate highly appericiated

[@native-nature-video]

What camera do you use for recording this video? Amazing picture quality

[@AZisk]

Thanks! I use the Sony A7iv

[@michael_hackson_handle]

What a god you are. The real MVP. Stay sharp!

[@gokudomatic]

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.

[@isynera]

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.

[@artemmalieiev7500]

Awesome tutorial, thanks

[@bluerinako]

Awesome, thank you

[@horvathbendeguz612]

Really good video, thank you!

[@marcelo8038]

excellent video. helped a lot.

[@DesazMusicYt]

Do I need to do this process every single time? Wich steps can I skip?

[@Holiday21]

God bless this man.

[@gonzaloaller4501]

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

[@AZisk]

what about debugging?

[@gonzaloaller4501]

@@AZisk the js debug terminal automatically attaches any process running to the debugger process

[@jeju3267]

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?

[@resulabdulla3825]

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?

[@yvonbertinndonkonkouendja8140]

Many thanks Alain, very helpfull

[@hassanriaz1409]

you are great teacher thank you soo much

[@NicolaMarino1978]

wow!! it' s amazing !!!!

[@basione]

Next step would be to containerise this setup, I assume ;)

[@testingstuff6111]

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

[@jsonslim]

3:58 ${workspaceFolder} makes the wrong path, causing "Cannot find module" error

[@jsonslim]

in my case i just deleted the launch.json and it worked

[@bisarothub1644]

Hi! Have you tried dotnet core + angular on mac? Can you recommend any nswag studio alternative on apple silicon?

[@KulcsarRudolf]

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.

[@fordprefect5433]

Thank You So Much!

[@raushankumargupta7018]

Thank's Alex❤

[@exxzxxe]

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.

[@manojs277]

great video. very helpful

[@KeshenMac]

insanely helpful

[@Userkazt]

Thankyou, you are great

[@ivanangelkoski]

I have this weird issue when importing TS files. it imports them with .js prefix but its a ts file. why is that?

[@yoniifrah2268]

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

[@AZisk]

thx!

[@mz8755]

can;t believe it's 2023 and things are still that complicated

[@anonkun3807]

This is good tutorial!

[@proteus1]

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

[@rajeeshjohn8365]

My vscode is not highlighting errors in the 'ts' file. Any insight?

[@crushfire2004]

Been switched to Deno & Go for past 1 year, does ts-node (& ts-node-dev) still relevant?

[@priyankasachan672]

Hi, I am getting error import { Chicken } from "./chicken.TS"; While importing

[@GuillaumeHanique77]

Thanks, man!

[@AayushGoyalderiva]

Life saviour.

[@mcstechsupport9889]

Hi Alex, you're a life saver with stuff like this. One Question nevertheless, does this also work for debugging Angular applications?

[@MiLLz830]

what about text autofill?

[@EduardoHernandez-ux6gg]

thx bro, you should create a complete ts tutorial

[@toadlguy]

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 😃

[@sanfords]

nvm - gives issues, why do we need v 18 of node? nbm needs bash to properly install now. Ah it has all changed AGAIN.

[@iDoc_Elf]

very good man

[@MohamedFathyMakhlouf]

i have a problem while writing command (tsc --versiov)

[@AlThePal78]

why didn't you use npm init -y

[@hanes2]

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.

[@AZisk]

yes, if creating a web project and then a specific ui framework, sure. but you’re also adding a bunch of extra dependencies.

[@hanes2]

@@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.

[@crushfire2004]

@@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]

@@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

[@crushfire2004]

@@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.

[@matthewrevees8631]

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...

[@joostschuur]

'npm init -y' uses all the defaults.

[@AZisk]

yes, but is it as fun 🤩

[@joostschuur]

@@AZisk Think of the money saved from otherwise replacing worn out enter keys!

[@AZisk]

@@joostschuur this is very true, but it’s such a liberating feeling to let go of efficiency and throw caution to the wind ;)

[@MohammedAli-p7e9d]

8:57 you didn't need to tell me to subscribe because you deserve it 😊

[@husamburhandev]

Thanks for this video. For the auto compilation could we just use: tsc -w ?

[@cuachristine]

It would be good to see how to do the same for Visual Studio proper. For a web project.

[@rusted.dreams]

thanks man

[@Zulf-l6l]

the best!

[@og4789]

You are so cool 👍

[@privebia371]

try „npm init -y“

[@MaciejLisCK]

tsc --init --sourceMap --rootDir src --outDir dist

Too more zooms and outs ;) BTW Nice topic.

[@ummlol]

Great video - little less cutting to the side of your face and not showing the screen and commands

[@edwinpurizaca]

Buenisimo

[@ccall48]

glad to see using js has improved since 1996... looks even more dumpster firey today :D

[@olegkolesnikov7694]

supper!

[@parkerhix1057]

in some messed up way, this video, too, will be outdated haha

[@AZisk]

probably already is

[@RajatkumarJena-u3c]

it's complicated way it's not beginner-Friendly

[@4444-c4s]

Warning: Don't follow along with him, just watch whole video and understand what to do and what not to do...😜😜

[@nikawritescode]

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.

[@fantabarack]

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.

[@Oaks64]

Thanks!

[@AZisk]

wow thank you so much!