TypeScript — Compilation & the TypeScript Compiler. In this lesson, we are going to learn about the settings of the TypeScript compiler and the usage of the tsconfig.json file.

TypeScript provides a command-line utility tsc that compiles (transpiles) TypeScript files (_.ts_) into JavaScript. However, the tsc compiler (short for TypeScript compiler) needs a JSON configuration file to look for TypeScript files in the project and generate valid output files at a correct location.

When you run tsc command in a directory, TypeScript compiler looks for the tsconfig.json file in the current directory and if it doesn’t find one, then it keeps looking up the directory tree until it finds one. The directory where the tsconfig.json is located is considered as the root of the project.

You can manually provide a path to the tsconfig.json file using --project or -p command-line flag. This file doesn’t need to have the tsconfig.json filename if you are using this flag with the exact file path. However, you can also provide the directory path that contains the tsconfig.json file.

$ tsc -p /proj/x/tsconfig.dev.json

If the TypeScript compiler fails to locate this configuration file, you would get an error. But you can provide settings enlisted in this file through the equivalent command-line options which we will cover in the next lesson.

Structure of tsconfig.json

So what does this file contain and what exactly it controls?

{
  "files": [
    "src/lib/person.ts",
    "src/lib/student.ts",
    "src/main.ts"
  ],
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist/development"
  }
}

The tsconfig.json file is a standard JSON file, however, it supports JSON5 specifications, so you can use comments, single quotes, and more. It contains some root-level options and some compiler options. The root-level options are options that are outside of the compilerOptions object, so in the above example, files is a root-level option.

The root-level options control how the project is presented to the TypeScript compiler, such as which TypeScript files to consider for the compilation. The compiler options contain settings for the TypeScript compiler such as where to output the compiled JavaScript files in the project directory.

ROOT-LEVEL OPTIONS

These options control how the project is presented to the TypeScript compiler for the compilation and static type analysis. These options must be kept outside compilerOptions object of the tsconfig.json file.

● files

The files array contains the location of the TypeScript files to consider for the compilation. These can be either relative paths or absolute paths on the disk. A relative path is located relative to the location of the tsconfig.json file (AKA root of the project).

/projects/sample/
├── a.ts
├── src/
|  ├── b.ts
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.ts
|     └── e.ts
└── tsconfig.json

Let’s consider that we have the above directory structure in our project. As you can see, the TypeScript files (.ts) are located in multiple directories. We want to compile all the .ts files except the ignore.ts file. Hence we would provide relative paths of these files in the files options of tsconfig.json.

// tsconfig.json

{
    "files": [
        "a.ts",
        "src/b.ts",
        "./src/c.ts",
        "src/lib/d.ts",
        "./src/lib/e.ts"
    ]
}

You can also provide absolute paths of these files but relative paths are most recommended since they would be consistent on all the systems. All the relative paths are resolved against the path of tsconfig.json file in the project. You can optionally provide ./ or ../ prefix to locate the file.

Since we haven’t provided any compilerOptions values, all the default values for the compiler options are used which we will talk about in a bit. The TypeScript compiler compiles these files and outputs the JavaScript with .js extension by keeping the same file name as the individual input file.

The TypeScript compiler also preserves the original file path, hence the .js output file will be generated where the input file was in the directory structure. When you run the tsc command from the directory where your tsconfig.json file is located, you are going to see the result below.

/projects/sample/
├── a.js
├── a.ts
├── src/
|  ├── b.js
|  ├── b.ts
|  ├── c.js
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.js
|     ├── d.ts
|     ├── e.js
|     └── e.ts
└── tsconfig.json

As you can see, the TypeScript compiler compiled all the input TypeScript files listed inside files array of tsconfig.json. You can’t see the ignore.js file since ignore.ts file was not included in the files array.

The directory where the tsconfig.json file is located is considered as the root of the project, AKA the root directory. You can also include a file from outside this root directory, such by including "../x.ts" in the files array where x would be in the parent directory of the root directory. Since the TypeScript compiler preserves the input file path, it will generate x.js in the parent directory of the root directory.

● include & exclude

The files option is great when you have relatively few files to work with. But when your project is big and contains hundreds of source files located in a nested directory structure, then handpicking file paths is not practical.

To solve this issue, we can use include option. This option is just like files, however, we can optionally provide glob patterns to locate input files. The exclude options behave the same, except it removes the files from the compilation that may have been included by the include option.

// tsconfig.json

{
    "include": [
        "a.ts",
        "src/**/*.ts"
    ],
    "exclude": [
        "./**/*/ignore.ts"
    ]
}

In the above tsconfig.json, we have removed the files option and added include which adds a.ts file from the root directory and all the .ts file from the src directory. Since this would also include any ignore.ts from the src directory, we have provided the exclude option that excludes any ignore.ts file from the compilation if located inside the src directory.

When we run the tsc command now, results won’t be any different since the files considered for the compilation both in the previous example and this example are the same.

/projects/sample/
├── a.js
├── a.ts
├── src/
|  ├── b.js
|  ├── b.ts
|  ├── c.js
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.js
|     ├── d.ts
|     ├── e.js
|     └── e.ts
└── tsconfig.json

The TypeScript compiler automatically excludes files from the "node_modules", "bower_components", "jspm_packages" and "<outDir>" directories, where <outDir> is the value of outDir compiler-option provided by you. This prevents any .ts file from these directories getting included in the compilation process by accident.

nodejs typescript deno programming javascript deno

Deno 1.0 was released on May 13, 2020. Deno is Ryan Dahl’s (yeah, you guessed it right, the guy who created Node.js) latest venture. But it isn’t just another JavaScript Engine. It also supports TypeScript — JavaScript’s strictly typed cousin — out of the box.

deno-script 🦕 Enhanced scripting support for JavaScript/TypeScript with Deno 🦕 on *nix-based systems.

Learn How to Compile & Run Javascript Code in Deno Runtime.

Pair Programming Getting Started with Nodejs and Deno. What is Deno? Deno is a runtime for JavaScript and TypeScript that is based on the V8 JavaScript engine and the Rust programming language. It was created by Ryan Dahl, original creator of Node.js, and is focused on productivity. It was announced by Dahl in 2018 during his talk "10 Things I Regret About Node.js"

What is Deno? Deno is a runtime for JavaScript and TypeScript that is based on the V8 JavaScript engine and the Rust programming language. It was created by Ryan Dahl, original creator of Node.js, and is focused on productivity. It was announced by Dahl in 2018 during his talk "10 Things I Regret About Node.js"