typescript中如何引用js

typescript 引用 javascript 代码，看似简单，实际操作中却可能遇到一些小坑。我曾经在项目中就因为这个问题卡了半天，最终才找到解决方法。

最直接的方法，当然是用 <script> 标签引入你的 JavaScript 文件。 假设你的 JS 文件名为 my-script.js，位于 src 文件夹下，那么在你的 TypeScript 文件中，你就可以这样写：</script>

<script src="./src/my-script.js"></script>

登录后复制

这种方法简单粗暴，适合一些小型项目或者快速原型开发。但是，它有一个很大的局限性：TypeScript 编译器无法对这个 JavaScript 代码进行类型检查。这意味着你失去了 TypeScript 带来的类型安全优势，一旦你的 JavaScript 代码出现问题，你只能在运行时才能发现，调试起来会非常痛苦。

我曾经就犯过这个错误。当时为了快速完成一个功能，直接用 <script> 引入了一个外部库的 JavaScript 文件。结果，由于这个库的 API 文档不够完善，我传入的参数类型不对，导致程序运行时崩溃，找了好久才发现问题所在。</script>

为了避免这种情况，更好的方法是使用 declare 语句来声明你的 JavaScript 模块。 假设 my-script.js 暴露了一个名为 myFunction 的函数，你可以这样声明：

declare function myFunction(param1: string, param2: number): string;

登录后复制

这样，TypeScript 编译器就知道 myFunction 函数接受一个字符串和一个数字作为参数，并返回一个字符串。 你就可以像使用 TypeScript 代码一样安全地使用 myFunction 了。 如果参数类型不匹配，编译器就会报错，避免了运行时错误。

然而，声明文件编写起来比较麻烦，尤其当 JavaScript 库的 API 比较复杂时。 幸运的是，很多流行的 JavaScript 库都提供了对应的 TypeScript 声明文件（通常以 .d.ts 结尾）。你可以通过 npm 或 yarn 安装这些声明文件。比如，安装 @types/lodash 就可以获得 Lodash 库的类型定义。

需要注意的是，即使使用了声明文件，也并非万无一失。 如果 JavaScript 库的 API 更新了，而声明文件没有及时更新，你仍然可能遇到类型错误。 这时，就需要你根据实际情况更新声明文件或者自己编写声明文件了。 这个过程需要仔细阅读 JavaScript 库的文档，并理解其 API 的设计。

总而言之，选择哪种方法取决于你的项目规模和对类型安全的重视程度。 对于小型项目，直接使用 <script> 标签可能足够了；但对于大型项目，或者你希望充分利用 TypeScript 的类型安全优势，那么使用 declare 语句或者安装类型声明文件是更好的选择。 记住，选择适合自己项目的方法才是最重要的。</script>

路由网(www.lu-you.com)您可以查阅其它相关文章！