Question

我从打字稿和角度开始，我必须为自定义库创建一个typedefinition。当我运行该应用程序时，我看到我的外部库的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();
}

我简化了代码，因为我看到组件中的角度导入将js正确地放入了dom，但是在调用打字稿代码时失败。因此，我有一种强烈的感觉，我在类型定义中缺少一个要点。这可能是我看不见的愚蠢内容（就像我说的，我是打字稿新手，棱角分明）

欢迎任何想法

预先感谢

Answer 1

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

module.exports = {createEditor,Editor};

因此，当webpack尝试加载相关导入时，它没有正确加载。

Typescript，Webpack，角度：未捕获的TypeError：Object（…）不是函数

1 个答案: