跳到主要内容

vite和ts的结合

使用ts​

我们基于vite-test，直接把main.js改为main.ts就可以直接使用ts语法了，并且结合编辑器的提示，进行类型检查

image-20221031215518611

然而我们还是可以正确看到控制台的打印

image-20221031215650900

错误提示​

我们希望这种错误可以提示出来，所以安装插件vite-plugin-checker

根据vite-plugin-checker给出的提示完成前两步，启动项目，这时会发现缺少tsconfig.json

tsconfig.json
{
    "compilerOptions": {
        "skipLibCheck": true,//跳过node_module目录的检查
    }
}

这个时候启动项目就会发现在终端显示错误日志了

image-20221031221943198

在页面中也会以弹框的形式展示给开发者

image-20221031222056771

官网给出了解释为什么不引入checker，vite不给我们报错的原因

image-20221031222708747

生产检查​

我们修改build的script命令

"build": "tsc --noEmit && vite build"

这样在打包的前检查到了语法错误，就不会执行打包构建工作了

声明文件​

我们在使用环境变量的时候会给错误提示

image-20221031223650017

import.meta只能在高级的js语法中出现，所以我们修改ts配置

compilerOptions.module: "ESNext"

错误消失，然后我们使用.env就又会提示错误

image-20221031224148221

我们就需要了解声明文件

新建一个叫vite-env.d.ts的文件，vite暴露出一个客户端相关的类型vite/client，以下使用三斜线指令，就相当于import vite/client

vite-env.d.ts
/// <reference types="vite/client" />

image-20221031224720507

然后我们继续向下读我们的配置文件，发现并没有我们写好的配置

image-20221031224911637

我们写一个接口暴露给vite，最终vite是要读这个默认文件的，发现有这个文件后，会把ImportMetaEnv与默认的类型进行合并

vite-env.d.ts
interface ImportMetaEnv {
    readonly ABC_HI:string
}

image-20221031225251791

因为我在配置里写的是匹配ABC_为前缀，所以显示的不是默认VITE_

补充：

为什么我们在vite.config.js里可以使用esmodule:

主要是因为vite在读取配置文件并执行的前一刻会进行替换

模块解析方案​

现在vite也是ts不知道你的模块解析方案是什么，所以在main.ts导入第三方包的时候会给出如下提示：

image-20221101221327496

提示我们把compilerOptions.moduleResolution设置为node，配置模块解析方案为node，就会去node_modules里面去找了，找到就不会有错误提示了

然后这个时候会提示我们没有声明文件

image-20221101222054062

假设我们在安装某个库以后没有ts的类型声明，所以可以需要根据提示去安装包

npm i --save-dev @types/lodash

后续导包也会有提示

image-20221101222536975