使用 Vite + TypeScript 导入 JS

Vite 是一款快速的 Web 开发构建工具，支持 TypeScript、JSX 以及 CSS 等多种前端语言。在项目中，有时我们需要导入一些旧的 JS 库或者插件，但它们并没有提供 TypeScript 类型声明文件，该如何才能使用 Vite 导入这些 JS 代码呢？

方法一：使用 declare 关键字

当我们需要使用一些没有 TypeScript 类型声明的 JS 代码时，可以在 TypeScript 中使用 declare 关键字来告诉编译器，我们只是想使用这些代码而已，不需要对其进行类型检查。下面是示例代码：

declare const someLibrary: any;

上述代码中的 someLibrary 只是一个占位符，可以替换成需要导入的 JS 库或插件的全局变量名。通过使用 declare 关键字，我们可以避免 TypeScript 的类型检查，直接使用这些 JS 代码。

方法二：安装对应的类型声明文件

对于一些比较流行的 JS 库或插件，开发者通常会提供相应的 TypeScript 类型声明文件，以方便 TypeScript 的使用。在导入这些 JS 代码时，我们只需要在项目中安装对应的类型声明文件即可。以 jQuery 为例：

npm install @types/jquery

安装完类型声明文件后，我们就可以直接在 TypeScript 代码中使用 jQuery，如下所示：

import $ from 'jquery';

以上代码中的 $ 变量就是 jQuery 的全局变量，通过 ES6 的模块化语法，我们可以将其导入到 TypeScript 代码中，并且获得 TypeScript 的类型检查支持。

方法三：手动编写类型声明文件

对于那些没有官方提供 TypeScript 类型文件的第三方库或者自己编写的 JS 代码，我们可以手动编写相应的类型声明文件。以下是一个简单的 jQuery 类型声明文件示例：

declare const $: {
  (selector: string): any;
  ajax(options: any): void;
  // ...其他 API
};

上述代码中，我们使用 declare 关键字声明了一个 $ 变量，它是一个对象，拥有一个类似函数的结构。通过这种方式，我们手动编写了一个类型声明文件，可以在 TypeScript 中使用 jQuery，同时也可以获得类型检查支持。

以上就是 Vite + TypeScript 导入 JS 的常用方法，根据具体情况选择合适的方式即可。