当前位置：首页 > news >正文

Vite中如何更好的使用TS

news 来源：原创 2024/11/15 14:56:00

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 的智能提示

对于环境变量的知识，可以参考juejin.cn/post/717201…

默认情况下，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: stringreadonly VITE_APP_HAHA: stringreadonly VITE_APP_WOCAO: string// 自定义内容...
}

interface ImportMeta {readonly env: ImportMetaEnv
}

注：必须安装模板来写，这个方法是针对所有项目的，脚手架类的项目也一样

示例：

main.ts中测试