Learn TypeScript 3 by Building Web Applications

上QQ阅读APP看书，第一时间看更新

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:

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