ember-cli-typescript
  • ember-cli-typescript
  • Installation
  • Configuration
  • TypeScript and Ember
    • Using TypeScript With Ember Effectively
    • Decorators
    • Current limitations
    • Building Addons in TypeScript
    • Understanding the @types Package Names
  • Working With Ember
    • Components
    • Services
    • Routes
    • Controllers
    • Helpers
    • Testing
  • Working With Ember Data
    • Models
    • Transforms
  • Cookbook
    • Working with route models
  • Working With Ember Classic
    • EmberComponent
    • Mixins
    • Computed Properties
    • EmberObject
  • Upgrading from 1.x
  • Troubleshooting
    • Conflicting Type Dependencies
Powered by GitBook
On this page
  • Some imports don't resolve
  • Templates
  • Invoking actions

Was this helpful?

Edit on GitHub
Export as PDF
  1. TypeScript and Ember

Current limitations

PreviousDecoratorsNextBuilding Addons in TypeScript

Last updated 2 years ago

Was this helpful?

While TS already works nicely for many things in Ember, there are a number of corners where it won't help you out. Some of them are just a matter of further work on updating the ; others are a matter of further support landing in TypeScript itself, or changes to Ember's object model.

Some imports don't resolve

You'll frequently see errors for imports which TypeScript doesn't know how to resolve. These won't stop the build from working; they just mean TypeScript doesn't know where to find those.

Writing these missing type definitions is a great way to pitch in! Jump in #topic-typescript on the and we'll be happy to help you.

Templates

Templates are currently totally non-type-checked. This means that you lose any safety when moving into a template context, even if using a Glimmer Component in Ember Octane.

Addons need to import templates from the associated .hbs file to bind to the layout of any components they export. The TypeScript compiler will report that it cannot resolve the module, since it does not know how to resolve files ending in .hbs. To resolve this, you can provide this set of definitions to my-addon/types/global.d.ts, which will allow the import to succeed:

declare module '\*/template' {
  import { TemplateFactory } from 'ember-cli-htmlbars';
  const template: TemplateFactory; export default template;
}


declare module 'app/templates/\*' {
  import { TemplateFactory } from 'ember-cli-htmlbars';
  const template: TemplateFactory; export default template;
}

declare module 'addon/templates/\*' {
  import { TemplateFactory } from 'ember-cli-htmlbars';
  const template: TemplateFactory; export default template;
}

Invoking actions

TypeScript won't detect a mismatch between this action and the corresponding call in the template:

import Component from '@ember/component';
import { action } from '@ember/object';

export default class MyGame extends Component {
  @action turnWheel(degrees: number) {
    // ...
  }
}
<button {{on "click" (fn this.turnWheel "potato")}}>
Click Me
</button>

Likewise, it won't notice a problem when you use the send method:

// TypeScript compiler won't detect this type mismatch
this.send\('turnWheel', 'ALSO-NOT-A-NUMBER'\);
existing typings
Ember Community Discord server