Using type values in TypeScript

Question

Using type values in TypeScript

I am trying to assign interfaces as values within a config object:

export interface RouterConfig {
  startEvents?: typeof RouterEvent[];
  completeEvents?: typeof RouterEvent[];
}

The intended usage is as follows:

private config: RouterConfig = {
  startEvents: [NavigationStart],
  completeEvents: [NavigationEnd, NavigationCancel, NavigationError]
};

However, this approach is resulting in an error message:

The types of the 'completeEvents' property are incompatible. The type '(typeof NavigationEnd | typeof NavigationCancel | typeof NavigationError)[]' cannot be assigned to type 'RouterEvent[]'. The type 'typeof NavigationEnd | typeof NavigationCancel | typeof NavigationError' cannot be assigned to type 'RouterEvent'. The type 'typeof NavigationEnd' cannot be assigned to type 'RouterEvent'. The 'id' property is missing in the 'typeof NavigationEnd' type.

Any suggestions on how to resolve this issue?

You can find a reproduction of this issue on StackBlitz

Please note that RouterEvent refers to a class

angular typescript

Answer 1

Answer №1

When working with classes like NavigationEnd, NavigationCancel, and NavigationError, it's important to note that they have constructors with arguments. On the other hand, the RouterEvent type has a constructor without arguments. This is why the assignment may fail if not handled correctly.

If you wish to take in a constructor with any number of arguments, you should use a constructor signature that reflects this requirement. For example, using

new (...args: any[]) => RouterEvent

would work in such cases. Angular conveniently provides a type alias for this kind of constructor in the form of the Type type, making it easier for us to implement:

import { Component, Type } from '@angular/core';
import { RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';

export interface RouterConfig {
  startEvents?: Type<RouterEvent>[];
  completeEvents?: Type<RouterEvent>[];
}
let config: RouterConfig = {
  startEvents: [NavigationStart],
  completeEvents: [NavigationEnd, NavigationCancel, NavigationError]
};

Answer 2

When working with classes like NavigationEnd, NavigationCancel, and NavigationError, it's important to note that they have constructors with arguments. On the other hand, the RouterEvent type has a constructor without arguments. This is why the assignment may fail if not handled correctly.

If you wish to take in a constructor with any number of arguments, you should use a constructor signature that reflects this requirement. For example, using

new (...args: any[]) => RouterEvent

would work in such cases. Angular conveniently provides a type alias for this kind of constructor in the form of the Type type, making it easier for us to implement:

import { Component, Type } from '@angular/core';
import { RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';

export interface RouterConfig {
  startEvents?: Type<RouterEvent>[];
  completeEvents?: Type<RouterEvent>[];
}
let config: RouterConfig = {
  startEvents: [NavigationStart],
  completeEvents: [NavigationEnd, NavigationCancel, NavigationError]
};

Using type values in TypeScript

Answer №1

Similar questions

Steps for sending an image to Cloudinary using the fetch API

When attempting to send file data in a $http Post request in Angular 8, the Rails API logs show an empty object {}

What are the appropriate Typescript typings for React Components that have the ability to return a string or their child components directly?

What is the best way to pass a string value instead of an event in Multiselect Material UI?

Encountering a Vueify Typescript error in a Vue project

Attempting to utilize pdf.js may result in an error specifying that pdf.getPage is not a recognized function

Incorporate OpenLayers 4 into your Angular 5 application

What is the best way to trigger a function when a button is enabled in Angular 8?

Implementing the breadcrumb component within dynamically loaded modules loaded through the router-outlet component

What is the best way to retrieve the file path of a imported Angular module?

Is there a more efficient method for invoking `emit` in Vue's Composition API from an external file?

Component in Next.js fetching data from an external API

Is there a way to set up a background process within electron that captures a screenshot of the entire desktop?

Developing React component libraries with TypeScript compared to Babel compiler

Is it possible for a Firestore query using .where() to conduct a search with no results?

Are there any methods within Angular 2 to perform Angular binding within a string?

Creating an object property conditionally in a single line: A quick guide

Reimbursement for utilizing SwitchMap in Rxjs within the Angular framework

Using Jest and TypeScript to mock the return value of react-oidc-context

Utilize a vacant implementation of an interface