Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:14Length:1.2 hours
Typescript fundamentals 400x277
  • Overview
  • Transcript

1.3 Installation and Configuration

Hi, and welcome back to TypeScript Fundamentals. In this lesson we are going to install the TypeScript compiler and look at different configuration options for it. The compiler is a tool that is necessary to convert your TypeScript code into compatible JavaScript code. So you can execute it with a regular JavaScript engine, like the one that's present in the browser. It's available as an npm package and written in TypeScript as well, so it can run on any JavaScript host. You can install it by using your favorite package manager, mine is yarn, to install the package globally. It is simply named typescript. This will give you the TSC command that you can use to compile your code. Let's try it out. I'm going to write a simple Hello World example that uses the let key word present in new versions of JavaScript and uses back ticks to enable string interpolation. Pretty basic. When I pass this through the TypeScript compiler, the result will look a little bit different. First, it replaced let with var. And second, it used the classic concatenation syntax for strings instead of interpolation. This is due to the fact that the compiler defaults to ES3, which was released in December 1999. If you use a target of ECMAScript 6, better known as ES 2015 or higher, the output is the same as the source. Since this version of JavaScript already supports the features we used. Of course, it's very impractical that we have to add the configuration to the complied command each time. It would be nice to configure a project once to always use the same parameters. You can do that by adding the tsconfig.json file to the project's root directory. But it's important to know that you can't compile single files anymore if you do so. Whenever you pass in a file as a command line argument like we did, the config file gets ignored. Let's start by adding files to be compiled automatically. You have two options to do so, the first one is to use the files property. Here you can explicitly state the files you want to compile one by one. Of course, most of the time this isn't very useful. Because when files get added to or removed from the project, you would also have to update the type script configuration. There are two properties to help you with that. The first one is include. If you specify it, all the files matching the pattern you provide, it will be compiled. For instance, we could add a source directory. And compile all files within it using the asterisk and double asterisk while it counts for including all files with an extension of .ts in all sub-directories. Of course, there are some files you don't want to compile every time like node modules or spec files. This is where exclude comes in. Like with include, you can specify patterns to filter the files that will be compiled. Exclude takes precedence over include, but if you have to file property everything there will not be excluded. Of course, you don't have to use any of those properties, as the TypeScript compiler comes with the same defaults. If you don't specify files or include, all TypeScript files will be compiled, except the ones matching an excluded pattern. If you don't specify an exclude property, the compiler will automatically ignore any node modules, browser components, GSPM packages, and the output directory. The other important property is compiler options. Here you specify how the compiler behaves. They allow you to specify the target version of ECMAscript, the output directory, or file you want to use, and then the other option that you can pass in as a command line argument. Like removing comments or generating source maps for easier debugging. Apart from those four properties, you have a few other ones. But I recommend you check out the documentation for a full list. Some of them are only used by an IDE like Visual Studio. Speaking of IDEs, you can get great benefit from using one, since they can instantly give you feedback about compile errors or warnings. There are a few notable ones around like Visual Studio or its lightweight cross platform companion Visual Studio Code. Then there is JetBrains's WebStorm, or the one I like to use, Atom IDE. Of course, you don't need an IDE to develop TypeScript successfully. If you have a productive using Vim or Emacs, stick to it, by all means. Let's recap. The TypeScript compiler is the tool that translates your TypeScript code to JavaScript. It's written in TypeScript, itself, compiled and distributed as an npm package. The tsconfig.json file is the place to configure you project. It is typically placed in the root directory of the project. You can use files, include, and exclude to define the files you want compiled. And CompilerOptions to configure the compiler's behavior. An IDE like Visual Studio Code or Atom IDE can great the increase of productivity as it does with all compiled languages. In the next lesson, we are going to get started on the TypeScript language itself, beginning with basic types and variables. See you there.

Back to the top