ember-cli-typescript
Search…
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
imports don't resolveYou'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
#e-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!
Last modified 7mo ago
Export as PDF
Copy link