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

Question

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"

question from:https://stackoverflow.com/questions/43623461/new-expression-whose-target-lacks-a-construct-signature-in-typescript

Answer 1

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