TypeScript: Configuration

If you use the --typescript flag when generating your Ember app, we generate a good default tsconfig.json, which will usually make everything Just Work™:

{
  "extends": "@tsconfig/ember/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "my-app/tests/*": ["tests/*"],
      "my-app/*": ["app/*"],
      "*": ["types/*"]
    }
  }
}

The default tsconfig.json extends the "@tsconfig/ember/tsconfig.json" base, which includes TypeScript compiler options to enable TypeScript development in an Ember app plus some useful default configurations for strictness to ensure type-safety and compatibility with Ember's types.

Additionally, the generated tsconfig.json includes "baseUrl" and "paths" configuration specific to your app. This configuration allows Ember's classic package layout, which is not resolvable with the Node resolution algorithm, to work with TypeScript.

In general, you may customize your TypeScript build process as usual using the tsconfig.json file. There are a few things worth noting, however, if you're looking to make further or more advanced customizations (but most users can just ignore this section!):

1. The Ember build pipeline uses Babel's TypeScript support instead of the TypeScript compiler. For this reason, the generated tsconfig.json file does not set "outDir" and sets "noEmit" to true. This configuration allows you to run editors which use the compiler without creating extraneous .js files throughout your codebase, leaving the compilation to Babel to manage.

   You can still customize "outDir" and "noEmit" if your use case requires it, however. For example, to see the output of the compilation in a separate folder you are welcome to set "outDir" to some path and set "noEmit" to false. Then tools which use the TypeScript compiler (e.g. the watcher tooling in JetBrains IDEs) will now generate files at that location.

   Note that any changes you do make to "outDir" and "noEmit" won't have any effect on how Ember builds your application. The build pipeline will continue to use its own temp folder.

2. Since your application is built by Babel, and only type-checked by TypeScript, we set the "target" key in "@tsconfig/ember/tsconfig.json" to the current version of the ECMAScript standard so that type-checking uses the latest and greatest from the JavaScript standard library. The Babel configuration in your app's config/targets.js and any included polyfills will determine the final build output.

3. If you make changes to the paths included in or excluded from the build via your tsconfig.json (using the "include", "exclude", or "files" keys), you will need to restart the server to take the changes into account: the build pipeline does not currently watch the tsconfig.json file.

To enable TypeScript sourcemaps, you'll need to add the corresponding configuration for Babel to your ember-cli-build.js file:

const app = new EmberApp(defaults, {
  'ember-cli-babel': { enableTypeScriptTransform: true },
  babel: { sourceMaps: 'inline' },
});

(Note that this will noticeably slow down your app rebuilds.)

If you are using Embroider, you might need to include devtool in your webpack configuration:

return require('@embroider/compat').compatBuild(app, Webpack, {
  packagerOptions: {
    webpackConfig: {
      devtool: 'source-map'
    }
  }
}