开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

TypeScript的出现，让我们使用他开发时通过它的类型系统可以在我们的代码运行之前，可以发现很多常见的错误，相应的也会减少生产环境中的bug率，并且当我们在重构项目时也会提供一定的帮助。

再加上Vue本身就是通过TypeScript开发的，并对TypeScript提供了一等支持，所以其提供的官方库，都自带类型声明文件。

项目相关的配置

通过 create-vue 脚手架我们即可搭建一套基于 vite 的Vue项目，当然TypeScript也是可以直接使用的。

不过有一点需要注意的是，Vite为了保证使用TypeScript时更快的速度，并没有内置TypeScript的类型检查系统，只是会对ypeScript文件执行语法转译。

所以，

• 在开发阶段，我们可以配置自己的IDE来实现对类型错误的即时反馈。

  • VSCode：可以使用官方提供的扩展Volar，提供了Vue单文件组件对TypeScript的支持。TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件。

  • WebStorm：对Vue和TypeScript提供了开箱即用的支持。

• 也可以使用工具vue-tsc进行类型检查和类型声明文件的生成。如果想得到类型错误的即时反馈结果，也可以在以侦听模式运行vue-tsc，或使用 vite-plugin-checker 这样的类型静态检查插件。

tsconfig.json

tsconfig.json文件会在我们通过create-vue脚手架搭建的项目中已经配置好了。但是如果我们想要手动配置它的话，需要注意一些东西：

// tsconfig.json
{
  ...
  "compilerOptions": {
    // isolatedModules需要设置为true，因为vite使用esbuild来转译TypeScript，
    // 所以会受到单文件转译的限制
    "isolatedModules": true, 
    // 在选项式API中，strict设置为true才能对this进行类型检查
    "strict": true,
    // 配置路径解析别名时，需要在paths中在配置一遍
    "paths": {
      "config/*": [
        "app/_config/*"
      ]
    }
  }
  ...
}