Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Understanding "target" and "module" in tsconfig

Tags:

typescript

Below is my tsconfig.json file where I have set target to es5 and module to es6

{    "compilerOptions": {    "target": "es5",        "module": "es6"    }  } 

My question is because modules [import / export ] are part of es6 and NOT es5 , the transpiled javascript code should not be having import / export statements. But the javascript code that is generated is having import / export statements even though the target is es5 , how is it possible ?

like image 784
refactor Avatar asked Feb 02 '17 03:02

refactor


People also ask

What is module and target in Tsconfig json?

The "target" property is used to specify the JavaScript version your TypeScript code will eventually compile into. The "module" property specifies the type of the module syntax your compiled (TS-->JS) code will use.

What is module option in Tsconfig?

"module" in tsconfig. json tells the Typescript (TS) compiler what module syntax to use when the files are compiled to Javascript (JS). When you set "module" to "commonjs" in tsconfig. json, this means that the modules in the compiled .

What does Tsconfig target do?

The target setting changes which JS features are downleveled and which are left intact. For example, an arrow function () => this will be turned into an equivalent function expression if target is ES5 or lower. Changing target also changes the default value of lib .

What is module resolution in Tsconfig?

Module resolution is the process the compiler uses to figure out what an import refers to. 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 .


Video Answer


2 Answers

The module system is independent of the language implementation. ES6 (ES2015) modules use the import/export syntax, and it is up to the module loader to interpret that.

Here you have specified using the ES2015 module system, so that enables the ES6 module syntax.

The JavaScript itself may target ES5, and use only ES5 features, but it is theoretically possible to use a module loader with that code that operates with ES2015 module syntax. Although it is possible, it is not necessarily something you would want to do. It is more common to use CommonJS or AMD modules with ES5 JavaScript.

Apparently this combination was not even allowed before TypeScript 2.0. In the TypeScript 2.0 release notes, it says:

"Previously flagged as an invalid flag combination, target: es5 and ‘module: es6’ is now supported. This should facilitate using ES2015-based tree shakers like rollup."

like image 193
jims Avatar answered Oct 14 '22 08:10

jims


To supplement the previous answer, in 2020 there are 4 TS config options that define the module resolution and compilation output:

  • module.
  • target.
  • lib.
  • moduleResolution.

The first 3 affect your output, while the latter affects the way the compiler searches for your modules to resolve them and bundle.

Here's a great and concise article about these options: Typescript confusion: tsconfig.json module, moduleResolution, target & lib explained | by Tom Medema | Medium.

Additionally, a doc about module resolution: TypeScript: Handbook - Module Resolution.

like image 29
Alexey Grinko Avatar answered Oct 14 '22 09:10

Alexey Grinko