feat(typings): Enhance typing support with withAppTypes and custom services throughout OHIF (#4090)

extensions/dicom-microscopy/src/components/MicroscopyPanel/MicroscopyPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { ServicesManager, ExtensionManager, CommandsManager, DicomMetadataStore } from '@ohif/core';
+import { ExtensionManager, CommandsManager, DicomMetadataStore } from '@ohif/core';
 import { MeasurementTable } from '@ohif/ui';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { EVENTS as MicroscopyEvents } from '../../services/MicroscopyService';
@@ -53,7 +53,7 @@ interface IMicroscopyPanelProps extends WithTranslation {
   onRejectComplete?: PropTypes.func; // callback when rejected annotations
 
   //
-  servicesManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   extensionManager: ExtensionManager;
   commandsManager: CommandsManager;
 }

extensions/dicom-microscopy/src/getCommandsModule.ts

@@ -1,4 +1,4 @@
-import { ServicesManager, CommandsManager, ExtensionManager } from '@ohif/core';
+import { CommandsManager, ExtensionManager } from '@ohif/core';
 import styles from './utils/styles';
 import callInputDialog from './utils/callInputDialog';
 
@@ -7,7 +7,7 @@ export default function getCommandsModule({
   commandsManager,
   extensionManager,
 }: {
-  servicesManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   commandsManager: CommandsManager;
   extensionManager: ExtensionManager;
 }) {

extensions/dicom-microscopy/src/getPanelModule.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ServicesManager, CommandsManager, ExtensionManager } from '@ohif/core';
+import { CommandsManager, ExtensionManager } from '@ohif/core';
 import { useViewportGrid } from '@ohif/ui';
 import MicroscopyPanel from './components/MicroscopyPanel/MicroscopyPanel';
 
@@ -13,7 +13,7 @@ export default function getPanelModule({
   extensionManager,
   servicesManager,
 }: {
-  servicesManager: ServicesManager;
+  servicesManager: AppTypes.ServicesManager;
   commandsManager: CommandsManager;
   extensionManager: ExtensionManager;
 }) {

extensions/dicom-microscopy/src/services/MicroscopyService.ts

@@ -18,17 +18,17 @@ const EVENTS = {
  * ROI annotations relevant to the application
  */
 export default class MicroscopyService extends PubSubService {
-  public static REGISTRATION = serviceManager => {
+  public static REGISTRATION = servicesManager => {
     return {
       name: 'microscopyService',
       altName: 'MicroscopyService',
       create: ({ configuration = {} }) => {
-        return new MicroscopyService(serviceManager);
+        return new MicroscopyService(servicesManager);
       },
     };
   };
 
-  serviceManager: any;
+  servicesManager: any;
 
   managedViewers = new Set();
   roiUids = new Set();
@@ -36,9 +36,9 @@ export default class MicroscopyService extends PubSubService {
   selectedAnnotation = null;
   pendingFocus = false;
 
-  constructor(serviceManager) {
+  constructor(servicesManager) {
     super(EVENTS);
-    this.serviceManager = serviceManager;
+    this.servicesManager = servicesManager;
     this._onRoiAdded = this._onRoiAdded.bind(this);
     this._onRoiModified = this._onRoiModified.bind(this);
     this._onRoiRemoved = this._onRoiRemoved.bind(this);

extensions/dicom-microscopy/src/types/AppTypes.ts

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import MicroscopyServiceType from '../services/MicroscopyService';
+
+declare global {
+  namespace AppTypes {
+    export type MicroscopyService = MicroscopyServiceType;
+    export interface Services {
+      microscopyService?: MicroscopyServiceType;
+    }
+  }
+}

extensions/dicom-microscopy/src/utils/dicomWebClient.ts

@@ -9,7 +9,7 @@ import { StaticWadoClient } from '@ohif/extension-default';
  * @param param0
  * @returns
  */
-export default function getDicomWebClient({ extensionManager, servicesManager }) {
+export default function getDicomWebClient({ extensionManager, servicesManager }: withAppTypes) {
   const dataSourceConfig = window.config.dataSources.find(
     ds => ds.sourceName === extensionManager.activeDataSource
   );