Passing a class as a parameter in Typescript functions

Question

Passing a class as a parameter in Typescript functions

When working with Angular 2 testing utilities, I usually follow this process:

fixture = TestBed.createComponent(EditableValueComponent);

The EditableValueComponent is just a standard component class that I use.

I am curious about the inner workings:

static createComponent<T>(component: Type<T>): ComponentFixture<T>;

This has me thinking, as I want to streamline certain testing procedures:

export class SuperFixture<T>
{  
    fixture: ComponentFixture<T>;
    component: T;

    constructor()
    {         
        this.fixture = TestBed.createComponent(T); // <--- encountered an issue here!
        this.component = this.fixture.componentInstance;   
    }
}

The problem at hand is described as follows:

'T' only refers to a type, but is being used as a value here.'

EDIT #1

To resolve the issue, I made the following adjustment:

constructor(component)
{
    this.fixture = TestBed.createComponent<T>(component);

Even after resolving it, the mechanics behind it all still puzzle me.

javascript angular typescript

Answer 1

Answer №1

Make sure to provide the actual constructor function of a class (which creates instances of that class) to the constructor function of MegaFixture. When you use TestBed.createComponent, it internally uses the provided constructor function along with new keyword to instantiate objects of the specified class. The definition of MegaClass could be something like this:

class MegaFixture<T>
{
  fixture: ComponentFixture<T>;
  component: T;

  // passing the constructor function for creating instances of T
  constructor(componentConstructor: new () => T)
  {
    this.fixture = TestBed.createComponent<T>(componentConstructor);
    this.component = this.fixture.componentInstance;
  }
}

Answer 2

Make sure to provide the actual constructor function of a class (which creates instances of that class) to the constructor function of MegaFixture. When you use TestBed.createComponent, it internally uses the provided constructor function along with new keyword to instantiate objects of the specified class. The definition of MegaClass could be something like this:

class MegaFixture<T>
{
  fixture: ComponentFixture<T>;
  component: T;

  // passing the constructor function for creating instances of T
  constructor(componentConstructor: new () => T)
  {
    this.fixture = TestBed.createComponent<T>(componentConstructor);
    this.component = this.fixture.componentInstance;
  }
}

Answer 3

Answer №2

Had to take a quick break for some java while in the middle of crafting that response. ¯\_(ツ)_/¯

The concept you are utilizing is referred to as a Generic within TypeScript. It enables the definition of types dynamically with "type variables" (such as <T>), distinct from function parameters.

Previously, the type variable was being supplied as a function parameter, when the function required an instance of type T. This is what caused the error message.

Your adjustment now functions correctly because you are passing both the type variable and the instance in their appropriate positions during the invocation.

Upon instantiation, the SuperFixture object captures the value of T, which it subsequently transmits to createComponent in its constructor alongside the value of component.

Answer 4

Had to take a quick break for some java while in the middle of crafting that response. ¯\_(ツ)_/¯

The concept you are utilizing is referred to as a Generic within TypeScript. It enables the definition of types dynamically with "type variables" (such as <T>), distinct from function parameters.

Previously, the type variable was being supplied as a function parameter, when the function required an instance of type T. This is what caused the error message.

Your adjustment now functions correctly because you are passing both the type variable and the instance in their appropriate positions during the invocation.

Upon instantiation, the SuperFixture object captures the value of T, which it subsequently transmits to createComponent in its constructor alongside the value of component.

Passing a class as a parameter in Typescript functions

Answer №1

Answer №2

Similar questions

Sending JSON Data from Angular2 Component to Node.js Server

Is it possible to retrieve information from Wikipedia using Ajax?

Check to see if a variable has been assigned a value in the form of a jquery

The values stored in UI Router $stateParams can only be accessed and viewed

Verify the Ajax submission of a post request prior to transmitting any data

Issue with converting form data to JSON format

Unexpected behavior noticed with Angular Material 2 Reactive Forms: the mat-error directive does not display when validating for minLength. However, it functions correctly for email and required

Search for all documents in MongoDB and update all of them except for one

Angular 5 - Keeping track of variable updates

Conceal/Inactivate element when scrolling, and once scrolling comes to a halt, reveal it once more

Discovering the size of an attribute in an object using Angular

Endless loop of jquery textbox focus event

The functionality of Jquery appears to be malfunctioning on the Drupal platform, although it performs

The enigma of TypeScript

What is the method for invoking an anonymous JavaScript object when its name is unknown?

Are you unsure whether to use Ajax or jQuery? If you need assistance in adding parameters to

Issue with AJAX MVC HTML: jQuery value is not blocking API call

Angular checkboxes not triggering ng-click event

Showing a React Portal Toolbar only when populated with children

Using ngModel in multiple mat-select elements in Angular 2/4