Transform the object type into Angular's Type<T>

Question

Transform the object type into Angular's Type<T>

After working with a list of components, an AnyComponent type, and a function to locate a specific component, I encountered an issue:

const components = [Comp1, Comp2, Comp3 ...];

type AnyComponent = typeof components[number];

findComponent(id: string): AnyComponent|undefined {
  return components.find(comp => comp.id === id);
}

The dilemma arises from the fact that the findComponent function returns a type like this:

typeof Comp1 | typeof Comp2 | typeof Comp3

Unfortunately, the subsequent function I need to utilize (angulars resolveComponentFactory) necessitates it to be a Type<AnyComponent> or

Type<typeof Comp1 | typeof Comp2 | typeof Comp3>

Trying to set the return value of findComponent to Type<AnyComponent> results in an error indicating it's not assignable.

However, altering AnyComponent to this resolves the issue:

type AnyComponent = Comp1 | Comp2 | Comp3;

This modification allows me to assign the findComponent return value to Type<AnyComponent>, and everything functions as intended.

The drawback of using a union to make everything work is that I end up declaring each component twice, contrary to my goal of defining them only once.

Is there a way to have findComponent return Type<AnyComponent> without having to duplicate component declarations?

angularjs typescript types

Answer 1

Answer №1

AnyComponent comprises a combination of class types (i.e. typeof Comp1). In Type<T>, T assumes the instance type (e.g. Comp1). Luckily, Typescript provides InstanceType<T> to extract the instance type from a class type.

One might presume that

Type<InstanceType<AnyComponent>>

could work, but given the definition of type new (...args: any[]) => T, this would lead to

Type<InstanceType<AnyComponent>> == new (...args: any[]) => Comp1 | Comp2 | Comp3

which cannot be assigned from Comp1. What we need is to distribute the instance union into a union of Type<T>, and for this, a conditional type is necessary:

// Dummy 
class Comp1 { static id:string; private s: string}
class Comp2 { static id:string; private s: string}
class Comp3 { static id:string; private s: string}
type Type<T> = new (...args: any[]) => T;

const components = [Comp1, Comp2, Comp3];

type AnyComponent = typeof components[number];
// Conditional type to transform the union of instance type into a union of Type<T>
type TypeUnion<T> = T extends any ? Type<T> : never; 

function findComponent(id: string): TypeUnion<InstanceType<AnyComponent>>|undefined {
    return components.find(comp => comp.id === id);
}

Answer 2

AnyComponent comprises a combination of class types (i.e. typeof Comp1). In Type<T>, T assumes the instance type (e.g. Comp1). Luckily, Typescript provides InstanceType<T> to extract the instance type from a class type.

One might presume that

Type<InstanceType<AnyComponent>>

could work, but given the definition of type new (...args: any[]) => T, this would lead to

Type<InstanceType<AnyComponent>> == new (...args: any[]) => Comp1 | Comp2 | Comp3

which cannot be assigned from Comp1. What we need is to distribute the instance union into a union of Type<T>, and for this, a conditional type is necessary:

// Dummy 
class Comp1 { static id:string; private s: string}
class Comp2 { static id:string; private s: string}
class Comp3 { static id:string; private s: string}
type Type<T> = new (...args: any[]) => T;

const components = [Comp1, Comp2, Comp3];

type AnyComponent = typeof components[number];
// Conditional type to transform the union of instance type into a union of Type<T>
type TypeUnion<T> = T extends any ? Type<T> : never; 

function findComponent(id: string): TypeUnion<InstanceType<AnyComponent>>|undefined {
    return components.find(comp => comp.id === id);
}

Transform the object type into Angular's Type<T>

Answer №1

Similar questions

Extracting Object Properties from Arrays in TypeScript

Caution: Unable to load bindings, resorting to pure JS instead (consider running npm run rebuild?) within AWS SAM

I am attempting to send an array as parameters in an httpservice request, but the parameters are being evaluated as an empty array

Creating an interactive dropdown feature using AngularJS or Ionic framework

Resetting md-radio-button choices within an Angular 2 application

Issue with React Redux: Store dispatch not causing component update

Update Angular ui-grid to automatically refresh checkboxes upon deletion

Manipulate the DOM elements within the ng-repeat directive

Ways to generate arrays in Typescript

Using TypeScript to extend functionality from Array

In Angular, the object may be null

ngModelChange doesn't trigger if the value is manually altered

Is it possible to run unit tests for EcmaScript 6 (2015) code on a Headless Browser such as PhantomJS? If not, are there alternative methods to accomplish this task?

Display a crimson border around any fields that are deemed invalid once the form has been submitted in Angular

Utilizing Angular.JS to sort items based on the chosen option in a select dropdown menu

How can I display images stored locally within a JSON file in a React Native application?

Angularjs Socket.io Integration

`In TypeScript Angular, encountering challenges with accessing object properties`

Angular JS modal displaying CKEditor is not functioning properly

Exploring Cross-Domain Scripting with Rest-Angular and Rails