Using ember-concurrency with TypeScript

The documentation below covers how to use ember-concurrency v2.3+ with Ember Octane. For older versions of ember-concurrency (or pre-Octane Ember), please see the old guides.

ember-concurrency tasks play nicely with TypeScript and all of the APIs covered in these docs. Here is an example of a TypeScript component with an ember-concurrency task:

import Component from '@ember/component';
import { task, timeout } from 'ember-concurrency';

export default class extends Component {
  myTask = task(async (ms: number) => {
    await timeout(ms);
    return 'done!';
  });
}

Typing Task objects

In most cases, you don't need to provide type annotations for your task, but when you do (such as when specifying the Args of a Glimmer component), you can use the Task type:

import Component from '@glimmer/component';
import { task, timeout } from 'ember-concurrency';
import type { Task } from 'ember-concurrency';

// Define a Type task that takes a single number argument and returns a string
type MyTaskType = Task<string, [number]>;

interface Args {
  fooTask: MyTaskType;
}

export default class extends Component<Args> {
  slowlyComputeStringLength: MyTaskType = task(async (ms: number) => {
    await timeout(ms);

    const length = await this.args.fooTask.perform(ms);

    return length;
  });
}

Version 2.2 and older

Support for TypeScript in ember-concurrency was recently greatly improved and simplified with the release of version 2.3, largely due to the introduction of the new async arrow task function syntax (e.g. myTask = task(async () => {})), which alleviated most / all of the prior challenges with getting ember-concurrency tasks to play nicely with TypeScript.

TODO: link to Github V 2.3 release notes / upgrade guide.

If you would like to see the TypeScript guides for older versions of ember-concurrency (or pre-Octane Ember), please see the old guides.