How do you handle transpilation of TypeScript into different versions of ECMAScript?

Handling the transpilation of TypeScript into different versions of ECMAScript is done using the TypeScript compiler (tsc) and configuring the appropriate options in the ‘tsconfig.json‘ file of your project.

In the ‘tsconfig.json‘ file, you can specify the ECMAScript version you want to transpile your TypeScript code into by setting the "target" property. The "target" property allows you to choose the desired ECMAScript version: ES3, ES5, ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, or ESNext. The default value for "target" is ES3.

To handle transpilation of TypeScript into different versions of ECMAScript, edit your ‘tsconfig.json‘ file with the corresponding target value. For example, if you want to transpile your TypeScript code into ES2015 (also known as ES6), update your ‘tsconfig.json‘ to include:

{
  "compilerOptions": {
    "target": "ES2015"
  }
}

Let’s say you have a simple TypeScript file ‘example.ts‘:

class MyClass {
  constructor(public name: string) {}

  greet() {
    return `Hello, ${this.name}!`;
  }
}

const instance = new MyClass("John");
console.log(instance.greet());

After transpiling to different ECMAScript versions using different "target" options in your ‘tsconfig.json‘, you would observe the following differences in output:

1. ‘"target": "ES5"` (Classes will be transpiled to constructor functions with a prototype chain)

var MyClass = (function () {
    function MyClass(name) {
        this.name = name;
    }
    MyClass.prototype.greet = function () {
        return "Hello, " + this.name + "!";
    };
    return MyClass;
}());
var instance = new MyClass("John");
console.log(instance.greet());

2. ‘"target": "ES2015"` (ES6 features, like classes, will be preserved)

class MyClass {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return `Hello, ${this.name}!`;
    }
}
const instance = new MyClass("John");
console.log(instance.greet());

Remember that targeting a higher ECMAScript version might result in a smaller output and better runtime performance, but it will require a more modern JavaScript runtime environment, which might not be supported in older browsers.

It’s good practice to choose a transpilation target that balances compatibility with your project’s requirements and the JavaScript environment where your code will run.