Emberjs and Typescript SetUp

Question

I'm having the hardest time getting typescript and ember to work together. I got all the definition files in definitely typed and I went through the ToDo walk throughs on Ember guide on the site. I'm trying to convert the js to typescript and see what the best way to go about setting up the project was, but I guess I'm not understanding the typescript definition very well.

If I do:

/// <reference path="typings/ember.d.ts" />

var App = Ember.Application.create();

App is a type of '{}' and I can't access 'Routers' to do the next line of the guide

App.Router.map( ... )

The best thing I found online was this which doesn't work with the current typing.

I've seen the typescript ember-app-kit but it doesn't really help since it barely includes any typescript and their setup is barely like the ember guides. I just need to be pointed in the right direction. Thanks guys.

Answer 1

I'm not familiar with Ember, but from inspecting ember.d.ts, I can see that create() is defined as a static generic function on object:

static create<T extends {}>(arguments?: {}): T;

So then you should be able to get better type information by passing an actual type:

var App = Ember.Application.create<Ember.Application>();

However, I see also that the ember typedef doesn't include a "Router" member in the application class, and even if it did, the Router class does not define map(). I was able to get it to work by creating an extended type definition:

// ./EmberExt.d.ts
/// <reference path="typedef/ember/ember.d.ts" />

declare class RouterExt extends Ember.Router {
    map: ItemIndexEnumerableCallbackTarget;
}

declare class ApplicationExt extends Ember.Application {
    Router: RouterExt;
}

And then referencing that from my combined router/application file:

/// <reference path="typedef/ember/ember.d.ts" />
/// <reference path="./EmberExt.d.ts" />

var App = Ember.Application.create<ApplicationExt>();
App.Router.map(function () {
    this.resource('todos', { path: '/' });
});

After doing this, it compiles and loads without error, though it doesn't actually do anything (which I believe is ok for this phase of the walkthrough)