Converting a typename to a type in TypeScript

Question

Converting a typename to a type in TypeScript

Is there a way to cast a string with a typename to a type without an explicit mapping in order to use it for an angular component factory?

When there is a mapping, the process is straightforward:

public readonly typeMap: Map<string, Type<{}>> = new Map<string, Type<{}>>([
  ['Type1', Type1],
  ['Type2', Type2]
]);

The challenge arises when dealing with multiple components that need manual mapping, making it convenient to avoid using the map.

Potential solutions that I came across, but unfortunately not feasible due to minification, are:

using eval() (although considered dirty and unsafe)
using window['Type1']

Most other solutions I encountered were outdated or pointed towards mapping as the best option. Are there any innovative ideas to address this issue? Is there a possibility to accomplish this task?

angular typescript

Answer 1

Answer №1

It appears that achieving this without encountering numerous limitations may be challenging. The uniqueness of class names is often questionable.

Utilizing mapping proves to be a more reliable solution, and if you wish to avoid manual mapping, consider creating a pre-built script to generate the map. Another excellent choice is utilizing the Typescript reflective API to annotate classes.

Answer 2

It appears that achieving this without encountering numerous limitations may be challenging. The uniqueness of class names is often questionable.

Utilizing mapping proves to be a more reliable solution, and if you wish to avoid manual mapping, consider creating a pre-built script to generate the map. Another excellent choice is utilizing the Typescript reflective API to annotate classes.

Answer 3

Answer №2

After receiving some guidance from @Julian, I devised a clever solution on my own. Instead of using mapping, I implemented a class decorator that takes a type-string and annotates each type I want to generate. In the decorator's implementation, I added the type to a dynamically filled map.

While this solution still requires manually mapping each component, I believe it is superior to my previous approach. This is because the mapping is now located alongside the component and is less likely to be overlooked.

// Empty mapping, filled at runtime
export const typeMap: Map<string, Type<{}>> = new Map<string, Type<{}>>();

// Classes that can be generated
@Type('Type1')
export class Type1 {}

@Type('Type2')
export class Type2 {}

// Decorator
export function Type(componentType: string) {
  return (target) => { typeMap.set(componentType, <Type<{}>>target); };
}

Answer 4

After receiving some guidance from @Julian, I devised a clever solution on my own. Instead of using mapping, I implemented a class decorator that takes a type-string and annotates each type I want to generate. In the decorator's implementation, I added the type to a dynamically filled map.

While this solution still requires manually mapping each component, I believe it is superior to my previous approach. This is because the mapping is now located alongside the component and is less likely to be overlooked.

// Empty mapping, filled at runtime
export const typeMap: Map<string, Type<{}>> = new Map<string, Type<{}>>();

// Classes that can be generated
@Type('Type1')
export class Type1 {}

@Type('Type2')
export class Type2 {}

// Decorator
export function Type(componentType: string) {
  return (target) => { typeMap.set(componentType, <Type<{}>>target); };
}

Converting a typename to a type in TypeScript

Answer №1

Answer №2

Similar questions

Using TypeScript arrow functions to define parameters

Retrieve a user by their _id, remove a user using their _id, and modify a user based on their _id using Next.js 14, utilizing Typescript

Steps for setting up an auth guard:1. Define a

How to create an editable dropdown feature in HTML with Angular 10

Designate as a customizable class property

Distinguishing between type assertion of a returned value and defining the return type of a function

Error encountered during Jasmine unit testing for the ng-redux @select directive

Using Express to serve both the Angular application and its API

Execute a grandchild function in Angular that triggers its grandparent function

Parsing error encountered while trying to handle an unexpected token at line 214, character 33. It appears that an appropriate loader is missing to process this particular file type

Working with Vue class-based components in TypeScript and setting props

The most suitable TypeScript type for a screen being utilized again in react-navigation v5

Creating number inputs in Ionic 2/3 using alerts

Creating interactive features for a TypeScript interface

Exploring the Capabilities of TypeScript 1.8 in Visual Studio 2017

Angular Universal functioning fine on local host, yet encountering issues on Nginx Server

Leave out Angular Cypress E2E test best practices when applying Axe

having difficulty disabling a form field in angular 14's reactive forms

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

When attempting to utilize class validators in NestJS, Param is refusing to cast to DTO type