Exclude the extended type of generics in TypeScript

I'm encountering an issue with omit in typescript. Whenever I attempt to omit commandId from TMutationVariables, it triggers a TS error:

TS2345: Argument of type 'Pick<TMutationVariables, Exclude<keyof TMutationVariables, "commandId">> & { commandId: string; }' is not assignable to parameter of type 'TMutationVariables'.   'Pick<TMutationVariables, Exclude<keyof TMutationVariables, "commandId">> & { commandId: string; }' is assignable to the constraint of type 'TMutationVariables', but 'TMutationVariables' could be instantiated with a different subtype of constraint '{ commandId: string; }'.
export function createQueryWithSubscription<TMutationVariables extends {commandId: string}>(
    query: string,
): (variables: Omit<TMutationVariables, "commandId">) => any {
    const sendQuery = (changes: TMutationVariables): any =>
        gqlCommand<TMutationVariables>(
            query, changes as any
        );

    return function processQueryWithSubscription(
        variables
    ) {
        return async (dispatch: any) => {
            const commandId = generateUuid();
            //error occurs in declaration BELOW
            const completedVariables: TMutationVariables = {
                ...variables,
                commandId
            };
            const commandFinished = await dispatch(sendQuery(completedVariables));
        };
    };
}

I have a type generated from graphql schema (which includes commandId for subscription), but externally I require all variables produced from this schema except commandId (since I combine commandId in the process function).

Live demo: https://www.typescriptlang.org/play#code/KYDwDg9gTgLgBAMwK4DsDGMCWEVzVYAQxmAEUlgoBPAdUxgAsBlJAIwGd9MwscAeACoBZJDGLYUANUJRMhVgBtg7OKBIoAJioDeaCAFt9hTQEkNALjjsYslAHMAvgD4AFACgAkAEcK1S9ds7ABo3AEpLFwA3GTlFZUsAeX16QRExXikY+SV2ILgAIj1DYw0zfKdQuABeJzhjKjhtTz0UaytgTXJKBqq4FzQGYzt4uGFRcRxpWWzlcLqUHqdPDzsvBQBhAyNNPnrXZe9fKjyBoeU6lXrl0IBuN08CGCQoXGR0DLgwKAg0ZXYu6h0RgsDhcHgSdweDzRaZxdieSpNKGPZ64QjsKjoPoaTDsMDEAaWeqVGqNA4tNpFbalDTVODDFCUYjAACqSEwGhct3JOEpBjAShIGimsRyljG6QkIpmKl6SKhHgAdMqYaLlCEFR4qSUzAcHHcFRT4NrNAAxTAoXEMYC03qEADuhHocBxeIJDBc7A6GgBVH6-MFNulcNC3Kh+s8EYcbiAA

Any assistance would be greatly appreciated. Thank you.

Answer №1

Instead of using "extends" in the function signature type

