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

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { PanelSection, Input, Button } from '@ohif/ui';
-import { DicomMetadataStore, ServicesManager } from '@ohif/core';
+import { DicomMetadataStore } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
 
 const DEFAULT_MEATADATA = {
@@ -22,11 +22,10 @@ const DEFAULT_MEATADATA = {
  * @param param0
  * @returns
  */
-export default function PanelPetSUV({ servicesManager, commandsManager }) {
+export default function PanelPetSUV({ servicesManager, commandsManager }: withAppTypes) {
   const { t } = useTranslation('PanelSUV');
-  const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } = (
-    servicesManager as ServicesManager
-  ).services;
+  const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } =
+    servicesManager.services;
   const [metadata, setMetadata] = useState(DEFAULT_MEATADATA);
   const [ptDisplaySet, setPtDisplaySet] = useState(null);
 

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdExport.tsx

@@ -6,7 +6,10 @@ import { eventTarget } from '@cornerstonejs/core';
 import { Enums } from '@cornerstonejs/tools';
 import { handleROIThresholding } from '../../utils/handleROIThresholding';
 
-export default function PanelRoiThresholdSegmentation({ servicesManager, commandsManager }) {
+export default function PanelRoiThresholdSegmentation({
+  servicesManager,
+  commandsManager,
+}: withAppTypes) {
   const { segmentationService, uiNotificationService } = servicesManager.services;
   const { t } = useTranslation('PanelSUVExport');
 

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
-function segmentationItemEditHandler({ id, servicesManager }) {
+function segmentationItemEditHandler({ id, servicesManager }: withAppTypes) {
   const { segmentationService, uiDialogService } = servicesManager.services;
 
   const segmentation = segmentationService.getSegmentation(id);

extensions/tmtv/src/Panels/RectangleROIOptions.tsx

@@ -40,7 +40,7 @@ function reducer(state, action) {
   }
 }
 
-function RectangleROIOptions({ servicesManager, commandsManager }) {
+function RectangleROIOptions({ servicesManager, commandsManager }: withAppTypes) {
   const { segmentationService } = servicesManager.services;
   const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);