如何使用 typescript 在外部 js 文件中调用函数

Question

我们正在尝试将 Typescript 和 Webpack 添加到我们的 Angularjs 项目的 POC。 我能够生成我的 webpack 包，但是在运行时程序无法在我的 validator.js 中找到各种函数。可以给点建议吗？

login-view.components.ts

declare var findFormNode: any;      //function in validator.js


 //LogInUser
 self.login = function ($event, command) {
     if (findFormNode($event.target.id)) {
     ...
     }
}  

main.ts 正在导入文件

import "./../../../CommonStaticFiles/include/js/Validators.js";

bundle.js

eval("/* WEBPACK VAR INJECTION */(function($) {/*\r\n\r\n  VALIDATORS\r\n\r\n ... n\n\nfunction findFormNode(

---

错误

ReferenceError: findFormNode is not defined
at LoginController.self.login (login-view.component.ts:28)
at fn (eval at compile (angular.js:NaN), <anonymous>:4:267)
at callback (angular.js:29019)

Answer 1

为了正确导入您的函数，您需要确保的事项很少。

首先，确保您正确导出函数。以下是如何从Validator.js 导出函数的示例：

export const validateFunc1 = ():void => {};

接下来，您必须确保使用正确的导入语法。为了导入上面的函数，您需要执行以下操作：

import {validateFunc1} from "./../../../CommonStaticFiles/include/js/Validators.js";

或者，如果您想一次导入所有导出的函数，那么您可以使用以下语法：

import * as validatorFuncs from "./../../../CommonStaticFiles/include/js/Validators.js";

最后，检查Validators.js 的位置是否正确。在错误的目录中查找是一个常见的错误。您的代码编辑器通常可以帮助您找到正确的使用路径。