export function createQueryWithSubscription<TMutationVariables extends {commandId: string}>(

you should combine the declarations as shown below:

type TMutationVariablesWithCommandId = TMutationVariables & {commandId: string};
export function createQueryWithSubscription<TMutationVariablesWithCommandId>(

Playground Link

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

What is the reason for the function to return 'undefined' when the variable already holds the accurate result?

I have created a function that aims to calculate the digital root of a given number. Despite my efforts, I am encountering an issue where this function consistently returns undefined, even though the variable does hold the correct result. Can you help me ...

Issue: Node.js Express unable to access static files when the route is nested more than one folder level deep.Resolution

Before we delve into the question, let me share with you the folder structure of my node.js express app: /home server.js index.html /app /routes public.js /public /css main.css In my server.js file, ...

Is there a way to ensure that the line numbers displayed for JavaScript errors in Chrome are accurate?

I suspect either my webpack configuration or my npm run dev script are causing the issue, but I'm unsure of what exactly is going wrong. While running my application in development mode, I encounter error messages like: Uncaught TypeError: this.props ...

reduce input to 2 characters using jQuery

Is there a way to trim the input text down to just the first two characters when a button is clicked? For example, if I enter "BT2J43" into the input field, can it be automatically shortened to "BT" upon clicking the button? I'm new to learning jQue ...

Customize the dimensions of the bootstrap dropdown menu

I have a dropdown feature on my bootstrap second textbox with a lot of content. The issue is that the dropdown overflows and leaks into the textbox located on the left below it. How can I resize it properly to fit within the confines of the drooping textbo ...

Ways to ensure your Javascript code only runs based on the specific browser

I need a Javascript code to run depending on the browser version. Specifically, if the browser is not IE or is IE 9+, one piece of Javascript should be executed. If the browser is IE8 or lower, another piece of Javascript should be executed. My attempt to ...

Angular (TypeScript) time format in the AM and PM style

Need help formatting time in 12-hour AM PM format for a subscription form. The Date and Time are crucial for scheduling purposes. How can I achieve the desired 12-hour AM PM time display? private weekday = ['Sunday', 'Monday', &apos ...

Optimize a feature by implementing it as a modal in Angular version 5

I am currently working on an Angular 5 project that features a side panel with a master/detail view. My goal is to allow users to maximize the detail component in a modal dialog by clicking a button within this component - similar to the behavior found in ...

Retrieve the pdf document from the server's response

Currently, I am working on a project where I am using PHP Laravel to create a docx file, converting it to PDF, and saving it in a public server folder. Afterwards, I send the file as a response to the client. On the client side, I am attempting to downloa ...

Why does Vue 3 refuse to refresh an <img> element, while it successfully refreshes all other components within the same component?

In my current Vue project, I have set up multiple link cards (<a class='card'></a>) inside a "deck" container (<div class='deck'></div>). The implementation for these elements is relatively straightforward: <s ...

Display handpicked ionic list view

I have put together a demonstration using this (demo) to showcase the issue I am facing. Within this demo, there is a page with a list, a button located in the header that checks the attribute of an <ion-checkbox>, and a checkbox next to the list v ...

What is the reason for the original list being affected when the cloning list is created using a

I am trying to convert an object inside an array into a string using the code below. However, I can't seem to understand why it's affecting the original array. I thought that 'slice' was supposed to clone the array? var cloned = $scope ...

There was an unexpected error encountered while trying to use Jade

I encountered an error in my jade template: Error: E:\Do\hello_express\node_notes\views\simple.jade:6 4| meta(charset="utf-8") 5| meta(name="viewport",content="width=device-width,initial-scale=1,maximum-scal ...

New ways to update Vue.js data without the need to bind HTML to methods

In my Vue.js application, I have a file where users can choose from different graphs by setting the activeOrderView variable through a @click event. Each graph has its own set of x-axis categories and y-axis values. The issue I am facing is that when a us ...

The placement of the button is not correct and should be adjusted to the proper position

I have created a webpage with two distinct sections, each occupying the height of the viewport. The first section contains a 'work' button in the center. Upon clicking this button, it disappears and is replaced by some links. The same functionali ...

How can I eliminate text using regular expressions?

Greetings, I am seeking assistance with content removal using regular expressions. Below is the regular expression code I have written: reg = reg.replace(/\|.*?(\|)/g, ''); Input: One-1|two-2|Three-3|Four-4|Five-5 Six-6|Seven-7|Eig ...

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

How can a JavaScript function be used to check a tag's status?

I currently have two select tags on my webpage. I want to ensure that only one option can be selected at a time from these two tags. If the user tries to select options from both tags, an error message should be displayed instructing them to choose only on ...

Update the second dropdown automatically based on the selection in the first dropdown menu

I need assistance with creating two dropdown menus that are linked, so when an option is selected in the first menu, it automatically changes the options available in the second menu. Both menus should be visible at all times. I have set up a fiddle to pr ...

How do I retrieve URL parameters in Vue.js?

Hello, I am currently working on creating my own websites and I am new to vue.js. I am having trouble getting parameters from the URL. I have tried multiple methods but none seem to work. Here is an example URL: example.com:8080/login. On this page, there ...