Ember CLI TypeScript Integration

5.3.0 · maintenance · verified Sun Apr 19

ember-cli-typescript is an Ember CLI addon designed to integrate TypeScript into Ember applications and addons by facilitating TypeScript compilation and type checking. The package is currently in "maintenance mode" as of version 5.3.0, meaning it will no longer receive active development for new features unless critical updates are required. Its core functionality has largely been absorbed into `ember-cli-babel` for TypeScript transpilation and official Ember blueprints for `tsconfig.json` generation. Developers are now encouraged to configure TypeScript directly via `ember-cli-babel` options and `@tsconfig/ember` base configurations, aligning with the official Ember TypeScript guides. It primarily focuses on build-time integration rather than providing runtime utilities, and its release cadence has become infrequent due to its maintenance status.

Common errors

```
Module '...' has no default export.
```
cause Incorrect `tsconfig.json` paths configuration or missing type declarations (`.d.ts` files or `@types/*` packages).

fix Verify your `tsconfig.json` `paths` are correctly configured (e.g., `"*": ["types/*"]` and other app/addon specific paths), and ensure all necessary `@types/*` packages are installed.
```
Cannot find name '...' (e.g., 'Cannot find name 'Ember'').
```
cause Missing or outdated `@types/*` packages, or incorrect global type declarations.

fix Ensure all relevant `@types/ember`, `@types/qunit`, `@types/rsvp`, etc., are installed and up-to-date. Check your `tsconfig.json`'s `compilerOptions.types` or `files` array if you're explicitly including types.
```
TypeScript compilation failed.
```
cause Syntax errors in TypeScript files, misconfigured `tsconfig.json`, or issues with `ember-cli-babel`'s TypeScript transform.

fix Check the console output for specific TypeScript errors and fix them in your code. Ensure `enableTypeScriptTransform: true` is set in your `ember-cli-babel` options and your `tsconfig.json` extends `@tsconfig/ember/tsconfig.json` correctly.

Warnings

deprecated `ember-cli-typescript` is in "MAINTENANCE MODE" and its functionality is largely superseded by direct `ember-cli-babel` configuration and official Ember TypeScript blueprints. It is no longer actively developed for new features.
Fix: For new projects or when upgrading, configure TypeScript directly via `ember-cli-babel` (setting `enableTypeScriptTransform: true`) and use `@tsconfig/ember` for your `tsconfig.json`. Consider migrating existing projects off `ember-cli-typescript` if possible, though it may continue to function for older setups.
breaking As of v5.3.0, Node.js v12 is no longer supported, requiring Node.js v14 or higher. Previous versions had varying Node.js requirements, with v5.0.0 also dropping support for older Node versions.
Fix: Upgrade your Node.js environment to LTS v14 or newer.
breaking Starting with v4.0.0, `ember-cli-typescript` no longer manages your Babel configuration, relying entirely on `ember-cli-babel`. This means any specific Babel configuration previously handled by `ember-cli-typescript` must now be configured directly through `ember-cli-babel`'s options.
Fix: Ensure your `ember-cli-babel` configuration is correctly set up, specifically enabling `enableTypeScriptTransform: true`. Review any custom Babel plugins or presets to ensure they are compatible or moved to `ember-cli-babel`'s configuration.
gotcha The `tsconfig.json` blueprint `target` value was updated to `2020` in v4.0.0-rc.1. This change might affect compatibility with older browsers or build environments if not explicitly reconfigured.
Fix: Review your `tsconfig.json`'s `compilerOptions.target` to ensure it matches your project's desired JavaScript output standard and browser compatibility requirements. Adjust if `ES2020` is too modern for your target environments.

Install

npm install ember-cli-typescript npm
yarn add ember-cli-typescript yarn
pnpm add ember-cli-typescript pnpm

Quickstart

This quickstart demonstrates how to enable TypeScript transpilation in an Ember application's `ember-cli-build.js` using `ember-cli-babel` directly, reflecting the currently recommended setup after `ember-cli-typescript` entered maintenance mode. It also highlights the necessary type installations.

import EmberApp from 'ember-cli/lib/broccoli/ember-app';

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // This configuration enables TypeScript transpilation via ember-cli-babel,
    // which is the current recommended approach instead of relying on ember-cli-typescript.
    'ember-cli-babel': {
      enableTypeScriptTransform: true
    },
    // ... other build options ...
  });

  // To ensure proper type checking and IDE support, also install the necessary types:
  // npm install --save-dev typescript @tsconfig/ember @types/ember @types/qunit @types/rsvp
  // And set up your tsconfig.json to extend @tsconfig/ember/tsconfig.json

  return app.toTree();
};

view raw JSON →