Compiling specific files

In this lesson, we will learn how to define what files should be compiled in the TypeScript compilation process.

Technical requirements

You will need the following installed on your computer for this lesson:

• Node.js and npm. You can download these from https:/​/​nodejs.​org/​en/​download. If you already have these installed, make sure that Node.js is at least version 8.2, and that npm is at least version 5.

• Code editor such as Visual Studio Code. This can be installed from https:/​/​code.​visualstudio.​com.

• The starter project which can be found here.

• After the starter project has been downloaded. Open it in a code editor and execute the following command in a Terminal window:

Copy
npm install

This will install the project dependency, which is TypeScript.

Specifying files by name

The default behavior of the TypeScript compiler is to compile all the TypeScript files that exist in a project.

A way of being specific about what files to compile is to use the "files" option in tsconfig.json.

• Add the following to the tsconfig.json file:

Copy
{
  "compilerOptions": {
    ...
  },
  "files": [
    "src/shared/utils.ts"
  ]
}

• Invoke the TypeScript compiler by running the following command, in the Terminal window:

Copy
npm run tsc

This is nice, but listing every file will quickly become difficult to maintain.

• Remove the "files" option in tsconfig.json and the dist folder before continuing.

Specifying folders

A better option for specifying what files to compile is to use the "include" option in tsconfig.json.

• Add the following to the tsconfig.json file:

Copy
{
  "compilerOptions": {
    ...
  },
  "include": ["src/**/*"]
}

The include option takes a list of glob-like file patterns. The supported glob wildcards are:

• * matches zero or more characters (excluding directory separators)

• ? matches any one character (excluding directory separators)

• **/ recursively matches any subdirectory

• Invoke the TypeScript compiler:

Copy
npm run tsc

Both TypeScript files have been compiled. The transpiled JavaScript files have been placed in the dist directory.

• Remove the dist folder before continuing.

Specifying folders to exclude

Folders can also be excluded from the compilation process using an "exclude" option in tsconfig.json.

This is useful for ensuring the node_modules folder is ignored, and test files are ignored:

Copy
{
  ...
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

Compiling JavaScript files

The TypeScript compiler can compile JavaScript files if we set the allowJs option to true. This is useful when migrating a project to TypeScript, and you have a mix of JavaScript and TypeScript files.

• Add the allowJs flag to tsconfig.json with include still specifying all files in the src directory:

Copy
{
  "compilerOptions": {
    ...
    "allowJs": true,
  },
  "include": ["src/**/*"]
}

• Invoke the TypeScript compiler:

Copy
npm run tsc

Notice that the utilsv1.js file has now been included in the dist\shared folder.

Neat!

Summary

The include option is a flexible way of specifying what files to compile. The exclude option can be used to exclude test code and code in the node_modules folder from the compilation process. allowJs is a useful option when migrating a JavaScript project to TypeScript.

In the next lesson, we will learn how to control the transpilation process further.