Error encountered while attempting to augment an external class with additional methods using a module

Question

Error encountered while attempting to augment an external class with additional methods using a module

I'm facing a seemingly simple issue that I just can't seem to solve. I have a class called Collection in an external npm package (let's call it packagename). In my current project, I want to add some methods to the prototype of that class and notify TypeScript about this change.

The class is defined in the external module like this:

export class Collection<T extends Document> {
  // ...
}

Here is what I added to an external.d.ts file in my project:

import { Document } from "packagename";

declare module "packagename" {
  export interface Collection<T extends Document> {
    newMethod(): Promise<T | null>;
  }
}

However, when trying to use the new method in another file:

import { Collection } from "packagename"

Collection.prototype.newMethod= function<T extends Document>(this: Collection<T>) {
  // ...
};

I encounter the following error:

TS2693: 'Collection' only refers to a type, but is being used as a value here.

The same error occurs if I try importing Collection with

import * as everything from 'packagename'

and then using everything.Collection.

What am I overlooking here? Thanks for any insight.

typescript

Answer 1

Answer №1

It appears that the reason it is not working is because the imports from packagename are re-exported in a index.ts file that serves as an aggregation point for other files. By targeting the specific source file of the class I intended to enhance, I was able to make it work :

import { Document } from "packagename";

declare module "packagename/dist/collection" {
  export interface Collection<T extends Document> {
    newMethod(): Promise<T | null>;
  }
}

This insight from a comment provided me with the solution.

Answer 2

It appears that the reason it is not working is because the imports from packagename are re-exported in a index.ts file that serves as an aggregation point for other files. By targeting the specific source file of the class I intended to enhance, I was able to make it work :

import { Document } from "packagename";

declare module "packagename/dist/collection" {
  export interface Collection<T extends Document> {
    newMethod(): Promise<T | null>;
  }
}

This insight from a comment provided me with the solution.

Answer 3

Answer №2

One interesting feature of Typescript is its ability to extend interfaces rather than classes. While this can be useful, it's important to remember that interfaces only define the structure of a type without any implementation details.
Instead of extending a class via prototype manipulation, why not simply create a new child class based on the existing one? This approach usually results in cleaner and more maintainable code.

import { Collection } from "packagename"

export class ExtendedCollection extends Collection {
  customMethod() {
    // Your implementation here
  }
}

Once you have defined your extended class, you can easily import and use it wherever needed. Can you think of any compelling reasons not to follow this convention?

Answer 4

One interesting feature of Typescript is its ability to extend interfaces rather than classes. While this can be useful, it's important to remember that interfaces only define the structure of a type without any implementation details.
Instead of extending a class via prototype manipulation, why not simply create a new child class based on the existing one? This approach usually results in cleaner and more maintainable code.

import { Collection } from "packagename"

export class ExtendedCollection extends Collection {
  customMethod() {
    // Your implementation here
  }
}

Once you have defined your extended class, you can easily import and use it wherever needed. Can you think of any compelling reasons not to follow this convention?

Error encountered while attempting to augment an external class with additional methods using a module

Answer №1

Answer №2

Similar questions

Finding the index of a chosen option in Angular

Embedding a data type definition directly within a TypeScript code block

Keys are slipping away in Angular/Typescript when transforming objects into arrays

Using Systemjs to transpile TypeScript async functions

Warning message in ReactJS Material UI Typescript when using withStyles

What steps can be taken to avoid the widespread application of [(NgModel)] to multiple input fields?

Encountered an unhandled exception: Unable to identify a GraphQL output type for the "anticipatedInvestmentSupportInfo"

Ways to remove elements from array of objects that match items in separate array of strings using javascript

Using Typescript for AngularJS bindings with ng.IComponentController

Condition for button functionality

Guide on adding TypeScript to an established Vue 2 application

The improved approach to implementing guards in Angular

Tips for enhancing code quality and minimizing redundancies

leveraging parcel for importing typescript dependencies

Can you explain the significance of using square brackets in the typescript enum declaration?

Leveraging @Inputs with Angular 2's <router-outlet> component for optimal functionality

Transformed an array of objects by extracting values from a specified object using TS/JS

Angular 6: Transform object and add to array

Hide the tab in React Native's bottom tab navigation when on the current screen within the navigator

Adding sub-form groups in Angular 6 using the .addControl method