Angular CLI pt2: tsconfig.json.js

Yeah, I get it, configuration files aren't exactly sexy but they are pretty handy if you need to add a third party package, change the target format for your TypeScript files or change the compiler for just in time to ahead of time.

If you followed my last blog post, you now have a shiny new Angular 2 project. Lets take a look at the configuration files that the CLI gives us by default. So let's take a look at the TypeScript configuration file.

tsconfig.json.js

This is the configuration file for the TypeScript Compiler (TSC) . If you are not familiar with TypeScript, I highly recommend Dan Wahlin & Joe Papa's PluralSight course : TypeScript Fundamentals.

A quick definition of TypeScript would be "a JavaScript format that allows a developer to write object oriented code". If you hate writing JavaScript that sounds awesome, right? The only problem is that it is written in a version of ECMAScript (es2016) that is not supported yet by modern browsers so it has to be transpiled back to es5 so that it can be run.

You can learn a ton about TypeScript at https://www.typescriptlang.org/

Here are a few things to look at in the tsconfig.json file:

• baseUrl - this tells the compiler where to look for the ts files. In our case it will be in the src directory.

• sourceMap - the sourceMap takes a boolean value which tells the compiler whether or not to generate map files. A map file ties the TypeScript file to the transpiled JavaScript file. This allows us to debug the TypeScript file while the browser is using the JavaScript file.

• emitDecoratorMetadata & experimentalDecorators - Both of these settings take a boolean value that either turns on or off decorators in TypeScript. What are decorators, you ask. Here is the definition directly from the TypeScript website " Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members." . Please note that decorators are a new feature and may change over time.

• target - This tells the compiler which version of JavaScript it should transpile the TypeScript code to. If you are supporting older browsers, you may want to change this to an earlier version of JavaScript.

So that is the TypeScript Configuration files. If you have any questions about it, leave a comment and I will get back to you.

Next we will look at the package.json file and learn how to add or remove third party packages to our project.

Catch you later,

Allen