What is the significance of TypeScript's dual generic typing feature?

defineListenerShape<
  EventName extends string,
  EventData extends {
    [key in EventName]: unknown;
  }
> = <E extends EventName>(data: EventData[E]) => void;

enum EventName {
    Click = 'click',
    Hover = 'hover',
}

type EventDataMap = {
    [EventName.Click]: number,
    [EventName.Hover]: string,
}

type Listener = defineListenerShape<EventName, EventDataMap>;
type ClickListener = Listener<EventName.Click>;

The Listener function above is generic, however TypeScript throws a Type 'Listener' is not generic error. You can test and explore this scenario on the TypeScript playground.

typescripttypescript-generics

Answer №1

"The function within the Listener type is generic" - while this statement holds some truth, it's important to note that Listener itself is not a generic type. Therefore, attempting to call Listener<EventType.A> will result in an error.

If you encounter this issue, you can implement a workaround like so:

const func: Listener = null!
type AListener = typeof func<EventType.A>;
// type AListener = (data: number) => void

Playground

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

Using Angular 10 to make an HTTP POST request, with the goal of appending a string

Whenever I try to send a post request to an api endpoint, I keep encountering an error with status code 500. name: "HttpErrorResponse" ok: false status: 500 statusText: "Internal Server Error" Below is the code I am using: var selected ...

javascriptangulartypescripthttppost

The Observer<T> generic type necessitates the specification of 1 type argument

I'm currently trying to grasp the concept of Observables in Angular 4. While watching a tutorial video on it, I attempted to create my first Observable but encountered an error in my IDE: The generic type Observer requires 1 types argument(s) Here ...

angulartypescriptobservable

Evaluating observables in .pipe angular 8 jasmine

In my component, I have a subscription to triggerRuleExecutionService which is triggered by another component using next(). Within the pipe, I am using switchMap to make an HTTP service call and retrieve data from the database. this.ruleExecutionService ...

angulartypescriptjasminekarma-runner

Automate your builds with Github actions for both tags and branches!

In my typescript project repository, our release policy states that we publish packages from the master branch to the next npm tag. Additionally, we have a dedicated branch called release for publishing to the latest npm tag. My goal is to optimize the sol ...

typescripttagsgithub-actionsnpm-publish

Experiencing unfamiliar typescript glitches while attempting to compile a turborepo initiative

I have been utilizing the turborepo-template for my project. Initially, everything was running smoothly until TypeScript suddenly started displaying peculiar errors. ../../packages/fork-me/src/client/star-me/star-me.tsx:19:4 nextjs-example:build: Type erro ...

node.jsreactjstypescriptnext.jsturborepo

Exploring the differences between Angular's @Input and @Output directives and utilizing Injectable Services

When considering the differences between @Input/@Output in parent and child components versus using services that are instantiated only once with dependency injection (@Injectable()), I find myself questioning whether there are any distinctions beyond the ...

angulartypescriptdesign-patternsdependency-injection

What is the best way to reset the testing subject between test cases using Jest and TypeScript?

I'm currently utilizing typescript alongside jest for unit testing. My goal is to create a simple unit test, but it consistently fails no matter what I try. Below is the snippet of code in question: // initialize.ts let initialized = false; let secre ...

typescriptunit-testingjestjs

Building a Dynamic Checkbox Validation Feature in Angular Using Data retrieved from an API

Currently, I have a function that retrieves and displays a list obtained from an API: displayEventTicketDetails() { this.Service .getEventTicketDetails().subscribe((data: any) => { this.eventTicketDetails = data.map(ticket => ticket. ...

javascripthtmlangulartypescript

Toggle the presence of a string in an array with a checkbox

Currently, I am working on a user creation form for my Next.js front end project using TypeScript. The main goal is to allow an administrator to create new users by filling out a simple form which will generate a basic user object. Here is the structure of ...

reactjstypescriptnext.jschakra-ui

The ngOnInit child function fails to activate when trying to assign a fresh object

On the parent page, I am passing user data to a child component in this way: <ng-container *ngIf="leaderboard"> <app-leaderboard-preview [user]="user" (click)="goToLeaderboard()"></app-leaderboard-preview> </ng-container> In t ...

angulartypescriptngonchanges

Preparing a component for evaluation

When I execute the app and load views using @useview('resources/panels/data-table-panel.html'), everything works fine. However, running a component test results in failure due to a 404 error caused by the html file not being found. After changin ...

typescriptkarma-jasmineaureliajspm

Typescript custom react hook - toggling with useToggle

I developed a custom hook to toggle boolean values: import { useState } from 'react'; export function useToggle(initialValue: boolean) { const [value, setValue] = useState<boolean>(initialValue); const toggleValue = () => setValue ...

reactjstypescriptreact-hooks

Missing Directory Issue Upon Deploying Node.js App on Google App Engine

I have a Node.js web application built using TypeScript and Koa.js that I am looking to deploy on Google App Engine. The code has already been transpiled into JavaScript and is stored locally in the ./dist/src/ directory. Essentially, I only need to depl ...

node.jstypescriptgoogle-app-enginenpm

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

Implementing Generic Redux Actions in Typescript with Iterable Types

Resolved: I made a mistake by trying to deconstruct an object in Object.assign instead of just passing the object. Thanks to the assistance from @Eldar and @Akxe, I was able to see my error in the comments. Issue: I'm facing a problem with creating a ...

reactjstypescriptredux

The retrieval of cookies from the Response object is not possible with Typescript

While working on my google chrome extension, I implemented a post call that looks like this: public someapiCall(username: string, password: string) { var url = 'http://test.someTestServer.com/api/user/someApiCall'; let headers = new Hea ...

angulartypescriptcookiesgoogle-chrome-extension

Guide on transforming a Unix timestamp into either "2000-01-01" or "2000-05-24 20:00:00" format, or the opposite way, using Deno

Just starting out with Deno and looking to convert a Unix timestamp such as 1646245390158 into either the format of 2000-01-01 or 2000-05-24 20:00:00, or vice versa. Any tips on how to achieve this? ...

typescripttimestamptype-conversiontransformationdeno

Ionic has been experiencing issues with inaccurate boolean results being generated by Angular typescript

I have created a random number generator that requires the user to input a maximum and minimum value to generate a random number within that range. The application will show an error under two conditions: If either of the numbers entered is negative If t ...

angulartypescriptionic-framework

extract objects from an array of objects based on a specified array

Within my JSON array, I have data structured like this: const data = [ { "uniqueId": 1233, "serviceTags": [ { "Id": 11602, "tagId": "FRRRR", "missingRequired&quo ...

javascriptarraysjsonangulartypescript

To work on React with typescript, your Type must include a method '[Symbol.iterator]()' that will fetch an iterator

Here is a demonstration I have prepared for you: https://stackblitz.com/edit/react-ts-shopping-cart-ssofgc?file=Shop.tsx Apologies for the lack of clarity in my question, but... The demo I created showcases a basic shopping cart using React and Typescri ...

reactjstypescript