TypeScript example with Ember Octane

user-profile.ts

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { task } from 'ember-concurrency';
import User from 'my-app/models/user';
import Technology from 'my-app/models/technology';
import TimeZone from 'my-app/models/time-zone';
import { inject as service } from '@ember/service';
import DS from 'ember-data';
import ApplicationInstance from '@ember/application/instance';

// Copied from https://gitlab.com/NullVoxPopuli/emberclear/blob/master/packages/frontend/types/ember-concurrency/index.d.ts
import Task from 'ember-concurrency/task';

interface Args {
  model: User;
}

export default class UserProfileComponent extends Component<Args> {
  technologies: Technology[];
  timeZones: DS.RecordArray<TimeZone>;

  @service('store') store!: DS.Store;

  constructor(owner: ApplicationInstance, args: Args) {
    super(owner, args);
    this.technologies = this.store.peekAll('technology').sortBy('name');
    this.timeZones = this.store.peekAll('time-zone');
  }

  get technologiesForUser() {
    const { model } = this.args;
    return model.technologies.mapBy('name').join(', ');
  }

  @task(function*(model: User, event: Event) {
    event.preventDefault();
    yield model.save();
  })
  updateUserTask!: Task;

  @action
  updateSelectedTechnlogies(
    model: User,
    technology: Technology,
    event: Event
  ) {
    const { checked } = event.target as HTMLInputElement;

    if (checked) {
      model.technologies.pushObject(technology);
    } else {
      model.technologies.removeObject(technology);
    }
  }

  @action
  selectTimeZone(model: User, timeZone: TimeZone) {
    model.timeZone = timeZone;
  }
}

user.js

import DS from 'ember-data';
import Technology from 'my-app/models/technology';
import TimeZone from 'my-app/models/time-zone';

const { Model, belongsTo, hasMany } = DS;

export default class UserModel extends Model {
  @hasMany('technology', { async: false }) technologies!: Technology[];
  @belongsTo('timeZone', { async: false }) timeZone!: TimeZone;
}