Computed Properties
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)
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!`;
}
}
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:
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;
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: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;
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!
Last modified 2yr ago