TypeScript Compile Options: module vs target

Question

Trying to have some basic understanding about module and target.

I would like to know the difference between module and target compile options in a typical tsconfig.json

{
    "compilerOptions": {
        "module": "es6",
        "sourceMap": true,
        "target": "es6"
    }
}

What happens if I provide the following options:

module: commonjs, target: es6

module: es6, target: commonjs

module: commonjs, target: commonjs

Target can not be commonjs. It can only be: 'es3' (default), 'es5', or 'es6'. Have you read the [Compiler Options doc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) ? — Nitzan Tomer, Sep 14 '16 at 14:31
An important correction to Paleo's answer: [Documentation](https://www.typescriptlang.org/docs/handbook/compiler-options.html) actually says that >>"ES6" and "ES2015" values **may be used** when targeting **"ES5" or lower**.< — Peti29, Jun 30 '17 at 14:57
Possible duplicate of [Understanding "target" and "module" in tsconfig](https://stackoverflow.com/questions/41993811/understanding-target-and-module-in-tsconfig) — Paleo, May 10 '18 at 12:43

motss · Answer 1 · 2020-10-08T15:25:46.870

21

There are 2 different things. --target simply means which version of ECMAScript you're using to code. --module simply means which module system you're using such as commonjs for Node or ES module for all that supports it and what not.

edited Oct 08 '20 at 15:25

answered May 10 '18 at 12:48

motss

662
4
6

4

what do you mean by "you're using"? You can be using module system to resolve dependencies or you can be using modules to package your output. Or there are other things where you can "use" one or another module system or langauge level – brewmaster Sep 08 '22 at 18:58
It basically means your own code or the code you're writing. `target` affects your code (excluding whatever from your `node_modules`). `Modules` is about module resolution that affects your local files and how it can read something from your node_modules. TypeScript config should mainly affecting your own code because it is not a bundler. With that being said, you can write ES2020 code with native esm while your packages can be written in ES5 and RequireJS. – motss Nov 09 '22 at 11:52

Paleo · Accepted Answer · 2019-03-12T06:32:59.647

18

A more detailed explanation is here : Understanding "target" and "module" in tsconfig

See also: Understanding "target" and "module" in tsconfig.

Here is a quote from the documentation on compiler options:

--target

Specify ECMAScript target version: 'es3' (default), 'es5', or 'es6'.

--module

Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', or 'es2015'.

Only 'amd' and 'system' can be used in conjunction with --outFile.

'es6' and 'es2015' values may be used when targeting ES5 or lower.

edited Mar 12 '19 at 06:32

answered Sep 14 '16 at 14:32

Paleo

21,831
4
65
76

11

Here is a better explanation for this module vs target confusion: https://stackoverflow.com/questions/41993811/understanding-target-and-module-in-tsconfig – Raghu Aug 02 '17 at 20:14

score 14 · Answer 3 · answered Aug 09 '21 at 08:25

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. For instance if you set the module property to "commonJS", your compiled code will use "require/module.exports" to import/export. The module property will not however affect the rest of the compiled code. For the sake of clarity, please refer this answer: https://stackoverflow.com/a/61215252/8659116

TypeScript Compile Options: module vs target

3 Answers3