Dynamic typing depending on the individual elements within an array

Question

Dynamic typing depending on the individual elements within an array

I am working with some extensions:

type ExtensionOptions = { name: string }

type BoldOptions = ExtensionOptions & { boldShortcut?: string }
type ItalicOptions = ExtensionOptions & { italicShortcut?: string }
type LinkOptions = ExtensionOptions & { autoLink?: boolean }

declare class Extension {
    constructor(options: ExtensionOptions)
}

declare class BoldExtension extends Extension {
  isSelectionBold: boolean
  constructor(options: BoldOptions)
}

declare class ItalicExtension extends Extension {
  isSelectionItalic: boolean
  constructor(options: ItalicOptions)
}

declare class LinkExtension extends Extension {
  isSelectionLink: boolean
  constructor(options: LinkOptions)
}

My goal is to define an Array type that allows passing Tuple containing an extension and its options with intellisense support. For example:

// Generic type. It currently lacks intellisense
type Extensions = Array<[Extension, ExtensionOptions]>

const extensions = [
  [BoldExtension, { name: 'bold' }],
  [ItalicExtension, { name: 'italic' }],
  [LinkExtension, { name: 'link', autoLink: true }] // Intellisense needed for LinkExtension here
]

I attempted some experiments:

type Extensions<T> = Array<[
  T,
  T extends new (...args: infer Options) => any
    ? Options[0] // first argument should be the `options`
    : never
]>

Here's the TypeScript playground link for reference.

typescript

Answer 1

Answer №1

Unfortunately, TypeScript does not provide a straightforward ExtensionPair type that fits your requirements. Instead, you need a tuple type with two elements: the first element should be a one-argument construct signature that generates an instance of some Extension, and the second element should be the type of its argument. This relationship between the elements necessitates the use of generics for expression. If TypeScript supported existentially quantified generics (as mentioned in microsoft/TypeScript#14466), you could define "some" more explicitly in the code to make ExtensionPair a distinct type. However, since this feature is lacking, you have to resort to using regular generics, which are universally quantified and encompass "all" instead of just "some":

type ExtensionPair<T extends new (arg: any) => Extension> = 
  [T, ConstructorParameters<T>[0]];

If you possess an array or tuple of these pairs, you must also have a corresponding set of type arguments. You can represent this as a mapped array/tuple type, where keys iterate over number-like indices only:

type ExtensionPairs<T extends (new (arg: any) => Extension)[]> = 
  { [I in keyof T]: ExtensionPair<T[I]> }

While defining such a type might seem cumbersome due to redundant information, it's crucial for accuracy. To streamline the process, consider leveraging a generic helper function that allows TypeScript to infer type arguments during calls:

function asExtensionPairs<T extends (new (arg: any) => Extension)[]>(
  arr: [...ExtensionPairs<T>]) {
  return arr;
}

This approach simplifies the declaration of extensions by inferring type automatically based on provided inputs, enhancing the development experience with autosuggest/IntelliSense features and error detection:

const extensions = asExtensionPairs([
  [BoldExtension, { name: 'italic' }],
  [ItalicExtension, { name: "" }],
  [LinkExtension, { name: "a", autoLink: true }]
]);
/* const extensions: [
    ExtensionPair<typeof BoldExtension>, 
    ExtensionPair<typeof ItalicExtension>, 
    ExtensionPair<typeof LinkExtension>
  ] */

To explore the sample code further or test different scenarios, visit the Playground link.

Answer 2

Unfortunately, TypeScript does not provide a straightforward ExtensionPair type that fits your requirements. Instead, you need a tuple type with two elements: the first element should be a one-argument construct signature that generates an instance of some Extension, and the second element should be the type of its argument. This relationship between the elements necessitates the use of generics for expression. If TypeScript supported existentially quantified generics (as mentioned in microsoft/TypeScript#14466), you could define "some" more explicitly in the code to make ExtensionPair a distinct type. However, since this feature is lacking, you have to resort to using regular generics, which are universally quantified and encompass "all" instead of just "some":

type ExtensionPair<T extends new (arg: any) => Extension> = 
  [T, ConstructorParameters<T>[0]];

If you possess an array or tuple of these pairs, you must also have a corresponding set of type arguments. You can represent this as a mapped array/tuple type, where keys iterate over number-like indices only:

type ExtensionPairs<T extends (new (arg: any) => Extension)[]> = 
  { [I in keyof T]: ExtensionPair<T[I]> }

While defining such a type might seem cumbersome due to redundant information, it's crucial for accuracy. To streamline the process, consider leveraging a generic helper function that allows TypeScript to infer type arguments during calls:

function asExtensionPairs<T extends (new (arg: any) => Extension)[]>(
  arr: [...ExtensionPairs<T>]) {
  return arr;
}

This approach simplifies the declaration of extensions by inferring type automatically based on provided inputs, enhancing the development experience with autosuggest/IntelliSense features and error detection:

const extensions = asExtensionPairs([
  [BoldExtension, { name: 'italic' }],
  [ItalicExtension, { name: "" }],
  [LinkExtension, { name: "a", autoLink: true }]
]);
/* const extensions: [
    ExtensionPair<typeof BoldExtension>, 
    ExtensionPair<typeof ItalicExtension>, 
    ExtensionPair<typeof LinkExtension>
  ] */

To explore the sample code further or test different scenarios, visit the Playground link.

Dynamic typing depending on the individual elements within an array

Answer №1

Similar questions

Error with TypeScript Compiler in Angular 2

Is it possible to incorporate regular React JSX with Material UI, or is it necessary to utilize TypeScript in this scenario?

Having trouble resolving Typescript module references

Encountering an issue with top-level await in Angular 17 when utilizing pdfjs-dist module

What causes functions operating on mapped objects with computed keys to not correctly infer types?

Is there a way to access the [class.editable] value during an Angular unit test?

Exploring API information in Ionic 4

Next.js experiencing hydration error due to dynamic component

The type 'Readonly<Ref<Readonly<any>>>' does not have the property 'forEach' available

Error: The module '@angular/core' cannot be located

Angular: ngx-responsive has a tendency to hide elements even if they meet the specified conditions

Customizable parameters in a React component

I'm struggling to include a link in my project card component - I've tried using both the Link tag and anchor tag, but so far, I haven't been successful in

In Typescript, we can streamline this code by assigning a default value of `true` to `this.active` if `data.active

How to separate an array of objects into individual arrays using Typescript reduce based on a specific property

Steps for integrating a valid SSL certificate into a Reactjs application

Is there a way to resolve the issue of the argument being of type Boolean or undefined in React and TypeScript?

Creating a second optional generic parameter in TypeScript

TypeScript observable variable not defined

The issue of a type error within the declaration section of a TypeScript file is causing complications in Angular or