How write declaration for class and namespace with same name in Typescript

Question

I'm using a 3rd party Javascript library in this format:

var MyClass = function (name) {
    this.name = name;
}

MyClass.prototype.greet = function () {
    window.alert('Hello ' + this.name)
}

I want to write a Typescript declaration for this. I've got this sort of thing:

declare class MyClass {
    constructor(name: string);
    greet(): void;
}

This is all compiling fine and when I just want to refer to the types it is working as expected. But I'm having problems trying to use the class implementation.

Using it this way, it compiles and runs, but I get no compile time checking

const MyClass = (require('./MyClass') as any).MyClass;
const a = new MyClass('Bob'); //a is any

Using it this way I get a compiler error

const MyClass = (require('./MyClass') as any).MyClass as MyClass;
const a = new MyClass('Bob'); //Cannot use 'new' with an expression whose type lacks a call or construct signature.

Using it this way I get a compiler error

import './MyClass';
const a = new MyClass('Bob');
//duplicate identifier in MyClass.d.ts

Mike Lippert · Accepted Answer · 2017-08-17 01:10:13Z

2

So the first problem is that your declaration file is for the MyClass module and defines the class but doesn't describe that modules exports. The second problem is that you then need the matching import statement in your main module. import './MyClass' is only to import side effects (see the typescript modules doc.

Based on the code that works, it looks like the MyClass module exports an object with a MyClass property (set to the MyClass class) so that's what I've added to your declaration file.

The MyClass.d.ts declaration file for the js module:

declare class MyClass {
  constructor(name: string);
  greet(): void;
}

export { MyClass }

Then in your main.ts:

import { MyClass } from './MyClass';

let a = new MyClass('foo');
a.greet();

answered Aug 17, 2017 at 1:10

Mike Lippert

2,2711 gold badge19 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleg Abrazhaev Over a year ago

when I was migrating to webpack with TS codebase this was very helpful for me - to add export everywhere.

robkuz · Accepted Answer · 2017-02-10 17:55:02Z

1

I would try something like this

declare class MyClass {
    greet(): void;
}

declare type MyClassFactory = (x: string) => MyClass

const factory = (require('./MyClass') as any).MyClass as MyClassFactory;
const a = factory('Bob');

which is to detach the class and its constructor function

answered Feb 10, 2017 at 17:55

robkuz

10k5 gold badges34 silver badges55 bronze badges

1 Comment

tarling Over a year ago

Thanks for this - I modified this a bit to give declare type MyClassFactory = new (x: string) => MyClass and const a = new factory('Bob');

Collectives™ on Stack Overflow

How write declaration for class and namespace with same name in Typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related