1. 问题描述

环境：WebStorm 2023.1、TypeScript、Vite

报错信息如下：

【报错原因】：typescript 只能理解 .ts 文件，无法理解 .vue文件。

2. 解决方案一：VSCode + Volar（官方推荐）

参考 Vue 官方文档 与 TypeScript 的 Github Issues。

强烈推荐 Visual Studio Code (VSCode)，因为它对 TypeScript 有着很好的内置支持。

• Volar 是官方的 VSCode 扩展，提供了 Vue 单文件组件中的 TypeScript 支持，还伴随着一些其他非常棒的特性。

  Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。

• TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件。

因人而异吧，一直在 JetBrains 生态中，所以还是觉着 WebStorm 比较好用，哈哈哈！！！

3. 解决方案二：WebStorm 2023.2+ （官方推荐）

官方文档：https://cn.vuejs.org/guide/typescript/overview.html#ide-support

WebStorm 对 TypeScript 和 Vue 也都提供了开箱即用的支持。其他的 JetBrains IDE 也同样可以通过一个免费插件支持。

从 2023.2 版开始，WebStorm 和 Vue 插件内置了对 Vue 语言服务器的支持。你可以在设置 > 语言和框架 > TypeScript > Vue 下，将 Vue 服务设置为在所有 TypeScript 版本上使用 Volar 集成。默认情况下，Volar 将用于 TypeScript 5.0 及更高版本。

4. 解决方案三：禁用严格类型检查选项（不推荐）

这种方式治标不治本，不建议使用。

{
  "compilerOptions": {
  	"strict": false, // 禁用严格类型检查选项
  }
}

strict 是一个 TypeScript 编译选项，它启用一组严格的类型检查选项，帮助开发者更早地捕获潜在的错误，并提高代码质量。

strict 为 true 时相当于直接启用下面的选项：

• strictNullChecks：当启用时，TypeScript 将 null 和 undefined 视为只能分配给其自身和 any 类型的类型。这有助于避免许多常见的错误。
• noImplicitAny：当启用时，TypeScript 将不允许使用隐式的 any 类型。如果无法推断出类型，必须明确指定类型。
• noImplicitThis：当启用时，TypeScript 将检查函数的 this 参数的类型，并要求它不是 any 类型。
• alwaysStrict：当启用时，TypeScript 将在生成的 JavaScript 代码中始终添加 'use strict'; ，以强制执行严格模式。

5. 解决方案四：修改 vite-env.d.ts 文件

如果没有则新建，旧版本的文件名为：env.d.ts。

参考 Github Issues。

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

6. 推荐 VSCode + Volar 或 WebStorm 方案