Service Registry with TypeScript type safety

Is there a way to implement a type-safe service registry in Typescript? I want a function that can return a specific type based on the argument provided.

For example:
get("a") should return an object of type ServiceA.
get("b") should return an object of type ServiceB.

I tried following the solution provided here: but I keep encountering typing errors.

I have simplified my issue and included the type errors I am facing:

console.log("Test get");
console.log("Get foo from AlertsService:", get('AlertsService').foo);
console.log("Get foo from AlertsService:", get('ModalService').foo);
console.log("Get foo from AlertsService:", get('ModalService').bar);
 
function get<T extends keyof ServiceMapping>(serviceType: T): ServiceMapping[T] {
  const t: keyof ServiceMapping = serviceType;
 
  switch (t) {
    case 'AlertsService':
 
// TS2322: Type '{ type: "AlertsService"; foo: string; }' is not assignable to type 'ServiceMapping[T]'.
// Type '{ type: "AlertsService"; foo: string; }' is not assignable to type 'never'.
// The intersection 'AlertsService & ModalService' was reduced to 'never' because property 'type' has conflicting types in some constituents.
 
      return {
        type: 'AlertsService',
        foo: 'testing'
      };
    case 'ModalService':
     
// TS2322: Type '{ type: "ModalService"; foo: string; bar: string; }' is not assignable to type 'ServiceMapping[T]'.
// Type '{ type: "ModalService"; foo: string; bar: string; }' is not assignable to type 'never'.
// The intersection 'AlertsService & ModalService' was reduced to 'never' because property 'type' has conflicting types in some constituents.
     
      return {
        type: 'ModalService',
        foo: 'testing',
        bar: 'bar test'
      };
 
    default:
      throw new Error("nope");
  }
}
 
export type ServiceMapping = {
  AlertsService: AlertsService;
  ModalService: ModalService;
}
 
export type AlertsService = {
  type: 'AlertsService',
  foo: string
}
 
export type ModalService = {
  type: 'ModalService',
  foo: string,
  bar: string
}

I need the return type to be specific and not a union of different types.

Answer №1

@kruschid can you explain the downsides of using function overloading?


  type NotificationsService = {
    type: 'NotificationsService',
    foo: string,
  }

  type PopupService = {
    type: 'PopupService',
    foo: string,
    bar: string
  }

  function retrieve<T extends 'NotificationsService'>(arg: 'NotificationsService'): NotificationsService
  function retrieve<T extends 'PopupService'>(arg: T): PopupService
  function retrieve<T extends 'NotificationsService' | 'PopupService'>(arg: T) {

    switch (arg) {
      case 'NotificationsService':
        return {
          type: 'NotificationsService',
          foo: 'test'
        };
      case 'PopupService':
        return {
          type: 'PopupService',
          foo: 'test',
          bar: 'bar test'
        };

      default:
        throw new Error("invalid argument");
    }
  }


  const output = retrieve('NotificationsService') // NotificationsService
  const output2 = retrieve('PopupService') // PopupService

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

The Angular Router is continuing to show the HomeComponent upon navigation, rather than just displaying the ChildComponent

Lately, I've been diving into Angular and attempting to create a github search application using the github api. However, I've encountered some roadblocks with routing and data passing. My goal is for the user to land on a page like /user/userID ...

Creating an Array in TypeScript

Is it possible to declare a global array in Typescript so that it can be accessed using "this" from any part of the code? In javascript, I would typically declare it as "var anArray=[]". What is the equivalent way of doing this in Typescript? Using anArra ...

Angular v15 Footer Component Table

In my Angular 15 project, I am attempting to correctly position and utilize the mat table with the following code snippet: <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>. While the displayedColumns property is functionin ...

In Typescript 12, the process of creating a Bootstrap popup that waits for the user to click on a value entered in

Greetings! I am currently working with Angular TypeScript 12 and I am attempting to trigger a Bootstrap modal popup when I enter a code in the input field and press enter. However, the issue is that the popup is always displayed even without typing anythin ...

