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 ? — Nitzan Tomer
– Nitzan Tomer, Commented Sep 14, 2016 at 14:31
An important correction to Paleo's answer: Documentation actually says that >>"ES6" and "ES2015" values may be used when targeting "ES5" or lower.<< — Peti29
– Peti29, Commented Jun 30, 2017 at 14:57
Possible duplicate of Understanding "target" and "module" in tsconfig — Paleo
– Paleo, Commented May 10, 2018 at 12:43

motss · Accepted Answer · 2020-10-08 15:25:46Z

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 8, 2020 at 15:25

answered May 10, 2018 at 12:48

motss

6784 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brewmaster Over a year ago

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

motss Over a year ago

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.

Paleo · Accepted Answer · 2019-03-12 06:32:59Z

20

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, 2019 at 6:32

answered Sep 14, 2016 at 14:32

Paleo

24k5 gold badges74 silver badges84 bronze badges

2 Comments

Raghu Over a year ago

Here is a better explanation for this module vs target confusion: stackoverflow.com/questions/41993811/…

feeela Oct 14 at 6:59

This doesn't explain anything, hence the question.

Vijay Joshua Nadar · Accepted Answer · 2021-08-09 08:25:23Z

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

Collectives™ on Stack Overflow

TypeScript Compile Options: module vs target

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Related