Services

Ember Services are global singleton classes that can be made available to different parts of an Ember application via dependency injection. Due to their global, shared nature, writing services in TypeScript gives you a build-time-enforcable API for some of the most central parts of your application.
If you are not familiar with Services in Ember, first make sure you have read and understood the Ember Guide on Services!
A basic service
Let's take this example from the Ember Guide:
1
import { A } from '@ember/array';
2
import Service from '@ember/service';
3
​
4
export default class ShoppingCartService extends Service {
5
  items = A([]);
6
​
7
  add(item) {
8
    this.items.pushObject(item);
9
  }
10
​
11
  remove(item) {
12
    this.items.removeObject(item);
13
  }
14
​
15
  empty() {
16
    this.items.clear();
17
  }
18
}
Copied!
Just making this a TypeScript file gives us some type safety without having to add any additional type information. We'll see this when we use the service elsewhere in the application.
When working in Octane, you're better off using a TrackedArray from tracked-built-ins instead of the classic EmberArray:
1
import { TrackedArray } from 'tracked-built-ins';
2
import Service from '@ember/service';
3
​
4
export default class ShoppingCartService extends Service {
5
  items = new TrackedArray();
6
​
7
  add(item) {
8
    this.items.push(item);
9
  }
10
​
11
  remove(item) {
12
    this.items.splice(1, this.items.findIndex((i) => i === item));
13
  }
14
​
15
  empty() {
16
    this.items.clear();
17
  }
18
}
Copied!
Notice that here we are using only built-in array operations, not Ember's custom array methods.
Using services
You can use a service in any container-resolved object such as a component or another service. Services are injected into these objects by decorating a property with the inject decorator. Because decorators can't affect the type of the property they decorate, we must manually type the property. Also, we must use declare modifier to tell the TypeScript compiler to trust that this property will be set up by something outside this component—namely, the decorator.
Here's an example of using the ShoppingCartService we defined above in a component:
1
import Component from '@glimmer/component';
2
import { inject as service } from '@ember/service';
3
import { action } from '@ember/object';
4
​
5
import ShoppingCartService from 'my-app/services/shopping-cart';
6
​
7
export default class CartContentsComponent extends Component {
8
  @service declare shoppingCart: ShoppingCartService;
9
​
10
  @action
11
  remove(item) {
12
    this.shoppingCart.remove(item);
13
  }
14
}
Copied!
Any attempt to access a property or method not defined on the service will fail type-checking:
1
import Component from '@glimmer/component';
2
import { inject as service } from '@ember/service';
3
import { action } from '@ember/object';
4
​
5
import ShoppingCartService from 'my-app/services/shopping-cart';
6
​
7
export default class CartContentsComponent extends Component {
8
  @service declare shoppingCart: ShoppingCartService;
9
​
10
  @action
11
  remove(item) {
12
    // Error: Property 'saveForLater' does not exist on type 'ShoppingCartService'.
13
    this.shoppingCart.saveForLater(item);
14
  }
15
}
Copied!
Services can also be loaded from the dependency injection container manually:
1
import Component from '@glimmer/component';
2
import { getOwner } from '@ember/application';
3
import { action } from '@ember/object';
4
​
5
import ShoppingCartService from 'my-app/services/shopping-cart';
6
​
7
export default class CartContentsComponent extends Component {
8
  get cart() {
9
    return getOwner(this).lookup('service:shopping-cart') as ShoppingCartService;
10
  }
11
​
12
  @action
13
  remove(item) {
14
    this.cart.remove(item);
15
  }
16
}
Copied!
Here we need to cast the lookup result to ShoppingCartService in order to get any type-safety because the lookup return type is any (see caution below).
This type-cast provides no guarantees that what is returned by the lookup is actually the service you are expecting. Because TypeScript cannot resolve the lookup micro-syntax (service:<name>) to the service class, a typo would result in returning something other than the specified type. It only gurantees that if the expected service is returned that you are using it correctly.
There is a merged (but not yet implemented) RFC which improves this design and makes it straightforward to type-check. Additionally, TypeScript 4.1's introduction of template types may allow us to supply types that work with the microsyntax.
For now, however, remember that the cast is unsafe!
Components
Routes
Last modified 1yr ago
Export as PDF
Copy link
Edit on GitHub
Contents
A basic service
Using services