Using parametric types as type arguments for other types in TypeScript or Flow programming languages

Question

Using parametric types as type arguments for other types in TypeScript or Flow programming languages

Consider the various types showcased for demonstration:

type TranslateToEnglish<A extends string> = 
  A extends "1" ? "one" :
  A extends "2" ? "two" :
  A extends "3" ? "three" :
  "etc";

type ConvertNumberToString<A extends string> =
  A extends `${infer C}${infer Tail}` ? 
    `${TranslateToEnglish<C>}-${ConvertNumberToString<Tail>}` : "";

For instance, using

ConvertNumberToString<"12">

will yield "one-two-".

Now, the goal is to increase its flexibility and allow a "translator" like TranslateToEnglish to be passed as an argument:

type ConvertWithTranslator<A extends string, Translator> =
  A extends `${infer C}${infer Tail}` ? 
    `${Translator<C>}-${ConvertNumberToString<Tail>}` : "";

This approach fails with the error:

Type 'Translator' is not generic. ts(2315)

Attempting to revise it as below results in another error:

type ConvertWithTypeParam<A extends string, Translator<_>> =

The error message shows: ',' expected. ts(1005) at the <_>.

Q: Is there a method to pass a parametric (generic) type as an argument to another type within TypeScript, Flow, or other JavaScript superset? Similar to higher-order functions but for types.

typescript flowtype typescript-generics higher-kinded-types higher-order-types

Answer 1

Answer №1

My recommendation involves implementing a solution that removes the need to directly pass the generic type as a type parameter. Instead of doing that, you can create a record of translators and then simply pass the name of a specific translator to access the type:

Check out the Playground for this example

type ToEnglish<A extends string> = 
  A extends "1" ? "one" :
  A extends "2" ? "two" :
  A extends "3" ? "three" :
  "etc";

type ToSpanish<A extends string> = 
  A extends "1" ? "uno" :
  A extends "2" ? "dos" :
  A extends "3" ? "tres" :
  "etc";


type TranslatorMap<A extends string> = {
    English: ToEnglish<A>;
    Spanish: ToSpanish<A>;
}

type ConvertGeneric<A extends string, Translator extends keyof TranslatorMap<A>> =
  A extends `${infer C}${infer Tail}` ? 
    `${TranslatorMap<C>[Translator]}-${ConvertGeneric<Tail, Translator>}` : "";

type EnglishTest = ConvertGeneric<"12", "English">
type SpanishTest = ConvertGeneric<"12", "Spanish">

Answer 2

My recommendation involves implementing a solution that removes the need to directly pass the generic type as a type parameter. Instead of doing that, you can create a record of translators and then simply pass the name of a specific translator to access the type:

Check out the Playground for this example

type ToEnglish<A extends string> = 
  A extends "1" ? "one" :
  A extends "2" ? "two" :
  A extends "3" ? "three" :
  "etc";

type ToSpanish<A extends string> = 
  A extends "1" ? "uno" :
  A extends "2" ? "dos" :
  A extends "3" ? "tres" :
  "etc";


type TranslatorMap<A extends string> = {
    English: ToEnglish<A>;
    Spanish: ToSpanish<A>;
}

type ConvertGeneric<A extends string, Translator extends keyof TranslatorMap<A>> =
  A extends `${infer C}${infer Tail}` ? 
    `${TranslatorMap<C>[Translator]}-${ConvertGeneric<Tail, Translator>}` : "";

type EnglishTest = ConvertGeneric<"12", "English">
type SpanishTest = ConvertGeneric<"12", "Spanish">

Answer 3

Answer №2

This code snippet demonstrates how to use flowjs with a type constructor in JavaScript:

// @flow

type TypeConstructor = <V>() => {updated:V};

type Obj = {
  a: number,
  b: string
}

type Result = $ObjMap<Obj, TypeConstructor>

const ok:Result = {
  a: {updated:42},
  b: {updated:42}
}; // this is valid

const error:Result = {
  a: 42,
  b: 42
}; // this will throw an error

The TypeConstructor acts like a callback function, converting one type to another. Each key/value pair in the obj object is passed through the TypeConstructor. This functionality is not achievable in TypeScript due to its requirement for explicit generics.

Answer 4

This code snippet demonstrates how to use flowjs with a type constructor in JavaScript:

// @flow

type TypeConstructor = <V>() => {updated:V};

type Obj = {
  a: number,
  b: string
}

type Result = $ObjMap<Obj, TypeConstructor>

const ok:Result = {
  a: {updated:42},
  b: {updated:42}
}; // this is valid

const error:Result = {
  a: 42,
  b: 42
}; // this will throw an error

The TypeConstructor acts like a callback function, converting one type to another. Each key/value pair in the obj object is passed through the TypeConstructor. This functionality is not achievable in TypeScript due to its requirement for explicit generics.

Using parametric types as type arguments for other types in TypeScript or Flow programming languages

Answer №1

Answer №2

Similar questions

Exploring potential arrays within a JSON file using TypeScript

Is there a way to adjust the starting and ending points of a bezier curve in D3 by utilizing the link generator?

Having trouble getting useFieldArray to work with Material UI Select component

Combining 2 lists in Angular Firebase: A Simple Guide

Demonstrate JSON data using ngFor loop in Angular

Absent 'dist' folder in Aurelia VS2015 TypeScript project structure

What is the process for displaying the attributes of a custom object in Typescript?

Clicking on the React Bootstrap Checkbox within the Nav component does not trigger a rerender of the NavItem component

Creating a bespoke numeric input component using React Native

Tips for updating parameters that are defined in a controller within a promise

Retrieving the data from a Material UI Slider control

Angular 2 select does not recognize the selected option

Inquiry regarding modules in Javascript/Typescript: export/import and declarations of functions/objects

Retrieve a particular element from an array within a JSON object using Ionic

The use of Next.js v12 middleware is incompatible with both node-fetch and axios

After pressing the login button, my intention is to transition to a different page

Creating a shared singleton instance in Typescript that can be accessed by multiple modules

Generate an array of objects by combining three separate arrays of objects

Ways to retrieve a Class Level Variable within the onCellValueChanged function in agGrid

Integrating Vimeo videos into Angular applications