Merge pull request #239 from buschtoens/patch-2

docs(README/service-injections): Computed<T> vs T

Author: chriskrycho

README.md

@@ -351,9 +351,30 @@ export default class UserProfile extends Component {
 
 Note that we need the `MySession` type annotation this way, but we *don't* need the string lookup (unless we're giving the service a different name than the usual on the class, as in Ember injections in general). Without the type annotation, the type of `session` would just be `any`. This is because decorators (as of TS 2.8 – 3.0) are not allowed to modify the types of whatever they decorate. As a result, we wouldn't get any type-checking on that `session.login` call, and we wouldn't get any auto-completion either. Which would be really sad and take away a lot of the reason we're using TypeScript in the first place!
 
+You'll need to add that module and interface declaration to all your existing service and controller declarations for this to work (again, see the [blog post][pt4] for further details), but once you do that, you'll have this much nicer experience throughout! It's not quite vanilla Ember.js, but it's close—and this way, you still get all those type-checking and auto-completion benefits, but with a lot less noise! Moreover, you actually get a significant benefit over "vanilla" Ember: we type-check that you typed the key correctly in the `service` invocation.
+
 Also use the [`!` non-null assertion operator](https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#non-null-assertion-operator) to prevent [`TS2564`](https://github.com/kaorun343/vue-property-decorator/issues/81), that is caused by enabling `strictPropertyInitialization` in `tsconfig.json`.
 
-You'll need to add that module and interface declaration to all your existing service and controller declarations for this to work (again, see the [blog post][pt4] for further details), but once you do that, you'll have this much nicer experience throughout! It's not quite vanilla Ember.js, but it's close—and this way, you still get all those type-checking and auto-completion benefits, but with a lot less noise! Moreover, you actually get a significant benefit over "vanilla" Ember: we type-check that you typed the key correctly in the `service` invocation.
+If you're on an Ember version below 3.1, you'll want to wrap your service type in [`ComputedProperty`](https://www.emberjs.com/api/ember/release/classes/ComputedProperty), because [native ES5 getters](https://github.com/emberjs/rfcs/blob/master/text/0281-es5-getters.md) are not available there, which means that instead of accessing the service via `this.mySession`, you would have to access it as `this.get('mySession')` or `get(this, 'mySession')`. This means the above code would rather look like:
+
+```ts
+// my-app/components/user-profile.ts
+import Component from '@ember/component';
+import { get } from '@ember/object';
+import ComputedProperty from '@ember/object/computed';
+import { service } from '@ember-decorators/service';
+import MySession from 'my-app/services/my-session';
+
+export default class UserProfile extends Component {
+  @service mySession!: ComputedProperty<MySession>;
+
+  login(this: UserProfile, email: string, password: string) {
+    get(this, 'session').login(email, password);
+  }
+}
+```
+
+This also holds true for all other macros of the ember-decorators addon.
 
 #### Ember Data lookups