'new' expression, whose target lacks a construct signature in TypeScript

45
votes

We have the following TestComponent.ts TypeScript class:

01: import TestVectorLayer from './TestVectorLayer'
02: 
03: export class TestComponent implements OnInit {
04:   private foo: any;
05: 
06:   constructor() { }
07: 
08:   const layer = new TestVectorLayer("foo");
09: }

And the following TestVectorLayer.ts function:

Keep in mind that OpenLayer's 3 is using the Google Closure Library, that's why TestVectorLayer is not a TypeScript class.

01: declare let ol: any;
02:
03: const TestVectorLayer = function (layerName: string) {
04:   ...
05:   console.log(layerName);
06:
07:   ol.layer.Image.call(this, opts);
08: }
09:
10: ol.inherits(TestVectorLayer as any, ol.layer.Image as any);
11:
12: export default TestVectorLayer;

We're getting the following error:

Error on Line 08 in TestComponent.ts class:

[ts] 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type. import TestVectorLayer

The package.json versions of TypeScript:

devDependencies:

"typescript": "~2.2.1"
3
javascripttypescript
And if you want to new it why can't TestVectorLayer be a class? - Saravana
@Saravana this should not matter, at the end of the day class is just syntactic sugar. - WilomGfx
@AluanHaddad I've updated the question. TestVectorLayer is using OpenLayer 3, which is uses Google Closure Library. - fulvio
@fuzz so you are using --allowJs? I'm still slightly confused because if it's a third-party library, why are you consuming it's from a relative path instead of from its package with its package.json and license files? - Aluan Haddad
@Saravana True, would not hurt to make a class indeed. Just for the typing benefits. - WilomGfx

3 Answers

47
votes

Here's a simplification of the question:

const TestVectorLayer = function(layerName: string) {
};

const layer = new TestVectorLayer("");

The error is happening because TestVectorLayer doesn't have a new signature, so layer is implicitly typed as any. That errors with --noImplicitAny.

You can fix this by switching to a class, but in your case this seems a bit more complicated because the inheritance is done by the underlying framework. Because of that, you will have to do something a bit more complicated and it's not ideal:

interface TestVectorLayer {
  // members of your "class" go here
}

const TestVectorLayer = function (this: TestVectorLayer, layerName: string) {
  // ...
  console.log(layerName);
  ol.layer.Image.call(this, opts);
} as any as { new (layerName: string): TestVectorLayer; };

ol.inherits(TestVectorLayer, ol.layer.Image);

export default TestVectorLayer;

Then in the file with TestComponent:

const layer = new TestVectorLayer(layerName); // no more compile error
50
votes

David answer is great, but if you care just about quickly making it compile (for example because you are migrating from JS to TS) then you can simply put any there to shut up complaining compiler.

TS file:

const TestConstructorFunction = function (this: any, a: any, b: any) {
    this.a = a;
    this.b = b;
};

let test1 = new (TestConstructorFunction as any)(1, 2);

compiles to this JS file:

var TestConstructor = function (a, b) {
    this.a = a;
    this.b = b;
};
var test1 = new TestConstructor(1, 2);

Just pay attention to not make this mistake:

TS file:

// wrong!
let test2 = new (TestConstructorFunction(1, 2) as any);

JS result:

// wrong!
var test2 = new (TestConstructor(1, 2));

and this is wrong. You'll get TypeError: TestConstructor(...) is not a constructor error at runtime.

0
votes

In my case, You have to define it as any and has new signature, for example.

const dummyCtx = function(txt: string) {
  this.foo = txt
} as any as { new (txt: string): any }

// just use it as usual
const dctx = new dummyCtx('bar')