De-generify the interface

Is it possible to eliminate generics from an interface?
Sample code:

This is what I currently have:

interface ServerMessages {
  [ActionType.EVENT_1]: ResponseEventBody1;
  [ActionType.EVENT_2]: ResponseEventBody2;
  [ActionType.EVENT_3]: ResultModifier<ResponseEventBody3>;
  [ActionType.EVENT_4]: ResponseEventBody4;
  [ActionType.EVENT_5]: ResultModifier<ResponseEventBody5>;
  [ActionType.EVENT_6]: ResultModifier<ResponseEventBody6>;
  [ActionType.EVENT_7]: ResponseEventBody7;
}

interface ResultModifier<T> {
  success: boolean;
  payload: T;
  error?: SomeError;
}

This is the desired outcome:

interface ServerMessagesWithoutGenerics {
  [ActionType.EVENT_1]: ResponseEventBody1;
  [ActionType.EVENT_2]: ResponseEventBody2;
  [ActionType.EVENT_3]: ResponseEventBody3;
  [ActionType.EVENT_4]: ResponseEventBody4;
  [ActionType.EVENT_5]: ResponseEventBody5;
  [ActionType.EVENT_6]: ResponseEventBody6;
  [ActionType.EVENT_7]: ResponseEventBody7;
}

I've already spent 3 hours searching for a solution without any luck. Any help would be greatly appreciated.

typescripttypescript-generics

Answer №1

Here is a possible solution utilizing a conditional type that includes an inferred parameter:

type Unmodify<T> = T extends ResultModifier<infer U> ? U : T
type UnmodifyInterface<T> = {[K in keyof T]: Unmodify<T[K]>}

type UpdatedServerMessages = UnmodifyInterface<ServerMessages>

Please be aware that if any of the ResponseEventBody types are able to be assigned to ResultModifier<U> for a specific U, this approach may produce inaccurate outcomes.

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 to implement postprocessing in React with React three fiber using EffectComposer and Passes like OutlinePass from the three.js addons

Struggling with the R3F -postprocessing library, I decided to turn to raw threejs classes: After delving into tutorials on extending third party libraries for R3F, I was able to configure the renderPass and outlinePass using TypeScript. Check out this hel ...

typescriptthree.jsreact-three-fiberreact-three-dreir3f

Build a module that includes both components and services

Currently, I am working on an Ionic 3 application and found the need for an accordion component similar to NgBootstrap's. Unfortunately, the Ionic framework does not offer such a component. This led me to take on the challenge of creating one myself, ...

angulartypescriptionic3angular-componentsangular5

Exploring the functionalities of TypeScript's mapKey and pick features

I am looking to convert the JavaScript code shown below into TypeScript, but I don't want to use loadish.js. let claimNames = _.filter<string>(_.keys(decodedToken), o => o.startsWith(ns) ); let claims = <any>( _.mapKeys(_ ...

typescriptlodashmapkeyjoincolumn

`Angular Image Upload: A Comprehensive Guide`

I'm currently facing a challenge while attempting to upload an image using Angular to a Google storage bucket. Interestingly, everything works perfectly with Postman, but I've hit a roadblock with Angular Typescript. Does anyone have any suggesti ...

javascriptangulartypescripttwitter-bootstrapgoogle-cloud-storage

Embarking on a new undertaking with Visual Studio 2015 and diving into the world of Angular

My journey to getting Angular2 working in Visual Studio 2015 Pro involved a lot of trial and error, but I eventually found a setup that worked for me. Despite the abundance of instructions out there, I struggled to find clear answers tailored specifically ...

node.jsvisual-studiotypescriptangular

Constructing an Angular 2 application using a solo TypeScript file that is compiled individually

At the moment, I am in the process of developing a Chrome Extension using Angular 2. The application includes a background.js file which handles the functionality for a long-running task that operates while the extension is active. Currently, this backgrou ...

angulartypescriptwebpack

I attempted to include a movie in the selected-movie class, but I'm baffled by the issues in my code

