In the last video I mentioned we're going to get into variables. But before we can do that we have one other step we need to take. And I've been working with angular projects now for a while and I forgot that we need to do this to run pure typescript.

So what we have to do is actually create a very small typescript program so typescript is not like JavaScript you can't simply run it in the browser or anything like that you need to create a program for it the way you can do that is right here it's actually very straightforward which is to create a ts config.json file. And what this says is it's basically a set of rules that you want your application to follow. Now I set up one of the most basic kinds of applications you could ever imagine building right here. And this is all we're going to need for this entire course. So I'm going to push this up to the show notes so that you can grab this and you can either write it yourself, or copy and paste it.

{
  “compilerOptions”: {
    “sourceMap”: true
  },
  “files”: [
    “”  ]
}

But essentially it’s a set of curly braces with compiler options here. And I'm setting source map to true. And you'll see in a second what this actually does, and then a comma followed by a file's parameter. Now what this files parameter does is it takes in an array as a value in. What we can do is pass in all of the different files that we want to run into the array.

So for this one I'm going to create a file. You don't have to give them these weird names. I'm giving them these names so they're easy to pick out in the show notes and so you can follow along with that. I am going to say 005 and I'll just put typescript config and then I have to say .ts.

005_typecript_config.ts

So this is essentially saying is that for this typescript program this is the file I want you to run. So if you have a ton of files and you want all of them to run you can put them right here. What I'm going to be doing as I go through the course is I'm going to create at least one typescript file for each video and I will update this TS config so that it only runs the ones that I want for the video. You could load all of them in because it’s an array, and you could have it run every file every time, but that might be confusing.

Now we actually have to create this file. So I'm going to the file dock in your text editor, and create this new file called typescript config. And here I'm going to just create a super basic application and say function and I'll say “hey there” and inside of Hey there I'm going to say console log. “Hi from typescript.” A semi colon and then I'm going to call this and there you go.

function hey_there() {
  console.log(“Hi from typescript”);
}

hey_there();

And now to run this, lets go back the terminal and type in tsc and run it. If everything was set up properly this will work. So it looks like everything was set up but it didn't actually process the code. So the way you can tell if this worked or not is it created two other files for us. It created a JavaScript file and then a map file. Now it gave us this map file because I set source map to true. Now you won't have to ever do anything with this map file but it's something that's helpful when you're building applications you're actually going deploy to the web because this gives a kind of a mapping of the minification. So all your JavaScript files are going to get shrunken down and they're going to have all the whitespace and tabs and everything like that move. What this map file does is it gives a clear mapping between the code you wrote and the minified version.

So you don't ever have to touch anything, just in case you're curious. That's what it is. So now that we have this, this is good but how do we actually run it. I mean that's whole point is we need to be able to run it and see how it works. I'm going to show you this way of doing it and we'll play around with a few ways of being able to run code, but because we have node installed we can just come right here and then I can type in the name and I don't even have to type in .ts or anything. I can just type in the name of the file itself. So in this one it's going to be 005_typescript_config. Our system is going to be able to process it and simply run the pure JavaScript, but we don't have to pass anything into it. So we have to declare a file name.

Now if I hit return it prints out “hi from typescript.” So if this worked for you, this means you have everything set up properly, but you can see that we were printing out the value “hi from typescript” not doing anything magical just making sure that it's working. Now that we just changed that file. Let's see what happens when I run tsc again.
And let's go and look at our other files. You can see that now when I ran that it fixed the bug so it fixed the mis-spelling in the core JS file. And now if I run node 005_typescript_config again. Now this is working properly so that tsc file will recompile everything convert it to JavaScript and then it can be ran.

So that is how you can set up a basic typescript program and how you can run it in the terminal. So now that you have all that information now we can dive into the syntax and we can start building out some typescript programs.

Resources

• Source code