Just starting out with TypeScript and Angular, I've been tasked with creating a typedefinition for a custom library. Despite confirming that the JavaScript from my external library is loading correctly in the resources, I encountered an error when calling my TypeScript code:
ERROR TypeError: Object(...) is not a functionapp.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();
}
While I may have oversimplified my problem, it seems like the Angular import in my component is correctly injecting the JS into the DOM but fails when interacting with the TypeScript code. As a novice to TypeScript and Angular, I suspect there's something vital in my typedefinition that I'm overlooking. Any insights or suggestions would be greatly appreciated! Thanks in advance.