Typescript, Webpack, angular: Uncaught TypeError: Object(…) is not a function

Question

我从打字稿开始，angular 我必须为自定义库创建类型定义。当我运行应用程序时，我看到我的外部库的 javascript 存在于资源中并已加载（通过控制台检查），但是当我的打字稿代码被调用时，我得到了这个错误：ERROR TypeError: Object(...) is not a function。看来我遗漏了什么，我的 index.d.ts 和我的 index.js,

在同一个文件夹里

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
<input value="open editor" type="button" (click)="openEditor()"/>
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import {createEditor, Editor} from "editor";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';

  openEditor() {
        console.log(new Editor());
        console.log(createEditor());
  }
}

package.json

  "name": "editor",
  "version": "1.0.0",
  "description": "editor",
  "main":"index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "private": false,
  "publishConfig": {
    "registry": "http://localhost:4873"
  },
  "keywords": [
    "editor"
  ],
  "devDependencies": {
    "css-loader": "^3.0.0",
    "csv-loader": "^3.0.2",
    "file-loader": "^4.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.4",
    "xml-loader": "^1.2.1"
  },
  "files": [ "index.js","index.d.ts"]
}

index.js

Editor = function(){
    alert("hello");
};
createEditor = function(){
    alert("hi");
};

index.d.ts

export function createEditor():void;
export class Editor {
    constructor();
}

我过度简化了我的代码，因为我看到我的组件中的 angular 导入将 js 正确地放入 dom，但是当它调用 typescript 代码时失败了。所以我有一种强烈的感觉，我在我的类型定义中遗漏了一个重要的点。这可能是我没看到的愚蠢的东西（正如我所说，我是打字稿的新手，angular）

欢迎任何想法，

提前致谢

Answer 1

我想我找到了解决办法，看来问题出在js文件中， js 文件缺少导出声明：

module.exports = {createEditor,Editor};

所以当 webpack 试图加载相关的导入时，它没有正确加载它。

Typescript, Webpack, angular: Uncaught TypeError: Object(…) is not a function

Typescript, Webpack, angular: Uncaught TypeError: Object(…) is not a function

angular

typescript

webpack

type-definition