Angular2+ test case indicating lack of NgControl provider

I've been facing an issue while testing an angular component with multiple dependencies. The test case fails with the error: "No Provider for NgControl". Here's the detailed error message: Chrome 66.0.3359 (Mac OS X 10.13.4) configurator compone ...

One way to incorporate type annotations into your onChange and onClick functions in TypeScript when working with React is by specifying the expected

Recently, I created a component type Properties = { label: string, autoFocus: boolean, onClick: (e: React.ClickEvent<HTMLInputElement>) => void, onChange: (e: React.ChangeEvent<HTMLInputElement>) => void } const InputField = ({ h ...

Step-by-step guide on adding a command to a submenu through the vscode extension api

I'm developing a Visual Studio Code extension and I want to include a command in a submenu like this https://i.stack.imgur.com/VOikx.png In this scenario, the "Peek" submenu contains commands such as "Peek Call Hierarchy". My current Package.json fi ...

Implementing the Infinite Scroll feature with 'react-infinite-scroll-component' on local JSON data: A step-by-step guide

Currently experimenting with frontEnd development, I have incorporated the 'react-infinite-scroll-component' as a dependency. My goal is to apply this effect to my local Json data without relying on any API calls at this stage. I'm encounter ...

Error Message: ElectronJS - Attempted to access the 'join' property of an undefined variable

I am currently working on developing a tray-based application. However, I am encountering an error that reads: Uncaught TypeError: Cannot read property 'join' of undefined Can anyone guide me on how to resolve this issue? This is the content ...

Guide to resolving a Promise that returns an array in TypeScript

My goal is to retrieve an array in the form of a promise. Initially, I unzipped a file and then parsed it using csv-parse. All the resulting objects are stored in an array which is later returned. Initially, when I tried returning without using a promise, ...

The type '{ domain: string; parent: string; }' cannot be assigned to type 'string'. Error code: ts(2322)

Hello there! I am new to TS, so thank you for taking the time to read this. The problematic line in my code is: <this.RenderPostLink domain={r.domain} parent={r.parent} /> where I encounter an error. RenderImages = (): React.ReactElement => ...

Angular 14 now offers ngx-pinch-zoom for an enhanced zooming experience

Is it possible to add ngx-pinch-zoom to an Angular 14 project? I encountered a peer dependency conflict when trying to install pinch-zoom with --legacy-peer-deps, which worked in the project but failed in the ci/cd pipeline due to the conflict. I attempt ...

Persistent error caused by unresponsive Tailwind utility functions

Currently, I am working on a Next.js application and encountered a strange error while adjusting the styling. The error message points to a module that seems to be missing... User Import trace for requested module: ./src/app/globals.css GET /portraits 500 ...

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

This is my first time integrating TypeScript into my project. When attempting to access something using window.document.getElementById(), I keep encountering the error: Type error: Object is possibly 'null'. TS2531 I've looked online for ...

Retrieve the svg file either from the DOM or the Object element

Is there a way for me to save or download a .svg file from the DOM? I have integrated my svg file into an Object element and am dynamically updating certain elements within the SVG and customizing it in my Angular 7 application. <object id="svg1" data= ...

Error encountered in Angular 2 with RXJS Observable: Unable to call function catch() on this.http.get(...).map(...) due to TypeError

Everything was running smoothly with my Service until today, when I encountered the following error: TypeError: this.http.get(...).map(...).catch is not a function. Upon debugging the code, it crashes at the catch method. import { Test } from "./home.c ...

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

Efficiently organizing items within a list on Ionic

Currently, I have an ion-list structured as follows: <ion-list *ngFor = "let chat of Chats"> <ion-item (click) = "openChat(chat.id)"> <ion-label> <h2> {{chat.username}} </h2> ...

After the click event, the variable in the Angular .ts file does not get refreshed

Great! I have a service in my .ts component that loops through an array of court names. Every time I click on a next or back arrow event, a counter is incremented starting at 0, where index 0 corresponds to field 1 and so on. The issue I'm facing is ...