There are two variants of Ember’s computed properties you may encounter:
the decorator form used with native (ES6) classes
the callback form used with classic classes (based on EmberObject)
Note that it is impossible for @computed to know whether the keys you pass to it are allowed or not. Migrating to Octane eliminates this issue, since you mark reactive root state with @tracked and leave getters undecorated, rather than vice versa.
Computed properties in the classic object model take a callback instead:
This definition will not type-check, however. You will need to explicitly write out a this type for computed property callbacks for get and set to type-check correctly:
Note that this does not always work: you may get warnings from TypeScript about the item being defined in terms of itself.
Accordingly, we strongly recommend migrating classic classes to ES native classes before adding TypeScript!
import Component from '@ember/component';
import { computed } from '@ember/object/computed';
export default class UserProfile extends Compoennt {
name = 'Chris';
age = 33;
@computed('name', 'age')
get bio() {
return `${this.name} is `${this.age}` years old!`;
}
}import Component from '@ember/component';
import { computed } from '@ember/object/computed';
const UserProfile = Component.extend({
name: 'Chris',
age: 32,
bio: computed('name', 'age', function() {
return `${this.get('name')} is `${this.get('age')}` years old!`;
}),
})
export default UserProfile;import Component from '@ember/component';
import { computed } from '@ember/object/computed';
const UserProfile = Component.extend({
name: 'Chris',
age: 32,
bio: computed('name', 'age', function(this: UserProfile) {
// ^---------------^
// `this` tells TS to use `UserProfile` for `get` and `set` lookups;
// otherwise `this.get` below would not know the types of `'name'` or
// `'age'` or even be able to suggest them for autocompletion.
return `${this.get('name')} is `${this.get('age')}` years old!`;
}),
})
export default UserProfile;