Using Typescript, create an instance of a generic class and store the specific type value in a variable

How can you instantiate a generic class in TypeScript? (1) When the value of the type parameter is known during compilation, (2) when the type to use as the parameter is passed as a string?

Click here for an example

interface ITheValue {
  TheValue: string;
}

class Foo implements ITheValue {
  TheValue: string;

  constructor(val: string) {
    this.TheValue = val
  }
}

class Bar implements ITheValue {
  TheValue: string;
  constructor(val: string) {
    this.TheValue = val
  }
}

class Buz<T implements ITheValue> {
  Thing: T
  
  constructor(val: string) {
    this.T = new T(val);
  }
    
  getTheValue(): string {
    return this.Thing.TheValue;
  }
}

function run(whichOne: string, theValue: string): string {
  var f: Foo = new Foo('foo value'); // This works.

  // Can this be made to work? (Possible in languages like C#)
  var buz = new Buz<whichOne>(theValue);

  // Even this doesn't work.
  var buz = new Buz<Foo>(theValue);

  return `The value is: ${buz.getTheValue}.`;
}

document.querySelector("#app").innerHTML = run('Foo', 'the value');

Answer №1

To start with, ensure you have a reliable editor such as https://www.typescriptlang.org/play to correct your Buz implementation.

class Buz<T extends ITheValue> {
  //        ^ not implements
  Thing: T
  
  constructor(val: string) {
    this.Thing = new T(val);
    //               ^! 'T' only refers to a type, but is being used as a value here.(2693)
  }
    
  getTheValue(): string {
    return this.Thing.TheValue;
  }
}


// The issue lies in not passing the <em>T constructor</em>, causing confusion about its source
var buz1 = new Buz<Foo>(theValue);

The key problem is not providing the T constructor, leaving it uncertain where to locate it.

class But<T extends ITheValue> {
  Thing: T
  constructor(TMaker: new (val: string) => T, val: string) {
    this.Thing = new TMaker(val);
  }
}

new But(Foo, 'test')

This solution should resolve any issues encountered.

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

Troubleshooting import errors with Typescript for C3 and D3 libraries

I have recently started working on a project using the C3 graphing library within an Ionic2/Angular2 TypeScript setup. After installing C3 via npm and the type definitions via tsd, I imported it into my own TypeScript file like this: import {Component} fr ...

Encountering an error with TypeScript in combination with Angular 2 and Grunt. The error message is TS

Currently in my angular2 Project, I am utilizing grunt for automating the compilation of my typescript files. Everything seems to be working fine as my files are compiling, but I keep encountering errors: app/webapp/ng2/audit_logs/auditLogs.ts(2,3): erro ...

Mocking Firestore v9 getDocs() in Jest: A Comprehensive Guide

After upgrading our webapp from Firebase v8 to v9, we encountered various issues due to the new syntax. As I am still relatively new to Jest and Firebase/Firestore, not everything is completely clear to me yet ... I am attempting to mock getDocs from fire ...

What's the best way to define the data types for a component that utilizes the set function?

This code snippet seems to be functional, but there are some issues with the types that need to be resolved before it can be compiled successfully. Here is the code in question: function SpotlightElement(props: JSX.IntrinsicElements['spotLight'] ...

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

After creating a mat-table, I encountered an issue when trying to show and hide my input filter area using a button. If I use *ngIf="showInputFilter" to hide the filter area, I receive the error message Cannot read property 'value' of u ...

Getting stuck in an endless loop while making a call to Axios for data fetch with React Suspense

I am currently working on fetching data using Axios and displaying it within a suspense element. I came across a tutorial that demonstrates this process: https://dev.to/darkmavis1980/a-practical-example-of-suspense-in-react-18-3lln However, I am encounter ...

Using Rxjs to dynamically map values from an array with forkJoin

Greetings! I have a collection of Boolean observables and would like to apply a logical AND operation. Currently, I am passing static values 'a' and 'b', but I am unsure of the number of elements in the totalKeys array. import { forkJoi ...

Compilation error in VueJS: missing dependency detected

I am facing an issue in my VueJS project where a file I am referencing seems to be causing a compilation error. Despite being present in the node_modules directory, the dependency is declared as not found. In the image on the left, you can see the directo ...

The constant issue persists as the test continues to fail despite the component being unmounted from the

import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import { act } from 'react' import Notifications, { defaultNotificationTime, defaultOpacity, queuedNotificationTime, fa ...

Guidelines on declining a pledge in NativeScript with Angular 2

I have encountered an issue with my code in Angular 2. It works fine in that framework, but when I tried using it in a Nativescript project, it failed to work properly. The problem arises when I attempt to reject a promise like this: login(credentials:Cr ...

Can someone confirm if I am importing this png file correctly? I am encountering an error with Vite, here is my code

Error: TypeScript+ React + Vite [plugin:vite:import-analysis] Failed to find import "./assets/heropic.png" in "src\components\Hero.tsx". Are you sure the file exists? Hello fellow developers! I am new to working with react and typescript. Curren ...

Can you switch out the double quotation marks for single quotation marks?

I've been struggling to replace every double quote in a string with a single quote. Here's what I have tried: const str = '1998: merger by absorption of Scac-Delmas-Vieljeux by Bolloré Technologies to become \"Bolloré.'; console ...

Setting up a Typescript project using webpack

Greetings! I am looking to set up Typescript with composite config and webpack (everything worked fine with just a single tsconfig.json). I must admit that I am new to TypeScript and have been more familiar with JavaScript. My main issue is getting the des ...

What is the design for headers in accordion-groups with ngx-bootstrap?

Is there a way to customize the style of ngx-bootstrap accordion headers? I've attempted various methods, including copying and pasting code from the documentation for header customization. However, it hasn't been successful. When inspecting the ...

Having trouble retrieving multiple parameter values with ng bootstrap modal in Angular 4

In this section, I am creating dynamic buttons that send values to an ng bootstrap modal. Currently, I am able to send and retrieve only one value. How can I modify the code to send multiple values and display them in the input field within the modal? Belo ...

In the d.ts file, Typescript simply creates the line "export {};"

After executing the tsc command to compile my project into the dist directory, I noticed that typescript is generating an incorrect or empty d.ts file. Here is a snippet of my tsconfig.json: { "compilerOptions": { "module": " ...

Problem with Ionic 2 checkboxes in segment controls

I encountered an issue with my screen layout. https://i.sstatic.net/bFeZN.png The problem arises when I select checkboxes from the first segment (Man Segment) and move to the second segment (Woman Segment) to choose other checkboxes. Upon returning to th ...

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

I'm currently working on a project where I have a row of thumbnails that are supposed to play a video when hovered over and stop when the mouse moves out of the thumbnail. However, I've encountered an issue where only the last thumbnail plays its ...

The module 'angular/common' was not found in the Angular 2 TypeScript

While experimenting with a sample login form in Angular 2, I encountered an issue when trying to import 'Form_Directives' as: import { FORM_DIRECTIVES } from '@angular/common'; An error was displayed stating that the angular/common m ...

Combine objects by selecting attributes from multiple objects

declare type A = {type: 'TypeA', attr1: string} declare type B = {type: 'TypeB', attr2: string} declare type U = A | B When I use type X = Pick<U, 'type'>, I get: { type: 'TypeA' | 'TypeB' } But I a ...