ember-cli-typescript
Search…
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
Working With Ember Data
Cookbook
Working With Ember Classic
Upgrading from 1.x
Troubleshooting
Powered By GitBook
Current limitations
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 existing typings; 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 Ember Community Discord server 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:
1
declare module '\*/template' {
2
import { TemplateFactory } from 'htmlbars-inline-precompile';
3
const template: TemplateFactory; export default template;
4
}
5
​
6
​
7
declare module 'app/templates/\*' {
8
import { TemplateFactory } from 'htmlbars-inline-precompile';
9
const template: TemplateFactory; export default template;
10
}
11
​
12
declare module 'addon/templates/\*' {
13
import { TemplateFactory } from 'htmlbars-inline-precompile';
14
const template: TemplateFactory; export default template;
15
}
Copied!

Invoking actions

TypeScript won't detect a mismatch between this action and the corresponding call in the template:
1
import Component from '@ember/component';
2
import { action } from '@ember/object';
3
​
4
export default class MyGame extends Component {
5
@action turnWheel(degrees: number) {
6
// ...
7
}
8
}
Copied!
1
<button {{on "click" (fn this.turnWheel "potato")}}>
2
Click Me
3
</button>
Copied!
Likewise, it won't notice a problem when you use the send method:
1
// TypeScript compiler won't detect this type mismatch
2
this.send\('turnWheel', 'ALSO-NOT-A-NUMBER'\);
Copied!
Previous
Decorators
Next
Building Addons in TypeScript
Last modified 1mo ago
Export as PDF
Copy link
Edit on GitHub
Contents
Some imports don't resolve
Templates
Invoking actions