本文主要是介绍关于 Vite 的浅显学习 - 功能 - TypeScript，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
大部分内容来源于vite官网，部分内容来自于 自己测试和总结
Vite 官方中文文档
对非常基础的使用来说，使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而，Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。
NPM 依赖解析和预构建
原生 ES 导入不支持下面这样的裸模块导入：
import { someMethod } from 'my-dep'
上面的代码会在浏览器中抛出一个错误。Vite 将会检测到所有被加载的源文件中的此类裸模块导入，并执行以下操作：
- 预构建 它们可以提高页面加载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 esbuild 执行，这使得 Vite 的冷启动时间比任何基于 JavaScript 的打包器都要快得多。
- 重写导入为合法的 URL，例如
/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd以便浏览器能够正确导入它们。
依赖是强缓存的
Vite 通过 HTTP 头来缓存请求得到的依赖。
模块热替换
Vite 提供了一套原生 ESM 的 HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue 单文件组件（SFC）
和 React Fast Refresh 中。也通过 @prefresh/vite 对 Preact 实现了官方集成。
注意，你不需要手动设置这些 —— 当你通过 create-vite 创建应用程序时，所选模版已经为你预先配置了这些。
TypeScript
Vite 天然支持引入 .ts 文件。
仅执行转译
请注意，Vite 仅执行 .ts 文件的转译工作，并不执行 任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。
Vite 之所以不把类型检查作为转换过程的一部分，是因为这两项工作在本质上是不同的。转译可以在每个文件的基础上进行，与 Vite 的按需编译模式完全吻合。相比之下，类型检查需要了解整个模块图。把类型检查塞进 Vite 的转换管道，将不可避免地损害 Vite 的速度优势。
Vite 的工作是尽可能快地将源模块转化为可以在浏览器中运行的形式。为此，我们建议将静态分析检查与 Vite 的转换管道分开。这一原则也适用于其他静态分析检查，例如 ESLint。
- 在构件生产版本时，你可以在 Vite 的构建命令之外运行
tsc --noEmit。 - 在开发时，如果你需要更多的 IDE 提示，我们建议在一个单独的进程中运行
tsc --noEmit --watch，或者如果你喜欢在浏览器中直接看到上报的类型错误，可以使用 vite-plugin-checker。
Vite 使用 esbuild 将 TypeScript 转译到 JavaScript ，约是 tsc 速度的 20~ 30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。
使用 仅含类型的导入和导出 形式的语法可以避免潜在的“仅含类型的导入被不正确打包”的问题，写法示例如下：
import type { T } from 'only/types'
export type { T }
TypeScript 编译器选项
tsconfig.json 中 compilerOptions 下的一些配置项需要特别注意。
isolatedModules
应该设置为 true。
这是因为 esbuild 只执行没有类型信息的转译，它并不支持某些特性，如 const enum 和隐式类型导入。
你必须在 tsconfig.json 中的 compilerOptions 下设置 "isolatedModules": true。如此做，TS 会警告你不要使用隔离（isolated）转译的功能。
然而，一些库（如：vue）不能很好地与 "isolatedModules": true 共同工作。你可以在上游仓库修复后之前暂时使用 "skipLibCheck": true 来缓解这个错误。
useDefineForClassFields
从 Vite v2.5.0 开始，如果 TypeScript 的 target 是 ESNext 或 ES2022 及更新版本，此选项默认值则为 true 。这与 tsc v4.3.2及以后版本的行为 一致。这也是标准的 ECMAScript 的运行时行为。
但对于那些习惯其他编程语言或旧版本 TypeScript 的开发者来说，这可能是违反直觉的。你可以参阅 TypeScript 3.7发布日志 中了解更多关于如何兼容的信息。
如果你正在使用一个严重依赖 class fields 的库，请注意该库对比选项的预期设置。
大多数库都希望 "useDefineForClassFields": true ，如 Mobx。
但是有几个库还没有兼容这个新的默认值，其中包括 lit-element 。如果遇到这种情况，请将 useDefineForClassFields 设置为 false 。
影响构建结果的其他编译器选项
- extends
- importsNotUsedAsValues
- preserveValueImports
- jsxFactory
- jsxFragmentFactory
如果你的代码库很难迁移到 "isolatedModules": true ，或许你可以尝试通过第三方插件来解决，比如 rollup-plugin-friendly-type-imports 。但是，这种方式不被 Vite 官方支持。
客户端类型
Vite 默认的类型定义是写给它的 Node.js Api 的。要将其补充到一个 Vite 应用的客户端代码环境中，请添加一个 d.ts 声明文件：
/// <reference types="vite/client" />
或者，你也可以将 vite/client 添加到 tsconfig.json 中的 compilerOptions.types 下：
{"compilerOptions": {"types": ["vite/client"]}
}
这将会提供以下类型定义补充：
- 资源导入 (例如：导入一个 .svg 文件)
- import.meta.env 上 Vite 注入的环境变量的类型定义
- import.meta.hot 上的 HMR API 类型定义
TIP
要覆盖默认的类型定义，请添加一个包含你所定义类型的文件，请在三斜线注释 reference vite/client 前添加定义。
例如，要为 React 组件中的 *.svg 文件定义类型：
- vite-env-override.d.ts (the file that contains your typings):
declare module '*.svg' {const content: React.FC<React.SVGProps<SVGElement>>export default content } - The file containing the reference to vite/client:
/// <reference types="./vite-env-override.d.ts" /> /// <reference types="vite/client" />
这篇关于关于 Vite 的浅显学习 - 功能 - TypeScript的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
