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

Solution 1

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.

Solution 2

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.

Solution 3

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

Comments

[Raghu]

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