- 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:
+ 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:
-
Typing Task objects
+
Glint Template Registry
- 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:
+ Ember Concurrency provides a template registry for using the
+ perform,
+ cancel-all, and
+ task
+ helpers within handlebars templates in Glint "loose mode". See the example
+ below for how to include Ember Concurrency's template registry in your Glint
+ configuration.
-
+
-
Version 2.2 and older
+
Ember Template Imports (.gts/.gts) Files
- 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.
+ Here is an example of a modern .gts file in "strict mode" which imports the
+ classic
+ perform
+ helper from Ember Concurrency.
-
- ember-concurrency-ts
-
- and the taskFor() function it provides is no longer necessary
- for interacting with tasks declared using the new syntax. See v2.3.0 and v2.3.2 release notes.
-
-
+
+ Note: while you can import and use the
+ perform
+ helper, it is actually recommended to use the
+ .perform()
+ method on each task, which is internally bound to the task (similar to methods
+ decorated with
+ @action). One of the benefits of using the
+ .perform()
+ method is that it can be used with modern idiomatic patterns like using the
+ fn
+ helper to curry additional args when performing the task.
+
- If you would like to see the TypeScript guides for older versions of ember-concurrency
- (or pre-Octane Ember), please
- see the old guides.
+ Pardon the lack of syntax! PR's welcome to improve our syntax
+ highlighting!
+
+
+
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:
+
+
\ No newline at end of file
diff --git a/packages/test-app/snippets/ts/template-import-example.txt b/packages/test-app/snippets/ts/template-import-example.txt
new file mode 100644
index 000000000..d298339c8
--- /dev/null
+++ b/packages/test-app/snippets/ts/template-import-example.txt
@@ -0,0 +1,33 @@
+import GlimmerComponent from "@glimmer/component";
+import { task } from "ember-concurrency";
+import perform from "ember-concurrency/helpers/perform";
+import { on } from "@ember/modifier";
+import { fn } from "@ember/helper";
+
+export default class Demo extends GlimmerComponent {
+ taskNoArgs = task(async () => {
+ console.log("Look ma, no args!");
+ });
+
+ taskWithArgs = task(async (value: string) => {
+ console.log(value);
+ });
+
+
+
+
+
+
+
+
+
+
+}
diff --git a/packages/test-app/snippets/ts/template-registry-example.ts b/packages/test-app/snippets/ts/template-registry-example.ts
new file mode 100644
index 000000000..8ebb07801
--- /dev/null
+++ b/packages/test-app/snippets/ts/template-registry-example.ts
@@ -0,0 +1,10 @@
+// e.g. types/glint.d.ts
+import '@glint/environment-ember-loose';
+import type EmberConcurrencyRegistry from 'ember-concurrency/template-registry';
+
+declare module '@glint/environment-ember-loose/registry' {
+ export default interface Registry
+ extends EmberConcurrencyRegistry /* other addon registries */ {
+ // local entries
+ }
+}