TypeScript Loader for SystemJS

Common errors

• Error: (SystemJS) X not found.

  cause SystemJS failed to find `plugin-typescript` or `typescript` due to incorrect `map` or `packages` configuration.
  fix Verify your `SystemJS.config` map and packages entries for 'ts' and 'typescript' point to the correct paths of the installed modules.

• Error: transpiler set to 'ts', however System.import('ts') failed.

  cause SystemJS could not load the `plugin-typescript` module itself, often due to missing installation or incorrect configuration.
  fix Ensure `jspm install ts` was run (if using JSPM), or that the manual `SystemJS.config` entries for 'ts' (main, map, meta) are correctly specified and point to `plugin-typescript`'s `lib/plugin.js`.

• TypeScript compile error: Supplied parameters do not match any signature of call target.

  cause This is a general TypeScript compilation error indicating a type mismatch or incorrect usage, but it can be exacerbated by incorrect `typescriptOptions` or `tsconfig.json` settings.
  fix Review the `typescriptOptions` in your `System.config` (or your `tsconfig.json` if `tsconfig: true`) to ensure compiler options like `noImplicitAny`, `strict`, `target`, and `module` are set appropriately for your project and source code.

Warnings

• breaking Major TypeScript version compatibility: plugin-typescript 8.x requires TypeScript 2.0.0+. Older versions of `plugin-typescript` (4.0.16 or 2.x.x) are necessary for TypeScript 1.8.1 and below, respectively.
  Fix: Ensure `plugin-typescript` and `typescript` peer dependency versions are compatible according to the `plugin-typescript` README. Upgrade or downgrade `plugin-typescript` if needed.
• gotcha The package is effectively abandoned. The last major update was in 2017 (v8.0.0), and it relies heavily on SystemJS and JSPM, which are less commonly used in modern web development workflows. No further updates or bug fixes are expected.
  Fix: For new projects, consider modern bundlers like Webpack, Rollup, or Vite with their native TypeScript support. For existing projects, be aware of potential unaddressed issues or lack of support for newer TypeScript features.
• breaking Configuration structure for SystemJS changed across major versions of SystemJS and JSPM. Older configuration styles might not work, especially with how packages and transpilers are defined.
  Fix: Always refer to the specific documentation for your SystemJS/JSPM version and `plugin-typescript` version. Ensure `System.config` uses the correct `packages`, `map`, and `transpiler` properties as shown in the `plugin-typescript` README.
• gotcha Resolving `tsconfig.json` path: When `tsconfig: true` is set, `plugin-typescript` attempts to resolve `tsconfig.json` using SystemJS's normal resolution. Incorrect paths or configurations can lead to compiler options not being applied.
  Fix: Ensure `tsconfig.json` is located in a discoverable path, or explicitly set `tsconfig: 'path/to/tsconfig.json'` in `typescriptOptions` if it's not at the root or standard location.

Install

• npm install plugin-typescript npm
• yarn add plugin-typescript yarn
• pnpm add plugin-typescript pnpm

Imports

• Transpiler Configuration

  System.config({
    transpiler: "ts",
    packages: {
      "app": {
        "defaultExtension": "ts"
      }
    }
  });

  This configures SystemJS to use `plugin-typescript` as the default transpiler for `.js` and `.ts` files within the 'app' package.
• Package-Specific Loader

  System.config({
    transpiler: "babel", // Use another transpiler by default
    packages: {
      "src": {
        "defaultExtension": "ts",
        "meta": {
          "*.ts": {
            "loader": "ts"
          }
        }
      }
    }
  });

  This pattern configures `plugin-typescript` to load specific files (e.g., all `.ts` files in the 'src' package) even if a different default transpiler is set.
• TypeScript Compiler Options

  System.config({
    typescriptOptions: {
      module: "system",
      noImplicitAny: true,
      tsconfig: true
    }
  });

  Passes TypeScript compiler options directly to the underlying TypeScript compiler used by the plugin. These options can also be overridden for specific files using `meta` configuration.

Quickstart

Demonstrates how to configure SystemJS to use `plugin-typescript` for on-the-fly TypeScript transpilation, including mapping paths, setting it as the default transpiler, and applying `typescriptOptions` before importing a TypeScript file.

/*
  Ensure 'typescript' is installed as a peer dependency:
  npm install typescript@^2.4.0
  
  If using JSPM:
  jspm install ts

  Otherwise, configure SystemJS manually:
*/

SystemJS.config({
  packages: {
    "ts": {
      "main": "lib/plugin.js"
    },
    "typescript": {
      "main": "lib/typescript.js",
      "meta": {
        "lib/typescript.js": {
          "exports": "ts"
        }
      }
    },
    "app": {
      "defaultExtension": "ts"
    }
  },
  map: {
    // Adjust these paths to your installation location
    "ts": "./node_modules/plugin-typescript",
    "typescript": "./node_modules/typescript"
  },
  transpiler: 'ts',
  typescriptOptions: {
    module: "system",
    target: "es5",
    emitDecoratorMetadata: true,
    experimentalDecorators: true,
    noImplicitAny: false
  }
});

// Example app.ts content (assuming this file exists):
// export class MyClass { constructor(public name: string) {} }
// console.log(new MyClass('Hello from TypeScript!'));

System.import('app/main.ts') // Assuming main.ts is the entry point within the 'app' package
  .then(module => {
    console.log('Successfully loaded and transpiled main.ts', module);
    // You can now interact with exports from main.ts
  })
  .catch(err => console.error('Error loading TypeScript module:', err));