This article is part 2 of a series on converting your Ember app to TypeScript to foster confidence in your engineering team, based on my talk for EmberConf 2021.
We started with some basics: "What even is a type? What is TypeScript?" Now, we'll look at what TypeScript looks like in an Ember app before circling back to the benefits of TypeScript in the context of developer confidence.
TODO: Links to the other parts of the series
Let's convert an app to TypeScript! We'll use the Super Rentals app from the Ember Guides tutorial as our example. Super Rentals is a website for browsing interesting places to stay during your post-quarantine vacation.
Super Rentals is a very modern Ember app, using the latest and greatest Ember Octane features. Admittedly, using TypeScript with pre-Octane Ember was clunky. With Octane and native classes, however, using TypeScript with Ember is pretty straightforward.
If you are not familiar with Ember Octane idioms, I recommend following the Super Rentals tutorial before following this one. Otherwise, you can start with:
$ git clone <https://github.com/ember-learn/super-rentals.git> && cd super-rentals
The first step is to run
ember install ember-cli-typescript. Installing the
ember-cli-typescript package adds everything you need to compile TypeScript.
$ ember install ember-cli-typescript 🚧 Installing packages… ember-cli-typescript, typescript, @types/ember, @types/ember-data, Etc… create tsconfig.json create app/config/environment.d.ts create types/super-rentals/index.d.ts create types/ember-data/types/registries/model.d.ts create types/global.d.ts