Vite从入门到搭建一个Vue3项目（二）TS篇

老湖儿
1,086 阅读4分钟

在Vite中使用TypesScript

安装TS

通过Vite官方的工具可以快速构建一个基础的模板，如果选择了Typescript，则会自动帮你下载两个依赖，一个是Typescript，也就是核心库，一个是vue-tsc(作用下面会说到),我们也可以在vite中手动将这两个包安装上。 另外还会有一个ts的配置文件tsconfig.json，我们可以在里面配置具体的检查规则

image.png

现在是学习阶段，需要了解每个依赖的使用方式，最后我们可以使用Vue官网提供的另外一个工具create-vue，它的集成度更高，直接集成了Vue,TS,ESLint,Prettier,Router,Pinia,单元测试等，并且可以自主选择需要集成哪几个，更适合快速搭建前端项目。

Vite对于TS的友好支持

Vite天然支持引入·.ts文件, 因为从TypeScript到JavaScript的转译工作是用的esbuild（Vite自带的核心构建工具)，而不是TypeScript内置的tsc工具, 用esbuild进行文件转译的好处是更快，官方说大约是tsc的20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。

但是支持TS文件的转译，只是可以了最基本的要求，我们使用TS目的是希望写出更规范的代码，便于后期维护，那么就得需要我们在写出错误的代码格式时, 给出准确的错误反馈

类型检查的三种方式

(一)通过IDE智能提示

通过IDE智能提示，这种方式我们在IDE中可以直接使用，不需要额外配置。现在很多开发工具都内置了TypeScript的支持，比如我们在Visual Studio Code (VS Code)中如果书写了错误的格式后，会有如下提示：

image.png

image.png

提示我们push方法在number类型上不存在

(二)使用vue-tsc在终端进行提示

如果想要在终端进行报错，就需要依赖vue-tsc工具了，需要单独安装，npm install vue-tsc -D首先说一下vue-tsc是什么,vue-tsc 是对 TypeScript 自身命令行界面 tsc 的一个封装。它的工作方式基本和 tsc 一致。除了TypeScript文件，它还支持Vue的单文件组件。也就是说我们在Vue的单文件组件里面使用ts出了错误，vue-tsc也可以通过终端报错出来。 执行npx vue-tsc，或者在package.json的script里面配置一个脚本命令行，例如

"scripts": {
    "build": "vue-tsc && vite build", // 打包前先进行文件类型检查
    "tsc-check": "vue-tsc" // 仅执行文件类型检查
  },

运行上面的命令后,如果有错误会在控制台直接抛出，还是用上面的例子，如果运行了命令后，结果如下：

image.png

(三)使用 vite-plugin-checker 

如果我们希望在编写代码的时候，就直接在控制台把错误抛出来，而不需要再单独执行类型检查的命令，可以使用这个插件，它是在另一个 worker 线程里实时监听文件的修改，做静态检查的插件。

TypeScript 编译器选项

tsconfig.json 中 compilerOptions 下的一些配置项需要特别注意。

官网中提到了一个需要特别注意的编辑器选项配置，这里我们做一个简单的解读

isolatedModules

esbuild在进行TS转换的时候，它确实比TypeScript官网提供的tsc更快，因当他们在擦除类型信息的时候，tsc是基于项目分析，进行擦除的，而esbuild是单文件分析进行擦除的，单文件分析固然快，但是因为不能准确的分析出当前文件依赖的具体内容，导致esbuild并不能完全擦除类型内容，会导致部分遗留在项目里，产生报错，这也是为什么必须要开启isolatedModules，这个具体的分析看一看以下链接 参考链接

最后

想要更好的使用TS,还得需要单独学习TS的语法和一些常用的项目依赖，这个就得单独说了，这篇文章主要还是说明在vite中如何使用TS

avatar
文章
阅读
粉丝