tsconfig module options - does 'System' refer to SystemJS?

Question

In a tsconfig.json file, the following option can be specified as the value of the compilerOptions 'module' property:

System

So that we get:

{
  "compilerOptions": {
    "module": "System",
     ...

Does System refer to SystemJS (i.e. if SystemJS is being used as the module loader do I always need 'System' in my tsconfig.json when I'm creating an AngularJS or Angular app)? The documentation doesn't appear to explain this:

https://www.typescriptlang.org/docs/handbook/compiler-options.html

In Visual Studio project configuration for TypeScript there's also a 'System' option under 'TypeScript Build > Module system', which will obviously be referring to the same thing as the 'System' in the tsconfig.json.

score 5 · Accepted Answer · edited Jan 09 '18 at 22:14

Yes it Refers to SystemJS, and including it explicitly is important if you want the TypeScript compiler to behave as you expect and generate the code you expect. If you don't specify, TypeScript will revert to generating (and expecting) code based off of the current target ES version (by default ES3, triggering commonjs modules). As noted in the compiler docs it will have an affect on other default compiler options like moduleResolution and allowSyntheticDefaultImports.

For example, if you have a typescript file as follows

import { functionA } from './moduleA';
functionA();

If you specify module as system your generated code will used System calls:

System.register(["./moduleA"], function (exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var moduleA_1;
    return {
        setters: [
            function (moduleA_1_1) {
                moduleA_1 = moduleA_1_1;
            }
        ],
        execute: function () {
            moduleA_1.functionA('Stuff');
        }
    };
});

However, if you allow the compiler to default to commonjs, it will generate:

"use strict";
var moduleA_1 = require('./moduleA');
moduleA_1.functionA('Stuff');

Note the generated code may vary based on TS version or other flags.

From testing/experience and the module resolution and compiler docs you linked.

Thanks Greg, would you please quote the section(s) in the those documents that clarify that the System option refers to SystemJS? I'm confused at to why I have intellisense options in Visual Studio when setting the value of 'module' in the tsconfig.json for 'amd' (which is a generic concept), 'system' which you're saying is SystemJS (a specific system), and es2015 which is a standard! This makes no sense — Chris Halcrow, Jan 08 '18 at 00:53
You may be interested in my question about CommonJS here - https://stackoverflow.com/questions/48142990/is-commonjs-a-standard-that-can-be-piggybacked-on-or-is-it-just-another-javascri — Chris Halcrow, Jan 08 '18 at 00:53
I added to my post. The module resolution docs link directly to SystemJS docs under the "Base Url" and "Path Mapping". I admit this is still inference, but the generated code clearly uses the SystemJS interface. I admit it's confusing, but there's a cobble of libraries/standards that are being accommodated. — Greg Rozmarynowycz, Jan 08 '18 at 01:00

tsconfig module options - does 'System' refer to SystemJS?

1 Answers1

Linked