Setup a TypeScript Project
Getting started with TypeScript is easier than ever. You can setup a development environment right in your browser or even quickly put together a local environment in using the parcel bundler.
Instructor: [00:00] The quickest way to try out TypeScript is to go to CodeSandbox.io. Go to create sandbox. Then scroll on down to vanilla plus TS for vanilla and TypeScript. You can access that directly at any time from /s for sandbox /vanilla/ts.
[00:17] Then from here, you already have a TypeScript file which you can play around with and edit to your heart's content. Hello TypeScript. Every change you make will automatically be reflected over here.
[00:27] Otherwise, with a local environment with Node installed, you can npm install/g parcelbundler. This will install parcel globally. Then with parcel installed, you can create a new file, call it index.html. I'll type a bang and hit tab to expand a default template. Then create a script tag with a source of ./index.ts. Then create a index.ts file, the one that's referenced there.
[01:00] Say console log hello from TypeScript. Then parcel can automatically handle everything for you. Just by typing parcel index.html, it will install TypeScript and start a server at port one, two, three, four, which I'll open up over here. Opening the console, you see hello from TypeScript.
[01:21] Lastly, I'm going to delete that folder. If you're a Node developer, you can say parcel, then target the TypeScript file, so index.ts. Then say --target equals Node. You'll see it compile to that dist folder again, this time with an index.js. You can run Node against that file. I can say Node dist/index.js. You'll see hello from TypeScript.
Also, I was able to type in just node index.ts in the console and it worked.
I'm not happy with these courses, they're awfully explained, they don't go into details to explain what is happening like, what is Parcel? Why do I need to install it?
You never explain that, you just install int and ask me to run it like it's magic.
Egghead courses are not as good as I expected.
@Conekta, I'm a little late to the party but parcel-bundler just looks like an alternative to Webpack, to bundle your modules into static assets. It has its ups and downs; https://blog.logrocket.com/benchmarking-bundlers-2020-rollup-parcel-webpack/
If you're using CodeSandbox note that in the very next video the host assumes that you haven't selected Vanilla TS, but React + TS.
The first lesson doesn't even work. Codesandbox wont work as you showed.
You should just be seeing "Hello from TypeScript" in your console.
I typed in src="./index.ts" and it didn't work. I've never tried Parcel before so when I went to localhost:1234 and saw nothing, I assumed Parcel was broken and/or bad software. After about 15 minutes I removed the script tag and then finally the html started showing in the inspect panel. As an experiment I added the script tag again using src="index.ts." That compiled the TS and served the page.