Typescript tsconfig.json:- some compiler options demystified
People using typescript for there applications must have used tsconfig.json that is mostly copied over from projects. As a result, we tend to ignore the options that are present by default in tsconfig.json. Lets go through some most common and confusing options present out there.
1. target
signifies which target of JavaScript should be emitted from the given Typescript. Examples:
// target: es5
()=>null will become function(){return null} as ES5 doesn't have arrow functions.// target: es6
()=>null will become ()=>null as ES6 has arrow functions.
So, if you are using async await in your typescript code it will compile down to Promises when target is es6. Most of the browsers support ES6 standard these days except IE.
Below are the valid values that can be specified in target
Specify ECMAScript target version:
► "ES3" (default)
► "ES5"
► "ES6"/"ES2015"
► "ES2016"
► "ES2017"
► "ES2018"
► "ES2019"
► "ES2020"
► "ESNext"
Note: "ESNext" targets latest supported ES proposed features.2. module
signifies what syntax of JavaScript modules should be emitted in js files from the given Typescript.
Frequently used values are "commonjs" (require/module.exports) or "ES2015" (import/export keywords), but there are other module systems.
module affects the module syntax of emitted code while target affects the rest.
Examples:
Here’s some example output for this file:// @filename: index.ts
import { valueOfPi } from "./constants";
export const twoPi = valueOfPi * 2;//CommonJSconst constants_1 = require("./constants");
exports.twoPi = constants_1.valueOfPi * 2;//ES2020
import { valueOfPi } from "./constants";
export const twoPi = valueOfPi * 2;
3. moduleResolution
signifies how modules get resolved, emitted in js files from the given Typescript. Either "Node" for Node.js/io.js style resolution, or "Classic".
Consider an import statement like import { a } from "moduleA"; in order to check any use of a, the compiler needs to know exactly what it represents, and will need to check its definition moduleA. First, the compiler will try to locate a file that represents the imported module. To do so the compiler follows one of two different strategies: Classic or Node. These strategies tell the compiler where to look for moduleA.
Node is now Typescript’s default mode of module resolution, i.e. classic is mostly present for backwards compatibility.i.e.module === "AMD" or "System" or "ES6" ? "Classic" : "Node"
4. lib
signifies what facilities the runtime environment has.
The basic idea is that while target deals with language features (more specifically which language features need to be down compiled, ex: for-of, or arrow functions), the lib option deals with what facilities the runtime environment has (ie. what built-in objects look like, what they are).
Ideally the default libs for a given target should be used. We may, however, have an environment which supports some of the runtime facilities but not the language features, or we may target runtime with a lower es version and poly-fill some of the runtime facilities, which can be in general done for some things (ex: Promises).
Note: If --lib is not specified a default list of librares are injected. The default libraries injected are:► For --target ES5: DOM,ES5,ScriptHost► For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost
Typescript never injects poly-fills it’s not its goal.So, whatever you choose in target affects the default value of lib which tells Typescript to use which runtime features.
Examples:
If you are targeting Node.js 12.9.0 or newer, you can simply specify "lib": ["es2020"] as that version supports all new functions and properties introduced in ES2020. It doesn't support the new JavaScript syntax though, so you still have to stay on "target": "es2019".{
"compilerOptions": {
"lib": ["es2020"],
"module": "commonjs",
"target": "es2019"
}
}
If this post was helpful, please click the clap 👏 button below a few times to show your support! ⬇⬇
