Controlling transpilation

In this lesson, we will learn how to ensure transpiled code is supported on our target environments. We will also learn how to suppress the creation of JavaScript code.

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.

The TypeScript code in the project contains a class called Product in the src folder.

Targeting an ECMAScript version

We can control the ECMAScript compatible version by using the target compilation option.

• Let's run the TypeScript compiler without specifying a target:

Copy
npm run tsc

Ignore the type error that is raised for now. Look at the JavaScript that has been created in product.js in the dist folder. Notice that the class is transpiled into an IIFE (Immediately Invoked Function Expression). This is because, by default, TypeScript transpiles into ES3 compatible code.

• Add the following target option into tsconfig.json:

Copy
{
  "compilerOptions": {
    ...
    "target": "ESNext"
  },
  ...
}

"ESNext" targets the latest ECMAScript features, including ones that are still at the proposal stage.

• Rerun the TypeScript compiler:

Copy
npm run tsc

All the compiler target options can be found here.

• Remove the dist folder before continuing.

Stopping transpilation when type errors are raised

We covered how to stop transpilation when type errors are raised in lesson 1.

• Update tsconfig.json to stop the transpilation process if a type error occurs:

• Rerun the TypeScript compiler:

Copy
npm run tsc

products.ts is not transpiled because it contains a type error.

• Let's fix the error in products.ts:

Copy
class Product {
  constructor(public name: string, public price: number) {
    price = 0;
  }
}

• Rerun the TypeScript compiler:

Copy
npm run tsc

products.ts is now transpiled.

Nice!

• Remove the "noEmitOnError": true setting and delete dist folder before continuing to the next section.

Suppressing transpilation

There is a compilation option called noEmit to stop transpilation all together. This is useful when we are using Babel in a project. Babel is a popular JavaScript transpiler that is capable of transpiling TypeScript.

• Update tsconfig.json with the noEmit flag set:

Copy
{
  "compilerOptions": {
    ...
    "noEmit": true
  },
  ...
}

• Rerun the TypeScript compiler:

Copy
npm run tsc

No JavaScript is generated.

• Add a type error back into products.ts:

Copy
class Product {
  constructor(public name: string, public price: number) {
    unitPrice = 0;
  }
}

• Rerun the TypeScript compiler:

Copy
npm run tsc

A type error occurs because TypeScript will still type check the code - it just won't emit any JavaScript.

Great!

Summary

The JavaScript code that the TypeScript compiler emits is supported on very old browsers by default. The target compiler option lets us target more modern environments and generates more performant code.

The noEmitOnError lets us halt the transpilation process when an error occurs. The noEmit option is useful when we use Babel for the transpilation but still have TypeScript carry out type checking.

In the next lesson, we will learn how to configure the compiler to allow TypeScript to be debugged.