00:00 First point of order is I'm going to CD into this directory, into the solution directory. Now inside here, if I LS, I'm going to see example.ts and index.html. I'm on a Mac, and so the things I'm doing here will work on a Mac and a Linux. But if you are using Windows,

00:18 you can use the similar commands in order to just get into the right directory. Now, I've got my example.ts and I've got index.html. I'm now going to install TypeScript globally. I'm going to say npm install and then hyphen hyphen global. Let me zoom out a little bit so you can see the whole command, TypeScript.

00:37 Basically, what this does is it installs the TypeScript CLI globally. I can check that this is working by just going tsc hyphen hyphen version. Now, it's going to say, great, I've got version 5.2.2, which is the latest as currently working inside my CLI and I can now use it.

00:57 What I can do is I can now say tsc hyphen hyphen init, and tsc hyphen hyphen init creates a tsconfig.json file. Let's take a look at it. We've got now inside here, tsconfig.json with a bunch of all sorts of comments in here. This is something that it adds by default,

01:16 which is a little bit annoying. What we get here is we get certain tsconfig options, which are sensible defaults, which help you basically scaffold your project. The most important of these we're going to look at in a future chapter, but you can think of this as, yeah, we're ready to go in terms of creating

01:35 TypeScript or JavaScript files from our TypeScript code. Now, we've got our example.ts. We can actually say inside this directory, just say tsc. By running tsc, what's going to happen? We get an example.js file.

01:53 Look at that. We have an example.ts file that says on the left side, it's our js. We've got message string inside here, and just from this, it's then added or removed the string parts from that. We just get pure JavaScript emitted from our TypeScript code.

02:11 I can say hello world on the right-hand side, I'll run tsc again, and then I get hello world in my runtime code too. There are two parts of this. We've got our TypeScript language, and then we've also got our TypeScript CLI, which is helping us put this together. Let's say hello instead. Now, I can go back into my index.html.

02:31 I can say example.js instead because that's the one I'm targeting. Then I'm just going to do a little bit of wizardry just to open this up in my finder. Let's grab this open. Now, inside our inspector, inside our console, we have a hello here.

02:47 Let's say hello from JavaScript inside there. Run tsc again, and let's reopen this, and it should say hello from JavaScript. Brilliant stuff. This is basically a really, really simple setup for how you can use TypeScript in the browser.

03:06 We are basically creating a TypeScript file on this side here, and then we're running tsc in order to basically turn it into a JavaScript file. Then we're using that JavaScript file inside our browser. One thing too is we can probably add a gitignore inside here.

03:26 So gitignore like this, and we can add asterisk.js inside here. What this is going to do is it's basically going to say only the TypeScript files are actually part of our source code because the emitted JavaScript files, these ones here, they basically, it doesn't matter what they are

03:43 because they're derived from our TypeScript code. These are like a build artifact, something that we're basically just shipping out to production and not editing ourselves manually. So they don't need to be committed to git. So this is one more thing to think about is you just need to make sure that only your actual source files are being committed to git.

04:03 There we go.