In TypeScript, the term "Generic" is defined as a string that is generalized

There is a general function in my code that I have simplified to the example below:

type GenericDelegate<Type extends "firstType" | "secondType"> = {
  type: Type;
  deleteItems: (query: { query: { [n in Type]: string } }) => Promise<unknown>;
};

const removeDuplicates = <Type extends "firstType" | "secondType">(
  genericDelegate: GenericDelegate<Type>
) => {
  genericDelegate.deleteItems({ query: { [genericDelegate.type]: 'item' } });
};

Since type is of the type Type, it should not pose any issues when passing it to query. However, TypeScript throws an error:

Type '{ [x: string]: string; }' is not assignable to type '{ [n in Type]: string; }'.

Do you know why [genericDelegate.type] is being interpreted as x: string rather than x: Type?

typescript

Answer №1

This particular behavior has been intentionally designed this way. The reason you are encountering an error is because the `string` type is broader than `"firstKey" | "secondKey"`.

Fortunately, in this scenario, it is acceptable to utilize type assertion:

type Delegate<Key extends "firstKey" | "secondKey"> = {
    key: Key;
    deleteMany: (arg: { where: Record<Key, string> }) => Promise<unknown>;
};

const record = <
    Key extends PropertyKey,
    Value
>(key: Key, value: Value) =>
    ({ [key]: value }) as Record<Key, Value>;

const removeDuplicatesGeneric = <Key extends "firstKey" | "secondKey">(
    delegate: Delegate<Key>
) => {
    delegate.deleteMany({ where: record(delegate.key, 'key') });
};

Check out the Playground here

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

Clicking on the image in Angular does not result in the comments being displayed as expected

I find it incredibly frustrating that the code snippet below is not working as intended. This particular piece of code was directly copied and pasted from an online Angular course I am currently taking. The objective of this code is to display a card view ...

angulartypescript

Using arrays as parameters for custom functions leading to add-in loading issues

In an attempt to create custom functions for Excel that accept arrays (e.g., a range of cells) as input, and then return either a value or an array, I am facing some challenges. Here's an example from my function.ts file: /* global clearInterval, con ...

javascripttypescriptoffice-jsoffice-addinscustom-functions-excel

Tips for transitioning from div + useStyles to styled components with @emotion/styled?

I'm struggling to translate material-ui makeStyles with theme applied to a div into my custom div created with styled from emotion. Here is the code I'm trying to convert: const useStyles = makeStyles((theme: Theme) => createStyles({ ro ...

reactjstypescriptmaterial-uistyled-componentsemotion

Ways to check the functionality of the secondary tier in the api.send method

Currently, I am testing a function that involves returning a promise and subsequently calling the same function again at a second level. However, I am facing difficulties in accessing this second level of call. Below is the function code: itemToForm = () ...

angulartypescriptkarma-jasmine

Every time I attempt to use the reset() function in typescript, I encounter a type error that prevents its

I am encountering a type error message that reads: 9: Property 'reset' does not exist on type 'EventTarget'. 18 | }); 19 | 20 | e.target.reset() | ^^^^^ 21 | } Below is the relevant code snippet: const hand ...

reactjstypescript

Prettier mandates that single-line if-statements without curly braces must be written on the same line

Having recently delved into the EsLint documentation, I've adopted the curly rule set to warning for instances of multiple or nested rows of statements within conditionals. "rules": { "curly":["warn", "multi-or-nes ...

typescripteslintbracketsprettier

The length of Array(n) is incorrect when running on production in Next.js

My goal is to create an array of a specific length in TypeScript, but I am encountering an issue where the array length is incorrect when running my app in production mode (minified version). For example, when I execute console.log(Array(3)); in developme ...

reactjstypescriptnext.js

A mistake has occurred: Unhandled promise rejection TypeError: Unable to assign the property 'devices' to an undefined object in Ionic 4 with Angular

Within my MyDevicesPage class, I am attempting to manipulate the res object and then pass it to the updateDevicesToServer method of DataService for further actions. The code compiles without errors, but at runtime, an error is thrown: ERROR Error: Uncaught ...

javascriptangulartypescriptionic-frameworkinterface

What's the best way to ensure you're linting the correct file type for importing in Web

Upon installation of WebStorm, I encountered an issue when opening an existing Vue/TypeScript project. The IDE was not correctly importing and linting some file imports that were functioning properly through ESLint/webpack. In my usage of Vue 2.x with com ...

typescriptvue.jswebstormjetbrains-ide

What is the best way to implement an EventHandler class using TypeScript?

I am in the process of migrating my project from JavaScript to TypeScript and encountering an issue with transitioning a class for managing events. To prevent duplicate option descriptions for adding/removing event listeners, we utilize a wrapper like thi ...

typescriptgenerics

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

htmltypescriptexpress

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

I am facing an issue where I need to locate a value within an array of arrays, but the .find method is returning undefined. import { Component, OnInit } from '@angular/core'; import * as XLSX from 'xlsx'; import { ExcelSheetsService } f ...

javascriptarraysangulartypescriptmultidimensional-array

Tips for effectively invoking an API within a Next.js application

I've been exploring the most effective method for calling an external API within a Next.js application recently. Given my experience in developing MERN stack applications, I typically rely on axios for handling API requests and utilize it within a use ...

typescriptnext.jsaxiosmern

When using Material-UI with TypeScript, an error is thrown stating that global is not defined

After running the following commands: npm install --save react react-dom @material-ui/core npm install --save-dev webpack webpack-cli typescript ts-loader @types/react @types/react-dom I transpiled main.tsx: import * as React from "react"; import * as R ...

reactjstypescriptglobalmaterial-uireferenceerror

The inconsistency in hydration of children in <div> is due to the server-rendered element having a different number of child nodes than the client-side Virtual

Why is the hydration of children mismatched in this server-rendered element, containing fewer child nodes than the client VDOM? Nuxt Link not working when used within Slick carousel I'm experiencing duplicate content without Slick carousel and I&apo ...

javascripttypescriptvue.jsnuxt.jsslick.js

Steps to link two mat-autocomplete components based on the input change of one another

After reviewing the content on the official document at https://material.angular.io/components/autocomplete/examples I have implemented Autocomplete in my code based on the example provided. However, I need additional functionality beyond simple integrati ...

javascriptangulartypescriptangular-materialangular6

Upon completion of a promise in an express middleware and breaking out of a loop, a 404 error is returned

In my efforts to retrieve an array of object (car) from express using database functions in conjunction with the stolenCarDb object, everything seems to be working fine. However, when attempting the following code snippet, it results in a 404 error w ...

node.jstypescriptloopsexpresspromise

How can contextual binding be implemented in TypeScript?

In Laravel, you have the option to specify which class should be imported if a particular class is accessed. For example, if someone tries to use the Filesystem contract, it will return the Storage Facade (Laravel Contextual Binding). Similarly, if someo ...

javascripttypescript

TS1056 Error: Accessors can only be utilized with ECMAScript 5 or newer versions targeted

I'm currently working on a SharePoint framework project that has the following folder layout: One of the directories is named dataaccess and contains a webpart factory method. The file Sharepointdataprovider.ts includes this code snippet: import { ...

typescriptgulpvisual-studio-codetypescript-typingsecmascript-5

Encountering an issue when trying to generate a button in Angular

I am currently using JavaScript to dynamically create a button in Angular. While I have been successful in creating the button, I am encountering an error when attempting to change the classname. The error message I am receiving is: Property 'clas ...

javascriptangulartypescript