Search code examples
typescriptsystemjs

TypeScript type errors are ignored


Here is SystemJS + TypeScript plunk, created from official Angular plunk template.

As it shows, it ignores all TypeScript type errors, the only thing that is logged to console is foo:

main.ts

const foo: boolean = 'foo';

console.log(foo);

config.js

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {

    'app': './src',
    ...
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    ...
  }
});

index.html

...
<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
  .catch(console.error.bind(console));
</script>
...

Generally I would prefer TypeScript to stop application execution and throw type errors.

What is wrong with this setup? Why are TypeScript errors suppressed? How can this setup be changed?


Solution

  • You can use plugin-typescript for SystemJS, which, as of version 6, has the option to enable typechecking in the browser (note that this option is removed in version 7).

    But you have to confiure that plugin exactly as spelled out in its readme, that is, have typescript package in SystemJS config with main and meta like this:

    typescript: {
      "main": "lib/typescript.js",
      "meta": {
        "lib/typescript.js": {
          "exports": "ts"
        }
      }
    }
    

    Then, because of this main, you have to change typescript in the map to

    'typescript': 'npm:[email protected]'
    

    Then, you also need to add these to typescriptOptions:

    experimentalDecorators: true,
    typeCheck: true
    

    After these changes, type errors are being printed in console:

    unpkg.com/[email protected]/lib/plugin.js:498 TypeScript [Error] 
    Type '"foo"' is not assignable to type 'boolean'. (TS2322)
    

    But I don't think there is a way to stop program execution on type errors - noEmitOnErrors has no effect for plugin-typescript as far as I can tell.

    I saved updated plunk here, no idea how long it will stay.