Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 1000
Chris Halcrow Avatar asked Jan 07 '18 23:01

Chris Halcrow


People also ask

What is module option in Tsconfig?

"module" in tsconfig. json tells the Typescript (TS) compiler what module syntax to use when the files are compiled to Javascript (JS). When you set "module" to "commonjs" in tsconfig. json, this means that the modules in the compiled . js files will use the commonJS (CJS) syntax, so var x = require(...) and module.

How does Tsconfig work?

The tsconfig.json file specifies the root files and the compiler options required to compile the project. JavaScript projects can use a jsconfig.json file instead, which acts almost the same but has some JavaScript-related compiler flags enabled by default.

What is include and exclude in Tsconfig?

The include and exclude properties take a list of glob-like file patterns. The supported glob wildcards are: * matches zero or more characters (excluding directory separators) ? matches any one character (excluding directory separators)

What is exclude in Tsconfig?

Use the exclude option in your tsconfig. json file to exclude a folder from compilation in TypeScript. The exclude option changes what the include setting finds and defaults to node_modules and bower_components .


1 Answers

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.

like image 146
Greg Rozmarynowycz Avatar answered Sep 20 '22 12:09

Greg Rozmarynowycz