Vite 是新一代的前端构建工具，如果对于Vite不了解的朋友，可以移步之前的文章。

在Vite中，Typestript是开箱即用的。

使用方法有两种：

1. 与其他的项目类似，添加 .ts 后缀的文件。例如新建index.ts等文件。
2. lang=“ts”的方式。以在 .vue 文件中为例，具体使用方法如下：

//本例使用Vue3 + Typestript

<script setup lang="ts">
  import { ref } from 'vue'
  defineProps<{ msg: string }>()
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

注意

• Vite并不提供类型检查。

也就是说，如果你有Typescript的语法错误，Vite并不自带检查功能，默认该过程已经被你的IDE（例如你的Visual Studio Code拥有非常多的插件可以处理）或者是构建过程处理。

当然你也可以通过tsc来手动做类型检测，检测方法如下;

//通用检查
tsc --noEmit

//Vue项目也可以
vue-tsc --noEmit

备注：

其中的 --noEmit 的含有是不带有文件输出。

• tsconfig.json文件的配置

使用ts时，你的项目下将会有tsconfig.json的文件，如果你使用了Vite自带的模板来初始化项目，自动生成的文件内容如下

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

如果你未使用，手动建立文件时，Vite +Typescript的必要设置有：

1. "isolatedModules": true ，意味着将每个文件作为单独的模块
2. "useDefineForClassFields": true ，关于此配置的解释较为复杂，一般情形使用true即可。

以上就是Vite中Typescript的使用。

如有疑义，欢迎留言。