You write Ember.js apps. You think TypeScript would be helpful in building a more robust app as it increases in size or has more people working on it. But you have questions about how to make it work.

This is the series for you! I’ll talk through everything: from the very basics of how to set up your Ember.js app to use TypeScript to how you can get the most out of TypeScript today—and I’ll be pretty clear about the current tradeoffs and limitations, too.

(See the rest of the series. →)

In this first post in the series, we’re going to keep things simple and easy: we’re going to get an Ember.js app configured to use TypeScript. Later posts will cover some of the other details.

Because of the lovely Ember CLI ecosystem, this is a pretty straightforward process. I’m going to start from zero so that even if you’ve never written an Ember app before, you can get this up and running by following these instructions. These instructions have also been tested and confirmed to work across platforms—you can do this equally on Windows, macOS, or Linux.

Make sure you have Ember’s prerequisites installed. Get Node for your platform. Optionally (but highly recommended) install Yarn to manage your Node packages. Install the Ember command lines tools globally: yarn global add ember-cli or npm install --global ember-cli Create an Ember app. ember new my-ts-app --yarn (Using the --yarn flag will make it so your app uses yarn and creates a yarn.lock file instead of using npm when it installs its dependencies.) Now move to the root of the newly created app: this is where we’ll do everything else in the post. cd my-ts-app Add the ember-cli-typescript add-on. ember install ember-cli-typescript Generate your first UI component. ember generate component some-input Rename the files it generated from .js to .ts : app/components/some-input.js → app/components/some-input.ts

→ tests/integration/components/some-input-test.js → tests/integration/components/some-input-test.ts (Eventually, we’ll make it so that you get TypeScript for all newly generated components when using ember-cli-typescript.) Add some content to the files: {{!-- some-input.hbs --}} {{input value=theValue change=(mut theValue)}} {{theValue}} // some-input.ts import Ember from 'ember'; export default Ember.Component.extend({ theValue: '', }); Update your application.hbs file to remove the default {{welcome}} template and replace it with {{some-input}} Spin up the Ember application with Ember CLI’s development server: ember serve You’ll likely note some warnings: the TypeScript compiler won’t be able to find some of the modules imported in your files. I’ll have more to say about this in a future post. For now, suffice it to say: don’t worry, Ember CLI is still resolving and compiling your modules just fine. Load the application by going to localhost:4200 in your browser. You should see a blank white screen with an input in it. Type in it, and see the input rendered to the page. Simple enough, but it’s using a TypeScript file compiled along the way!

And that’s it: we’re done setting up an Ember.js app to use TypeScript! In the next post, I’ll talk a bit about strategies for migrating an existing app to TypeScript—not just the mechanics of it, but also where and how to start actually integrating types into your code.