Is there a way to enhance a generic parameter using another generic parameter in TypeScript?

Question

Is there a way to enhance a generic parameter using another generic parameter in TypeScript?

I am struggling with repetitive code that involves a type with minor variations:

import { ComponentPropsWithRef, ElementType } from "react";

interface PackshotPropsBase {
  a: string
}

interface PackshotPropsWeb {
  b: string
}

export type ElementAndPackshotProps<T extends ElementType, P extends PackshotPropsBase> = Omit<
    ComponentPropsWithRef<T>,
    keyof P
> &
    P;

export type ElementAndPackshotPropsWeb<T extends ElementType, P extends PackshotPropsWeb> = Omit<
    ComponentPropsWithRef<T>,
    keyof P
> &
    P;

The main distinction lies in the type that P extends. Is there a way to streamline this and create a type that extends another generic type?

Explore the TypeScript playground here.

typescript

Answer 1

Answer №1

Regrettably, TypeScript is lacking in higher kinded types, as mentioned in microsoft/TypeScript#1213. This means there is no straightforward method for creating a higher-order generic type that resolves to a generic type. Attempting something like the following will not work:

// INVALID TYPESCRIPT, DO NOT USE:

type ElementAndPackshotPropsGeneral<PB> = // error!!
  type<T extends ElementType, P extends PB> = 
    Omit<ComponentPropsWithRef<T>, keyof P> & P; 

type ElementAndPackshotProps = 
  ElementAndPackshotPropsGeneral<PackshotPropsBase>;

type ElementAndPackshotPropsWeb = 
  ElementAndPackshotPropsGeneral<PackshotPropsWeb>;

Instead, a workaround involves something like this:

type ElementAndPackshotPropsGeneral<PB, T extends ElementType, P extends PB> =
  Omit<ComponentPropsWithRef<T>, keyof P> & P;

type ElementAndPackshotProps<T extends ElementType, P extends PackshotPropsBase> =
  ElementAndPackshotPropsGeneral<PackshotPropsBase, T, P>;

type ElementAndPackshotPropsWeb<T extends ElementType, P extends PackshotPropsWeb> =
  ElementAndPackshotPropsGeneral<PackshotPropsWeb, T, P>;

While this method works, it forces you to stick with "regular" generic types, re-declare the generic type parameters along with their constraints, and pass them along. Although you don't have to repeatedly write

Omit<ComponentPropsWithRef<T>, keyof P> & P

, some duplication is still present.

Playground link to code

Answer 2

Regrettably, TypeScript is lacking in higher kinded types, as mentioned in microsoft/TypeScript#1213. This means there is no straightforward method for creating a higher-order generic type that resolves to a generic type. Attempting something like the following will not work:

// INVALID TYPESCRIPT, DO NOT USE:

type ElementAndPackshotPropsGeneral<PB> = // error!!
  type<T extends ElementType, P extends PB> = 
    Omit<ComponentPropsWithRef<T>, keyof P> & P; 

type ElementAndPackshotProps = 
  ElementAndPackshotPropsGeneral<PackshotPropsBase>;

type ElementAndPackshotPropsWeb = 
  ElementAndPackshotPropsGeneral<PackshotPropsWeb>;

Instead, a workaround involves something like this:

type ElementAndPackshotPropsGeneral<PB, T extends ElementType, P extends PB> =
  Omit<ComponentPropsWithRef<T>, keyof P> & P;

type ElementAndPackshotProps<T extends ElementType, P extends PackshotPropsBase> =
  ElementAndPackshotPropsGeneral<PackshotPropsBase, T, P>;

type ElementAndPackshotPropsWeb<T extends ElementType, P extends PackshotPropsWeb> =
  ElementAndPackshotPropsGeneral<PackshotPropsWeb, T, P>;

While this method works, it forces you to stick with "regular" generic types, re-declare the generic type parameters along with their constraints, and pass them along. Although you don't have to repeatedly write

Omit<ComponentPropsWithRef<T>, keyof P> & P

, some duplication is still present.

Playground link to code

Is there a way to enhance a generic parameter using another generic parameter in TypeScript?

Answer №1

Similar questions

Mastering the Art of Utilizing Generic Typing to Access Objects

Struggling to implement two-way binding in Mat-Datepicker

Anticipated outcome is the need to provide a value upon completion of arrow function recursion (consistent-return)

The error message "Property '...' is not found on the type 'ServerContextJSONValue'" pops up whenever I try to utilize the useContext() function

What are the steps to validate a form control in Angular 13?

Creating interactive carousel slides effortlessly with the power of Angular and the ngu-carousel module

How can you establish a TypeScript project that employs classes shared by both client and server applications?

Unable to view loggly-winston debug logs on the user interface

What is the process for including an item in an array within Firestore?

Clear all events from an HTML element and its descendants with TypeScript

Is there a way to retrieve the name of a document stored within a collection using Firebase Firestore and Firebase Storage

The Vue CLI project, using Typescript, is facing challenges with building and running Mocha tests

How can I clear the cache for GetStaticPaths in NextJs and remove a dynamic route?

Check if the input values are already in the array and if not, then add

Setting up the Angular environment

Error in Angular compiler-cli: The namespace 'ts' does not contain the exported member 'ResolutionMode'

What is the proper way to utilize setTimeout in TypeScript?

What could be causing FormArrayName to consistently display as undefined in my HTML code, even when the safe-navigation operator is employed

Response Looping Function

Distinguishing the switch function from the React switch operator (jsx, tsx)