Adding TypeScript to an existing application - TypeScript Tutorial

- [Instructor] Now that I've shown you how to install TypeScript and shown you around the sample application, the next thing to do is to add TypeScript to the application. In order to do this, the only thing I need to do is add the TypeScript configuration file into the root of the project. This file must be called tsconfig.json. As the name implies, the contents of this file will be a JSON object which contains all of our settings. This configuration object takes a handful of top-level properties, and the most important one is compilerOptions, which itself is another object containing a set of properties. As you can see, TypeScript offers a whole bunch of different configuration options, some of which you'll set in every project, and others that you'll probably never use. I'll be showing a few of those important ones in this course, but to start out, I'm just going to set two. First I'll set the target property. This property tells the TypeScript compiler which ECMAScript version the code that it outputs must be compatible with. If you're using another compatibility tool like Babel, then you'll want to choose esnext here, which basically tells TypeScript to just strip out all of the type metadata and then pass the rest of the JavaScript code on untouched. If you're using TypeScript as your only tool however, you'll want to choose the es5 option, since this will output code that is compatible with virtually every browser in use today. I'm going to choose the es5 option not only for this reason, but also because it will allow me to show you how TypeScript will warn you about features that are not available in a given version of JavaScript, as well as show you how TypeScript manipulates the code during the transpilation process. The next option I'm going to set is the outDir option. This option tells the TypeScript compiler where it should save the transpiled JavaScript it produces. With these two options in place, I can jump to the terminal and type tsc -w. The W stands for watch, which tells the compiler to compile everything, but then stay alive after it's done and keep recompiling whenever it sees any changes. Now depending on the version of the TypeScript compiler you're running, you'll probably see an error when you run this command. That's to be expected. It simply means that TypeScript expected to find some TypeScript files, in other words, files that have the .ts extension, but it didn't find any. To solve this, I'll go ahead and create a file called model.ts in the source folder of my project. The moment I do this, I not only see that the TypeScript compiler has detected the new file and recompiled, I also see that it's created the dist folder with the transpiled model.js file inside of it. Of course, this file is empty because we haven't added anything to the model.ts file yet. So let me go ahead and do that now. Then I'll create a couple of functions, the same thing with these two functions, and then finally, I'll use those methods to mimic getting an inventory item, updating it, and saving it back. Now when I save the model.ts file, I can see the output from the TypeScript transpiler in the model.js file. And since the code in the model.ts file was just regular old JavaScript, there wasn't much for the TypeScript compiler to do. It simply copied the code into the new file more or less as it was. However, the fact that it's doing this tells me that everything is set up and ready to go. So let's move on to the next video, where I'll show you how to actually take advantage of the type safety that TypeScript offers.