Configuring the TypeScript compiler

Now that everything is set up with npm, we can turn our focus to TypeScript.

Typically, the first thing to do in any TypeScript project is to create the compiler configuration file. So, indeed, at this point, you need to be aware of the fact that the TypeScript compiler can be configured through a file called tsconfig.json. The presence of a tsconfig.json file in a folder tells TypeScript that the folder is the root of a TypeScript project.

Through tsconfig.json, you can precisely configure the compiler, adapting it to your project and its specific needs.

To get started, create a default configuration file using npm run compile -- --init.

Do you remember npm <script_name> -- <arguments>? This is how you can pass arguments to the programs executed by your npm scripts. If you don't like that approach, then you can also invoke npx tsc <arguments>. That is a lighter option that doesn't require scripts. Usually, though, you should prefer using scripts as they make sure that the build is fully part of the code base.

There are many options to choose from, and we won't go over them all, but we will cover some more as we progress through the chapters. For now, let's review some of the defaults together:

• "target": "es5": TypeScript will convert everything it can down to ES5 compliant code. This is still a great default in 2019. In the future, we should be able to target newer versions safely (if you're creating web applications, then that will most probably be as soon as Internet Explorer is out of the picture).
• "module": "commonjs": CommonJS is the de facto module specification used with Node.js (http://www.commonjs.org/specs/modules/1.0). We'll tell you more about modules in the next chapters.
• "strict": true: TypeScript is strict by default (which is great!). This setting actually enables multiple other options (listed in the default configuration file). Those defaults do wonders to keep your code bug free. We'll briefly explain those to clarify, but things will get much clearer later on, especially once we have covered special types.
• "esModuleInterop": true: As the name indicates, this one is very useful for interoperability between different module types and how they can be imported (we'll learn more about modules later in the book).

Here's a brief explanation of the options hidden behind strict: true:

Option	Explanation
noImplicitAny	TypeScript will complain if you forget to specify the type for an expression or declaration. This way, you'll know for sure that your code base is using types as it should.
strictNullChecks	With this option enabled, TypeScript will protect you against invalid assignments by forcing you to declare when something may be assigned undefined or null. You can learn more about it here: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html.
strictFunctionTypes	This option is actually hard to explain with a one-liner, especially at this stage in the book. We recommend that you keep the following link aside and check it out once you're familiar with the language: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-6.html.
strictPropertyInitialization	With this option enabled, TypeScript will make sure that class properties that are non-undefined are initialized next to their declaration or in the constructor.
noImplicitThis	With this option enabled, TypeScript will raise an error if you try to write expressions using the this keyword with an implied any type. As we mentioned in the first chapter, this behaves very surprisingly in JavaScript, where it is actually lexically scoped. This option can help you to avoid issues where this would be used unsafely. Check out the following blog article for a more detailed explanation: https://www.logicbig.com/tutorials/misc/typescript/no-implicit-this.html.
alwaysStrict	With this option enabled, TypeScript will parse all of your code in strict mode, and will also emit the "use strict"; directive in the output files. Strict mode is actually a notion of ECMAScript/JavaScript that is an absolute must. It simply eliminates many quirks of the language, so why not use it? Refer to this Mozilla Developer Network article for details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode. . You can also refer to this related StackOverflow question: https://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it.

You can opt out of any of the options by setting the values to false while keeping "strict": true, even though we do not recommend it.

For now, you only have a compilerOptions section in your tsconfig.json configuration file, but you can actually have additional ones, such as the following:

• files: Allows you to list all the files to include when compiling.
• include and exclude: Respectively includes or excludes specific paths from the compilation. Both of these support glob patterns.

VS Code, IntelliJ, and other IDEs will provide autocompletion when you edit tsconfig.json, which is very useful:

Here are some useful links about tsconfig.json and the compiler configuration:

• Official documentation for tsconfig.json: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
• Official documentation listing all the options: https://www.typescriptlang.org/docs/handbook/compiler-options.html
• JSON Schema of tsconfig.json: http://json.schemastore.org/tsconfig