TS 是JS的一个类型检查工具，检查我们代码中可能会存在的一些隐形问题；同时可以使我们的编译器具备一些语法提示功能。
如果我们使用create-vue（vue3官方脚手架工具）创建了项目，该项目基于 Vite 且 TypeScript 已经准备就绪，可以直接进行TS开发。
本篇文章，我们讨论的是，任意一个安装项目中（不使用脚手架），对TS的支持情况。
Vite对TS是天生支持的
我们创建并初始化一个项目（yarn init -y），安装vite（yarn add Vite -D）。
然后，创建一下入口文件index.html， 并引入我们自定义的main.ts文件
<script src="./main.ts" type="module"></script>
main.ts文件
let tip:string = "这是一个vite项目，使用了ts语法"
console.log('tip: ', tip);
我们在终端使用vite命令启动项目，可以看到控制台输出了我们打印的内容。
在这个demo中，我们只给普通的项目安装了vite，没有安装任何ts相关的插件。
由此看见，vite已经在内部处理了对ts的支持，我们是可以直接使用的。
使用插件强化我们的能力
在一个单纯的vite项目中，vite默认是不会提示ts语法错误并阻断其编译的。
注：我们讨论的是没有使用任何脚手架的情况！
比如，我们在main.ts中将字符类型的tip赋值为数字
let tip:string = "这是一个vite项目，使用了ts语法"
tip = 2
console.log('tip: ', tip);
这样的TS语法是有问题的，但是它依旧会编译成功。
为了严格要求自己，提升代码水平，我们应该让错误输出在控制台阻止编译，强迫我们解决问题。
这一功能可以通过vite-plugin-checker来实现。
vite-plugin-checker是一个可以在工作线程中运行 TypeScript、 VLS、 vue-tsc、 ESLint的插件，它可以根据配置，阻断编译，在控制台及浏览器展示报错信息。
依赖安装
npm i vite-plugin-checker -D
根目录创建vite.config.js配置文件，并引入vite-plugin-checker
// vite.config.js
import checker from "vite-plugin-checker";
import {
defineConfig } from "vite";
export default defineConfig({
plugins: [
checker({
typescript: true,
}),
],
});
此时直接运行 项目依旧会报错，因为还需要ts的配置文件 tsconfig.json。我们使用命令行生成
npx tsc --init
创建好tsconfig.json配置文件后，重新vite服务，会发现TS的语法报错已经被输出了
控制台輸出
浏览器输出
现在，我们只要编写出有问题的TS，vite就会报错，让我们及时发现问题并处理！真香（作死）啊！
打包前进行TS检查
Vite 仅执行 .ts 文件的转译工作，并 不 执行任何类型检查。这意味着，即使我们项目内有Ts的语法错误，打包也是可以正常进行的。
作为一个优秀的开发，我们怎么能允许这样的情况存在呢？
我们可以使用以下语法，在打包时进行代码检查：
- 在构建脚本中运行 tsc --noEmit*
- 对于.vue文件，可以安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查
我们在package.json中配下进行验证：
// package.json
"scripts": {
"dev": "vite",
// 如果ts检查不通过，vite build就不会执行
"build": "tsc --noEmit && vite build",
},
然后执行npm run build执行打包命令
果然，此时编译被阻断了。
tsc --noEmit的执行原理
这是ts的内置语法，和vite其实没有关系。执行tsc --noEmit时，TSC 会读取配置文件获取参数值，--noEmit的作用是只进行检查，不进行编译输出。如果我们的代码无错，会直接退出，否则报错。
TypeScript 的智能提示
对于环境变量的知识，可以参考https://juejin.cn/post/7172012247852515335
默认情况下，Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。但是一些自定义的 .env[mode] 文件是木有 TypeScript 智能提示的。
要想做到这一点，我们可以在 src 目录下创建一个 env.d.ts 文件，接着按下面的方式增加定义即可：
/// <reference types="vite/client" />
interface ImportMetaEnv {
// 自定义内容...
readonly VITE_APP_TITLE: string
readonly VITE_APP_HAHA: string
readonly VITE_APP_WOCAO: string
// 自定义内容...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
注：必须安装模板来写，这个方法是针对所有项目的，脚手架类的项目也一样
示例：
main.ts中测试
如图，可以看到我们的智能提示已经生效了。
这里在vscode中遇到了一个报错，这只是ts的报错，和我们变量的设置是无关的。
报错问题也很简单，ts现在认为我们的项目是基于commonjs的，所以不存在import.meta属性。
我们将module的值改为“es2022”即可。
