{"id":14811,"library":"plugin-typescript","title":"TypeScript Loader for SystemJS","description":"plugin-typescript (current stable version 8.0.0) is a loader plugin for SystemJS that enables the direct `System.import` of TypeScript files. It transpiles `.ts` and `.tsx` files on the fly within the browser or Node.js environment when loaded by SystemJS. This package was the officially supported mechanism for transpiling TypeScript within JSPM 0.17.0 and later, providing immediate compilation and error reporting to the console. It supports TypeScript versions 2.0.0 and higher, with specific older versions (4.0.16 for TS 1.8.1, 2.x.x for TS 1.7.5 and below) required for compatibility. The package's release cadence was tied to the evolution of SystemJS and JSPM, focusing on browser-side transpilation and integration with SystemJS's module loading capabilities.","status":"abandoned","version":"8.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/frankwallis/plugin-typescript","tags":["javascript","systemjs","jspm","es6","typescript","ts","tsx","angular2","react"],"install":[{"cmd":"npm install plugin-typescript","lang":"bash","label":"npm"},{"cmd":"yarn add plugin-typescript","lang":"bash","label":"yarn"},{"cmd":"pnpm add plugin-typescript","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the actual TypeScript compilation process.","package":"typescript","optional":false}],"imports":[{"note":"This configures SystemJS to use `plugin-typescript` as the default transpiler for `.js` and `.ts` files within the 'app' package.","symbol":"Transpiler Configuration","correct":"System.config({\n  transpiler: \"ts\",\n  packages: {\n    \"app\": {\n      \"defaultExtension\": \"ts\"\n    }\n  }\n});"},{"note":"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.","symbol":"Package-Specific Loader","correct":"System.config({\n  transpiler: \"babel\", // Use another transpiler by default\n  packages: {\n    \"src\": {\n      \"defaultExtension\": \"ts\",\n      \"meta\": {\n        \"*.ts\": {\n          \"loader\": \"ts\"\n        }\n      }\n    }\n  }\n});"},{"note":"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.","symbol":"TypeScript Compiler Options","correct":"System.config({\n  typescriptOptions: {\n    module: \"system\",\n    noImplicitAny: true,\n    tsconfig: true\n  }\n});"}],"quickstart":{"code":"/*\n  Ensure 'typescript' is installed as a peer dependency:\n  npm install typescript@^2.4.0\n  \n  If using JSPM:\n  jspm install ts\n\n  Otherwise, configure SystemJS manually:\n*/\n\nSystemJS.config({\n  packages: {\n    \"ts\": {\n      \"main\": \"lib/plugin.js\"\n    },\n    \"typescript\": {\n      \"main\": \"lib/typescript.js\",\n      \"meta\": {\n        \"lib/typescript.js\": {\n          \"exports\": \"ts\"\n        }\n      }\n    },\n    \"app\": {\n      \"defaultExtension\": \"ts\"\n    }\n  },\n  map: {\n    // Adjust these paths to your installation location\n    \"ts\": \"./node_modules/plugin-typescript\",\n    \"typescript\": \"./node_modules/typescript\"\n  },\n  transpiler: 'ts',\n  typescriptOptions: {\n    module: \"system\",\n    target: \"es5\",\n    emitDecoratorMetadata: true,\n    experimentalDecorators: true,\n    noImplicitAny: false\n  }\n});\n\n// Example app.ts content (assuming this file exists):\n// export class MyClass { constructor(public name: string) {} }\n// console.log(new MyClass('Hello from TypeScript!'));\n\nSystem.import('app/main.ts') // Assuming main.ts is the entry point within the 'app' package\n  .then(module => {\n    console.log('Successfully loaded and transpiled main.ts', module);\n    // You can now interact with exports from main.ts\n  })\n  .catch(err => console.error('Error loading TypeScript module:', err));","lang":"javascript","description":"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."},"warnings":[{"fix":"Ensure `plugin-typescript` and `typescript` peer dependency versions are compatible according to the `plugin-typescript` README. Upgrade or downgrade `plugin-typescript` if needed.","message":"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.","severity":"breaking","affected_versions":"<8.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=8.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":"<8.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify your `SystemJS.config` map and packages entries for 'ts' and 'typescript' point to the correct paths of the installed modules.","cause":"SystemJS failed to find `plugin-typescript` or `typescript` due to incorrect `map` or `packages` configuration.","error":"Error: (SystemJS) X not found."},{"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`.","cause":"SystemJS could not load the `plugin-typescript` module itself, often due to missing installation or incorrect configuration.","error":"Error: transpiler set to 'ts', however System.import('ts') failed."},{"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.","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.","error":"TypeScript compile error: Supplied parameters do not match any signature of call target."}],"ecosystem":"npm"}