TypeScript: Getting Started

To start a new Ember project with TypeScript, add the --typescript flag when you run ember new:

ember new my-typescript-app --typescript

Using the --typescript flag changes the output of ember new in a few ways:

Project files will be generated with .ts extensions instead of .js.

In addition to the usual packages added with ember new, the following packages will be added at their current "latest" value:

• typescript
• @tsconfig/ember
• @typescript-eslint/*
• @types/ember
• @types/ember-data
• @types/ember__* – @types/ember__object for @ember/object, etc.
• @types/ember-data__* – @types/ember-data__model for @ember-data/model, etc.
• @types/qunit
• @types/rsvp

The typescript package provides tooling to support TypeScript type checking and compilation. The @types packages from DefinitelyTyped provide TypeScript type definitions for all of the Ember and EmberData modules.

Zoey says...

Ember also publishes its own native types compiled directly from its source code, as described in this blog post. For now, we continue to use the @types packages by default for the sake of compatibility with EmberData, because EmberData is not yet compatible with Ember's native official types. However, if you do not use EmberData, we highly recommend following the instructions in that blog post to switch to the native types, which are guaranteed to always be 100% correct and 100% up to date!

In addition to the usual files added with ember new, we also add:

• tsconfig.json – configuration to set up TypeScript for your project
• types/global.d.ts – the location for any global type declarations you need to write
• app/config/environment.d.ts – a basic set of types defined for the contents of your config/environment.js file

Additionally:

• package.json will have a lint:types script to check types with the command line.
• ember-cli-build.js will be configured to transform TypeScript at build-time.
• .ember-cli has isTypeScriptProject set to true, which will force the blueprint generators to generate TypeScript rather than JavaScript by default.
• .eslintrc.js will be configured for TypeScript.

To convert an existing app to TypeScript, you'll need to make the changes described above manually (for now). To facilitate this, we've included a guide here.