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

Posted 2023-03-13

【中文标题】如何使用 typescript 在外部 js 文件中调用函数

【英文标题】：How do I call a function in an external js file using typescrpt

【发布时间】：2020-10-16 10:47:26

【问题描述】：

我们正在尝试将 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)

【问题讨论】：

如何在Validators.js 中导出函数？

目前我没有在 validator.js 中导出任何内容

这可能是问题的一部分。请在下面查看我的回答，如果有任何帮助，请告诉我

如果我想全部导入，我也可以全部导出吗？

您可以像这样导出Validators.js文件底部的所有功能：export func1, func2, func3等。作为参考，这里是MDN docs使用export

【参考方案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 的位置是否正确。在错误的目录中查找是一个常见的错误。您的代码编辑器通常可以帮助您找到正确的使用路径。

【讨论】：

很好，所以我导入了所有函数（并添加了导出）并为我的函数调用添加了前缀。 “validatorFuncs.findFormNode”。像魅力一样工作。

太好了，很高兴为您提供帮助。最好的问候