refactor: resolve Typescript discrepancies

Author: mdeanjones

addon/components/ui-alert-block/component.ts

@@ -62,8 +62,6 @@ export default class UiAlertBlock extends Component {
   // eslint-disable-next-line ember/classic-decorator-hooks
   init() {
     super.init();
-
-    // @ts-expect-error this helper is weirdly typed, it describes the event and as a key of the source object?
     addListener(this.manager, MessageEvents.MESSAGE_ADDED, this, this.onMessageAdded);
   }
 
@@ -72,7 +70,6 @@ export default class UiAlertBlock extends Component {
    */
   // eslint-disable-next-line ember/no-component-lifecycle-hooks
   willDestroyElement() {
-    // @ts-expect-error this helper is weirdly typed, it describes the event and as a key of the source object?
     removeListener(this.manager, MessageEvents.MESSAGE_ADDED, this, this.onMessageAdded);
     super.willDestroyElement();
   }

addon/components/ui-bread-crumbs/component.ts

@@ -5,7 +5,7 @@ import Component from '@ember/component';
 import { layout, tagName } from '@ember-decorators/component';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
-import { getOwner } from '@ember/application';
+import { getOwner } from '@nsf-open/ember-ui-foundation/utils';
 import template from './template';
 
 type FullBreadCrumb = Required<Exclude<BreadCrumb, string>>;
@@ -210,7 +210,7 @@ export default class UiBreadCrumbs extends Component {
   }
 
   lookupController(name: string): IBreadCrumbController | null {
-    const controller = getOwner(this).lookup(`controller:${name}`);
+    const controller = getOwner(this)?.lookup<IBreadCrumbController>(`controller:${name}`);
 
     if (controller) {
       return controller;

addon/utils/get-owner.ts

@@ -0,0 +1,13 @@
+import { getOwner } from '@ember/application';
+
+interface IOwner {
+  resolveRegistration: <T>(name: string) => T;
+  lookup: <T>(name: string) => T;
+}
+
+/**
+ * A typed version of @ember/application `getOwner` for internal use.
+ */
+export default function getTypedOwner(target: unknown): IOwner | null {
+  return getOwner(target) as IOwner | null;
+}

addon/utils/get-root-element.ts

@@ -1,5 +1,5 @@
+import getOwner from './get-owner';
 import { runInDebug, warn } from '@ember/debug';
-import { getOwner } from '@ember/application';
 
 const RootID = 'ui-positioning-root';
 
@@ -11,7 +11,9 @@ export default function getRootElement(context: unknown) {
   let root: HTMLElement | null = document.getElementById(RootID) || document.body;
 
   runInDebug(() => {
-    const config = getOwner(context)?.resolveRegistration('config:environment');
+    const config = getOwner(context)?.resolveRegistration<{ environment: string } | undefined>(
+      'config:environment'
+    );
     const isTest = config?.environment === 'test';
 
     if (isTest) {

addon/utils/index.ts

@@ -5,6 +5,7 @@ export { default as extractErrorMessages } from './extract-error-messages';
 export { default as keyNavigator } from './key-navigator';
 export { default as maybeSplitString } from './maybe-split-string';
 export { default as sortArrayWithRules } from './sort-array-with-rules';
+export { default as getOwner } from './get-owner';
 export { buildFaClassNameString } from './font-awesome';
 export { waitForTransitionEnd } from './transition-end';
 export { addAriaAttribute, removeAriaAttribute, getAriaAttributeValues } from './aria';

addon/utils/optional-service.ts

@@ -1,7 +1,7 @@
 import type ComputedProperty from '@ember/object/computed';
 import type Service from '@ember/service';
+import getOwner from './get-owner';
 import { computed } from '@ember/object';
-import { getOwner } from '@ember/application';
 
 /**
  * A computed macro that can be used to lazily inject a service and
@@ -10,7 +10,7 @@ import { getOwner } from '@ember/application';
 export default function optionalService(name?: string): ComputedProperty<Service | undefined> {
   return computed({
     get(this: unknown, propertyName: string) {
-      return getOwner(this).lookup(`service:${name || propertyName}`);
+      return getOwner(this)?.lookup<Service | undefined>(`service:${name || propertyName}`);
     },
   });
 }

tests/acceptance/ui-bread-crumbs-test.ts

@@ -1,10 +1,17 @@
+import type { IBreadCrumbController } from '@nsf-open/ember-ui-foundation/constants';
+import type { TestContext } from '@ember/test-helpers';
+
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { visit } from '@ember/test-helpers';
 
 module('Acceptance | Component | ui-bread-crumbs', function (hooks) {
   setupApplicationTest(hooks);
 
+  function lookupController(owner: TestContext['owner'], fullName: string): IBreadCrumbController {
+    return owner.lookup(fullName) as IBreadCrumbController;
+  }
+
   function nthCrumb(idx: number, anchor = false) {
     return `.breadcrumb li:nth-child(${idx})${anchor ? ' a' : ''}`;
   }
@@ -39,13 +46,13 @@ module('Acceptance | Component | ui-bread-crumbs', function (hooks) {
   });
 
   test('it does not render an empty ordered list', async function (assert) {
-    this.owner.lookup('controller:application').breadCrumb = undefined;
+    lookupController(this.owner, 'controller:application').breadCrumb = undefined;
     await visit('/');
     assert.dom('.breadcrumb').doesNotExist();
   });
 
   test('it filters out breadcrumbs with no label text', async function (assert) {
-    this.owner.lookup('controller:playground').breadCrumb = { label: '' };
+    lookupController(this.owner, 'controller:playground').breadCrumb = { label: '' };
 
     await visit('/playground');
 
@@ -54,14 +61,20 @@ module('Acceptance | Component | ui-bread-crumbs', function (hooks) {
   });
 
   test('it supports a breadcrumb being able to "rewind", to remove, prior crumbs', async function (assert) {
-    this.owner.lookup('controller:playground').breadCrumb = { label: 'Foobar', rewind: 1 };
+    lookupController(this.owner, 'controller:playground').breadCrumb = {
+      label: 'Foobar',
+      rewind: 1,
+    };
 
     await visit('/playground');
 
     assert.dom(nthCrumb(1)).hasText('Foobar');
     assert.dom(nthCrumb(2)).doesNotExist();
 
-    this.owner.lookup('controller:artists.artist').breadCrumb = { label: 'Baz', rewind: -1 };
+    lookupController(this.owner, 'controller:artists.artist').breadCrumb = {
+      label: 'Baz',
+      rewind: -1,
+    };
 
     await visit('/artists/queen');
 
@@ -70,8 +83,8 @@ module('Acceptance | Component | ui-bread-crumbs', function (hooks) {
   });
 
   test('it support a breadcrumb with fully custom href and target', async function (assert) {
-    this.owner.lookup('controller:playground').breadCrumb = undefined;
-    this.owner.lookup('controller:playground').breadCrumbs = [
+    lookupController(this.owner, 'controller:playground').breadCrumb = undefined;
+    lookupController(this.owner, 'controller:playground').breadCrumbs = [
       { label: 'Search', href: 'https://www.google.com' },
       { label: 'Playground' },
     ];
@@ -83,7 +96,7 @@ module('Acceptance | Component | ui-bread-crumbs', function (hooks) {
     assert.dom(nthCrumb(2, true)).hasAttribute('target', '_self');
     assert.dom(nthCrumb(4)).doesNotExist();
 
-    this.owner.lookup('controller:artists').breadCrumb = {
+    lookupController(this.owner, 'controller:artists').breadCrumb = {
       label: 'Search More',
       href: 'https://www.bing.com',
       target: '_blank',

tests/dummy/app/config/environment.d.ts

@@ -8,7 +8,7 @@ declare const config: {
   environment: string;
   modulePrefix: string;
   podModulePrefix: string;
-  locationType: string;
+  locationType: 'auto' | 'history' | 'hash' | 'none';
   rootURL: string;
   APP: Record<string, unknown>;
 };

tests/helpers/lookup-component.ts

@@ -9,5 +9,6 @@ export default function lookupComponent<C extends Component = Component>(
   context: TestContext,
   id: string
 ): C {
-  return context.owner.lookup('-view-registry:main')[id];
+  const registry = context.owner.lookup('-view-registry:main') as Record<string, C>;
+  return registry[id];
 }

tests/integration/components/ui-modal-test.ts

@@ -106,7 +106,7 @@ module('Integration | Component | ui-modal', function (hooks) {
   });
 
   test('it can be opened and closed via the modal service', async function (assert) {
-    const modal: ModalService = this.owner.lookup('service:modal');
+    const modal = this.owner.lookup('service:modal') as ModalService;
 
     // language=handlebars
     await render(hbs`
@@ -132,7 +132,7 @@ module('Integration | Component | ui-modal', function (hooks) {
   });
 
   test('it can be dynamically passed data and a title via the modal service', async function (assert) {
-    const modal: ModalService = this.owner.lookup('service:modal');
+    const modal = this.owner.lookup('service:modal') as ModalService;
 
     // language=handlebars
     await render(hbs`
@@ -149,7 +149,7 @@ module('Integration | Component | ui-modal', function (hooks) {
   });
 
   test('it will close one modal when another is requested to be opened', async function (assert) {
-    const modal: ModalService = this.owner.lookup('service:modal');
+    const modal = this.owner.lookup('service:modal') as ModalService;
 
     // language=handlebars
     await render(hbs`
@@ -196,7 +196,7 @@ module('Integration | Component | ui-modal', function (hooks) {
   });
 
   test('it allows an open modal to cancel the opening of a new modal', async function (assert) {
-    const modal: ModalService = this.owner.lookup('service:modal');
+    const modal = this.owner.lookup('service:modal') as ModalService;
 
     this.set('canHideModal', function () {
       assert.step('blocking');