TS2351：如何在 ts 中为 `new function()` 创建构造函数类型答案

【问题标题】：TS2351: How to create constructor typings for `new function()` in tsTS2351：如何在 ts 中为 `new function()` 创建构造函数类型
【发布时间】：2018-12-14 12:24:12
【问题描述】：

我正在创建一个导出默认类的 npm 包。这个模块是用es3写的，但是我想提供types.ts

index.js（在我的包中）

function MyClass(p1, p2) {
  // code
}

module.exports =  MyClass;

好的，然后我创建了类型 index.d.ts（在我的包中，除了 index.js）：

declare module 'mypackageid' {
  interface MyClass {
    new (div: HTMLElement, conf: any): MyClass;
  }
  export var MyClass: MyClass;
}

我可以很容易地在 es3 中使用这段代码并且它可以工作。（在我的包裹之外，例如来自另一个包裹）

var myInstance = new MyClass()

但如果我想从 .ts 文件中的另一个包中使用它：

import MyClass from 'mypackageid';

new MyClass(divReference, { // <-- error points to this line
    onBlobPaste: e=> {
      console.log(e);
    },
});

Typescript loader 拒绝编译和打印：

TS2351：不能将“new”与类型缺少调用的表达式一起使用或构造签名。

编辑 1：

您在 .ts 文件中使用 commonjs 默认导出，即 .d.ts 文件指定成员导出，并且您的消费者期待 ES6 默认导出。您实际上以什么方式尝试导出它？你必须选择一个

我没有明确导入类型，我希望 typescript 能够自动从“index.d.ts”中自动检测类型。如果我像这样使用默认导出：

declare module 'mypackageid' {
  interface MyClass {
    new (div: HTMLElement, conf: any): MyClass;
  }
  export default MyClass
}

我会在下面得到错误。错误点与new一致

S2693：'MyClass' 仅指一种类型，但在此处用作值。

【问题讨论】：

请检查我的编辑1。我已经试过了。

标签： typescript

【解决方案1】：

如果您在模块中使用exports= 方法，从而替换模块的整个导出，则需要使用import=，以及支持此功能的模块系统（例如AMD 或commonjs）。见docs

mypackageid.d.ts
declare module 'mypackageid' {
    class MyClass {
        constructor(div: HTMLElement, conf: any);
    }
    export = MyClass;
}


//Usage
import MyClass = require('mypackageid')

new MyClass(null, null)

此外，如果您想使用带有new 的接口，则不能导出（因为它是一种类型），您需要声明const 并导出：

declare module 'mypackageid' {
    interface MyClassCtor {
        new (div: HTMLElement, conf: any) : {};
    }
    const MyClass : MyClassCtor;
    export = MyClass;
}

【讨论】：