vue3+vite+ts 引入静态js，避免使用全局变量报错

在你的 Vue3+Vite 项目中，通过 HTML 引入一个本地第三方 JS 文件，该文件暴露了一个 rap 全局变量。

1. HTML 引入第三方 JS

在你的 HTML 文件中，通过 <script> 标签引入一个本地第三方 JS 文件，例如：

<script src="/path/to/tools.js"></script>

这个 JS 文件暴露了一个全局变量 rap。在浏览器环境中，这个变量在引入之后就可以在全局范围内使用。

2. 声明文件（tools.d.ts）

为了在 TypeScript 项目中使用这个全局变量而不产生错误提示，你需要为这个 JS 文件创建一个类型声明文件。例如，创建一个 tools.d.ts 文件，内容如下：

declare namespace rap {
  // 在这里定义 rap 对象的类型和结构
  function someFunction(): void;
  const someValue: number;
  // 其他需要的类型声明
}

这个文件告诉 TypeScript 存在一个 rap 全局变量，并描述了它的类型和接口。

3. 引用声明文件（env.d.ts）

在 env.d.ts 文件中使用 /// <reference path="..."/> 语法引用声明文件：

/// <reference path="./src/lib/tools.d.ts" />

4. 使用 rap 变量

现在，你可以在项目的 TypeScript 文件中使用 rap 变量，而不会出现类型错误提示：

rap.someFunction();
console.log(rap.someValue);

rap 变量的来源

• HTML 引入：通过 HTML 文件引入的 tools.js 文件，使得浏览器环境中存在一个全局的 rap 对象。
• TypeScript 类型声明：通过 tools.d.ts 文件中的 declare namespace rap {}，TypeScript 知道了 rap 的结构和类型。
• 项目引用：env.d.ts 中的引用确保 TypeScript 编译器在整个项目中都能识别 rap 变量的类型信息。

这样，在项目中使用 rap 变量时，既能够利用浏览器中的全局变量，又可以享受 TypeScript 的类型检查和智能提示功能。