I'm working on a service called cart-movie.service.ts which has a method called addMovies for adding movies to the selected-movie class. However, I'm having trouble figuring out how to implement this. app.component.html <div class="col-2" *n ...

angulartypescriptshopping-cart

The partial template is not functioning as anticipated

Introducing an interface designed to accept two templates, with the resulting function being a partial of one of them (similar to React-Redux): export type IState<TState, TOwnProps> = { connect: (mapStateToProps: MapStateToProps<TState, Parti ...

javascripttypescript

Encountered an error with create-react-app and MaterialUI: Invalid hook call issue

I am encountering an issue while trying to set up Create-react-app with Material UI. The error message I receive pertains to Hooks. Could there be something else that I am missing? This is the specific error message being displayed: Error: Invalid hook ...

reactjstypescriptmaterial-ui

Issue: Unrecognized element type in next.js while starting development server

Every time I run npm run dev, I encounter the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from th ...

javascriptreactjstypescriptnext.js

An error occurred when trying to access object references within a function

Here is a snippet of my code: const fn1 = (param1: string, param2: string, param3: string): Promise<void> => {return new Promise()} const fn2 = (param1: string, param2: string): void => {return} const options = { option1: fn1, option2: ...

typescriptts-node

Showing pdf documents without relying on third-party software

Within my Angular application, I have integrated the following snippet into an HTML template: <embed src="../assets/AOK_T2DM.pdf" style="width: 100%;height: 500px" type="application/pdf"> The representation of this code ...

htmlcssangulartypescriptpdf

Unable to loop through array generated by service - potential async complication?

In my service, I am populating an array of items by calling a function like this: items: IItem[] = []; ... LoadItems() { this.GetItems().subscribe((res) => { // console.log(res); if (res.status == 200 && res.body. ...

angulartypescriptasynchronousservicesubscribe

Angular 7 - ALERT: Circular dependency identified:

Suddenly, a lightbulb went off in my head. I encountered two warnings while running ng serve: WARNING in Circular dependency detected: src\app\_services\ignore-interceptor.service.ts -> src\app\_services\index.ts -> sr ...

angulartypescript

Is it possible for me to create a data type representing "potentially undefined strings"?

Just a heads up: I have enabled --strictNullChecks Here is a function I have: export function ensure<T, F extends T>(maybe: T | undefined, fallback: F): T { if (isDefined<T>(maybe)) { return maybe } if (fallback === undefined) { ...

typescript

When defining properties/data in Vue mixins, the properties/data of the mixin are not accessible

A vue mixin is being used to store information (referred as `world` in the example below) that needs to be accessed in multiple vue components without having to import it every time. Check out the code snippet: <template> <ol> <li> ...

typescriptvue.jsmixinsvue-mixinvue-property-decorator

What is the best way to recycle a single modal in Ionic?

Apologies for the vague title, but I'm facing an issue with creating a single modal to display data from multiple clickable elements, rather than having separate modals for each element. For example, when I click on item 1, its data should be shown in ...

angulartypescriptionic-frameworkmodal-dialogionic6

Encountering an unexpected token error while trying to compile a Typescript file to Javascript, even though it had previously worked

In my Typescript project, I usually run it using "ts-node". $ ts-node .\src\index.ts it works =) However, I wanted to compile it to Javascript, so I tried the following: $ tsc $ node .\src\index.js Unfortunately, I encountered the f ...

typescript

The Angular filter fails to remove elements from the list

I have implemented a filter function to remove objects from an array, but I am facing an issue. Challenge: Despite using the filter function, the elements are not being removed from the array as expected. Why are these objects still present in the array a ...

angulartypescriptfilterecmascript-6

I want to create a feature where a video will automatically play when a user clicks on a specific item in a list using Angular

Currently, I'm working on a project that involves displaying a list of videos and allowing users to play them in their browser upon clicking. The technology stack being used is Angular 2. Below is the HTML code snippet for achieving this functionalit ...

javascriptangularvideotypescript