Understanding "target" and "module" in tsconfig

Solution 1:

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."

Solution 2:

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.