'new' 表达式，其目标在 TypeScript 中缺少构造签名

Question

我们有以下TestComponent.ts TypeScript 类：

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: }

还有下面的TestVectorLayer.ts函数：

请记住，OpenLayer 3 使用的是 Google Closure Library，这就是为什么 TestVectorLayer 不是 TypeScript 类。

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; 

我们收到以下错误：

Error on Line 08 in TestComponent.ts class:

[ts] 'new' 表达式，其目标缺少构造签名，隐含地具有 'any' 类型。 导入TestVectorLayer

package.json 版本的 TypeScript：

开发依赖：

"typescript": "~2.2.1"

Answer 1

David 的回答很好，但如果您只想快速编译它（例如，因为您正在从 JS 迁移到 TS），那么您可以简单地将 any 放在那里，让抱怨的编译器闭嘴。

TS 文件：

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

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

编译成这个JS文件：

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

---

注意不要犯这个错误：

TS 文件：

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

JS结果：

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

这是错误。你会在运行时收到TypeError: TestConstructor(...) is not a constructor 错误。

Answer 2

这是问题的简化：

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

const layer = new TestVectorLayer("");

发生错误是因为TestVectorLayer 没有新的签名，所以layer 被隐式键入为any。 --noImplicitAny 的错误。

您可以通过切换到一个类来解决此问题，但在您的情况下，这似乎有点复杂，因为继承是由底层框架完成的。因此，您将不得不做一些更复杂的事情，这并不理想：

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; 

然后在文件中用TestComponent:

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

Answer 3

就我而言，例如，您必须将其定义为 any 并具有 new 签名。

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')

Answer 4

我会给你的 TestVectorLayer 一个接口

class TestVectorLayer implements TestVectorLayer {
    
}

interface TestVectorLayer {
    new (layerName: string): TestVectorLayer;
}