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.

1. Make sure you have Ember’s prerequisites installed. Get Node for your platform. Optionally (but highly recommended) install Yarn to manage your Node packages.¹

2. Install the Ember command lines tools globally:

   yarn global add ember-cli

   or

   npm install --global ember-cli

3. 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.)

4. 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

5. Add the ember-cli-typescript add-on.

   ember install ember-cli-typescript

6. Generate your first UI component.

   ember generate component some-input

7. 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.)

8. 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: '',
   });

9. Update your application.hbs file to remove the default {{welcome}} template and replace it with {{some-input}}

10. 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.²

11. 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.

• Next: Part 2 – Adding TypeScript to an existing Ember.js project.

---

1. I strongly prefer to use yarn over npm because yarn installs are predictable and repeatable, and if there’s one thing I don’t need to spend time on when developing our Ember.js app at Olo, it’s chasing problems with transitive dependencies that are different in the build server than in my local development environment. Yarn’s lockfiles mean what ends up built on the server is exactly what ended up built on my machine.↩

2. But if you’re curious, here’s a preview: we really need more type definitions for the Ember ecosystem. I’ll be covering how we build those in much more detail in a future installment.↩