unable to augment class definition

Search Terms

typescript unable to augment class

Suggestion

I keep running into cases where I want to augment a class that I import from another module.

I know it isn’t best practice, but in some cases it is necessary.

Use Cases

F.e. extending a prototype

Examples

At the moment, I’d like to do something like

import {MyClass} from './MyClass';

declare module './MyClass' {
  interface MyClass {
    newMethod(s: string): void;
  }
}

MyClass.prototype.newMethod = (s: string) => { /* ... */};
  // ^---- ERROR, 'MyClass' only refers to a type, but is being used as a value here. ts(2693)

But it won’t let me. When I try to do this, tsc complains

'MyClass' only refers to a type, but is being used as a value here. ts(2693)

I always run into this issue when attempting to augment a class.

Oddly, this is the method prescribed over at Module Augmentation, but every time I try it it simply does not work.

Also the other most visible StackOverlow answer by @basarat says it isn’t supported with classes.

Checklist

My suggestion meets these guidelines:

• This wouldn’t be a breaking change in existing TypeScript/JavaScript code
• This wouldn’t change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn’t a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript’s Design Goals.

[fatcerberus]

What’s the difference between seven and three here?

four. :trollface:

[jcalz]

I think we would benefit from having a link to a web IDE with the relevant dependency already configured, like maybe this (note, you might have to “Run” it to see the errors… or wait, or something. It seems to take a while for the red squigglies to show up in the editor).

Here, I have the following code in index.ts, which errors as @trusktr is reporting:

import { Object3D } from 'three';

declare module 'three' {
  // comment the following out to see error go away
  interface Object3D { }
}

const object3D: Object3D = new Object3D(); // error!
object3D.updateMatrix(); // error!

But I also have the following code, which works just fine:

import { Object7D } from './seven';

declare module './seven' {
  interface Object7D { }
}

const object7D: Object7D = new Object7D(); // okay
object7D.updateMatrix(); // okay

Now seven.d.ts is just a made-up declaration file I’ve placed inside my own project, with the following contents:

export class Object7D {
  constructor();
  updateMatrix(): void;
}

But the configured three dependency is similar, with code like

export class Object3D extends EventDispatcher {
	constructor();
// ... snip ...	
	updateMatrix(): void;
// ... snip ...
}

So, what’s going on? What’s the difference between seven and three here? (don’t say four pls) I don’t understand why in the case of seven, the compiler remembers that the static side of Object7D still exists as a value named Object7D, while in the case of three the compiler immediately forgets that Object3D was the name of a value as well as the name of a type.

I don’t know enough about TS dependency management to know if this is a bug, design limitation, or user error, but it seems fishy to me. Can anyone speak authoritatively about this?