Controllers

Like routes, controllers are just normal classes with a few special Ember lifecycle hooks and properties available.
The main thing you need to be aware of is special handling around query params. In order to provide type safety for query param configuration, Ember's types specify that when defining a query param's type attribute, you must supply one of the allowed types: 'boolean', 'number', 'array', or 'string' (the default). However, if you supply these types as you would in JS, like this:
1
import Controller from "@ember/controller";
2
​
3
export default class HeyoController extends Controller {
4
  queryParams = [
5
    {
6
      category: { type: "array" },
7
    },
8
  ];
9
}
Copied!
Then you will see a type error like this:
1
Property 'queryParams' in type 'HeyoController' is not assignable to the same property in base type 'Controller'.
2
  Type '{ category: { type: string; }; }[]' is not assignable to type '(string | Record<string, string | QueryParamConfig | undefined>)[]'.
3
    Type '{ category: { type: string; }; }' is not assignable to type 'string | Record<string, string | QueryParamConfig | undefined>'.
4
      Type '{ category: { type: string; }; }' is not assignable to type 'Record<string, string | QueryParamConfig | undefined>'.
5
        Property 'category' is incompatible with index signature.
6
          Type '{ type: string; }' is not assignable to type 'string | QueryParamConfig | undefined'.
7
            Type '{ type: string; }' is not assignable to type 'QueryParamConfig'.
8
              Types of property 'type' are incompatible.
9
                Type 'string' is not assignable to type '"string" | "number" | "boolean" | "array" | undefined'.ts(2416)
Copied!
This is because TS currently infers the type of type: "array" as type: string. You can work around this by supplying as const after the declaration:
1
import Controller from "@ember/controller";
2
​
3
export default class HeyoController extends Controller {
4
  queryParams = [
5
    {
6
-     category: { type: "array" },
7
+     category: { type: "array" as const },
8
    },
9
  ];
10
}
Copied!
Now it will type-check.

Routes

Helpers

Last modified 7mo ago

Export as PDF

Copy link