In Typescript, we can use a class to encapsulate another class and then return a generic result

Trying to wrap my head around the concept of generic classes, and now I need to dynamically create another class. However, I am uncertain about how to go about it.

Class A {}

Class B<T> {
Return T
}

Const c = B(A); // which is T 

More context on what I'm attempting to achieve:

I work with Angular and TypeScript 3.45. My goal is to dynamically generate a form by resolving the appropriate component. Within the directive, I should be able to obtain a generic class and utilize it without having specific knowledge of the class being created. This is all about adhering to the separation of concerns principle.

UPDATE

I've managed to grasp part of the Generic type functionality, but there are still some gray areas where I find myself struggling and unsure of how to proceed. For those who may be interested or feeling perplexed, here's some explanation that might provide clarity.

We want to take any input type and return the same type. Let's call this generic type U.

function func(a: U): U {
  return a;
}
const c = func(arg: U); // after this line, c has a value of type U

// Same as 

const c = func(10); // now c = 10;

My question pertains to receiving a generic type as a return type for any input type utilized. This may seem trivial since the compiler deduces the type from the input value and replaces U with the particular custom or primitive type.

To accomplish my desired return generic type, perhaps we can utilize conditional types. However, I am still in the process of familiarizing myself with the entire concept of type casting and concealing types through extends and implementations. link

Thank you for the response; it addresses my current query perfectly.

Answer №1

Creating Instances of Generic Types in TypeScript

source Rico Suter's blog. link

Have you ever wondered how to instantiate a generic type in TypeScript? The challenge lies in the fact that the generic type argument T is not accessible during runtime since TypeScript generics are primarily utilized for type validation at compile time and are eliminated in the transpiled JavaScript code.

public class YourFactory
{
    public T Create<T>()
        where T: new()
    {
        return new T();
    }
}

var yourFactory = new YourFactory();
var person = yourFactory.Create<PersonModal>();

Check out more details on this page

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React Material UI DataGrid: Error encountered - Unable to access property 'useRef' due to being undefined

The challenge at hand Currently, I am faced with a dilemma while attempting to utilize the React DataGrid. An error in the form of a TypeError: Cannot read property 'useRef' of undefined is appearing in my browser's stack trace. https://i.s ...

What is the reason behind Chrome's automatic scrolling to ensure the clicked element is fully contained?

Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...

Dragging elements with jQueryUI multiple times

Is there a way to configure drag and drop functionality so that one element can be dragged multiple times? I attempted to create something similar to this http://jsfiddle.net/28SMv/3/, but after dragging an item from red to blue, the element loses its abi ...

Error: The 'book' property is undefined and cannot be read in the BookDetails.render function

I am currently working on retrieving data from renderList and implementing it in render(). Upon using console.log this.renderList() https://i.stack.imgur.com/IwOzw.png The retrieved data is displayed above. While working on the render(), I attempted ...

Unable to retrieve post information from Angular using PHP

I've hit a roadblock in my Angular App where I can't seem to access the body of the post data being sent from Angular 4. Despite numerous attempts, I'm unable to retrieve this crucial information. Can anyone lend a hand in identifying the is ...

The beforeunload event only triggers when the page is refreshed, not when the page is exited

I am currently utilizing the react-admin framework (version 3.2) and I am attempting to trigger the beforeunload event when a user is moving away from the Edit form view. For instance, if my pathname is "feed/123", I want the beforeunload event t ...

Firebase data not appearing on screen despite using the async pipe for observables

My current challenge involves accessing data based on an id from Firebase, which comes back as an observable. Upon logging it to the console, I can confirm that the Observable is present. However, the issue arises when attempting to display this data on th ...

Using npm webpack-mix to execute a JavaScript function stored in a separate file

Currently, I am facing a challenge with accessing a function that is defined in the table.js file from within my index.html. Here is a snippet of the code: table.js let table; function set_table(table) { this.table = table; consol ...

The premature firing of the fireContentLoadedEvent in Internet Explorer is causing issues

I've encountered a strange issue with IE8 recently. My code has been functioning properly for a while and still works perfectly in Firefox, but all of a sudden Prototype has stopped calling my event listeners for dom:loaded. I typically attach them u ...

The most efficient method for handling a vast amount of data in NodeJS

My database consists of 4 million numbers and I need to quickly check if a specific number exists in it. Example of the database: [177,219,245,309,348,436,...] I initially tried using a MySQL table for this task, but it took a lengthy 1300ms just to chec ...

Using NodeJS and Express: redirection fails to load the specified endpoint

My current project involves a simple e-commerce web application running on localhost built with nodejs and express. Admins are required to register in order to gain access to functionalities such as adding, editing, and removing products from the product l ...

Exploring the Depths of Observables in Angular2 Guards

I have a Guardian overseeing a specific route. Within the canActivate method, I am trying to perform two HTTP requests, with the second request being dependent on the response of the first one. However, it seems like the second request is not being trigger ...

What is the best way to retrieve multiple elements by class and change their innerHTML?

Encountering an issue with calling multiple elements of the same class using .innerhtml. Here is the URL I am dealing with: When running the following code in Chrome console, this is the output: document.getElementsByClassName('a-size-small a-color- ...

Modify the transition and design of two progress bars

I'm having an issue with merging two Bootstrap progress bars into one. Initially, the first progress bar appears when the page loads and hides after data is loaded. At the same time, the second progress bar shows up. However, the transition animation ...

What is the way to instruct Mongoose to exclude a field from being saved?

Is there a way in Mongoose to instruct it to not save the age field if it's null or undefined? Or is there a method to achieve this in Express? Express router.put('/edit/:id', function(req, res) { Person.findOneAndUpdate({ _id: req.p ...

Using React.js to create a modal that includes ExpansionPanelDetails with a Checkbox feature

I am trying to achieve a specific visual effect with my code. Here is an example of the effect I want: https://i.stack.imgur.com/cJIxS.png However, the result I currently get looks like this: https://i.stack.imgur.com/547ND.png In the image provided, y ...

Ajax: setInterval function successfully runs code but does not refresh the HTML output

I have multiple div elements in my code. I want to update the HTML content inside them based on an API request. The updating process works fine, but the HTML content doesn't refresh visually (meaning that even if I receive a new result from the API, t ...

Displaying retrieved data following AJAX request in ASP.NET MVC is currently not functioning

I have a situation where I need to populate two <p> fields with text Below is the HTML code snippet: <p id="appId" style="visibility: hidden;"></p> <p id="calculationId" style="visibility: hidden;"></p> I am making an AJAX ...

How to dynamically assign a name attribute to tags in a string using React and JavaScript

Streamlining the current blog post. If I have a string let someText = "<h1>test</h1><p>desc of test</p>" I want to use React or JavaScript to transform it into someText = "<h1 id="test">test</h1><p>desc of test ...

Capture a section of the body background to incorporate into the canvas space

As a newcomer to the world of canvas, I have been learning from various sources about how it works. However, my goal is more dynamic and unique than what I've seen so far. I am looking to create a body background for my webpage that is responsive, cen ...