在 React TypeScript 组件中导入 Javascript

Posted 2023-03-13

【中文标题】在 React TypeScript 组件中导入 Javascript

【英文标题】：Importing Javascript in React TypeScript component

【发布时间】：2021-05-29 04:28:16

【问题描述】：

我正在使用 TypeScript 开始一个新的 React 项目，它是一个使用基本 JS 和 html 完成的旧项目的转换。我正在尝试使用一个用 JS 编写的网络库，但我不确定如何导入它。在旧项目中，它只是在 head 中使用脚本标记导入的。嵌入式 JS 中调用的旧函数是 let external = $pop.render(params)。脚本标签中旧导入的扩展名是/index.js?mode=api。任何帮助，将不胜感激！提前致谢！该库是一个自定义的私有 js 库。我试过import "URL TO LIBRARY";、jQuery.getScript() 和import * as Pop from 'URL';。它是一个基于 AMD 的模块。

【问题讨论】：

您需要提供更多信息：您要导入哪个库？到目前为止你做了什么？

这个私有库是写成模块的吗？也许是基于CommonJS 或AMD 的模块？代码是什么样的？

您不能从 URL 导入，对吗？如果使用，Webpack 将为您添加模块。您需要将模块下载到文件并从文件路径导入。

【参考方案1】：

我能够通过将它作为脚本标记导入 HTML 文件中来解决它，然后从窗口 window.$pop.render(params) 调用我需要的函数。我必须添加 declare global interface Window $pop:any; 以便 TypeScript 知道在窗口中期待 $pop。我通过组合这些解决方案得到了这个：How do I use external script that I add to react JS? 和 TypeScript error: Property 'X' does not exist on type 'Window'。