Vue Academy · 课时

在 Vue 项目中配置 TypeScript

vite.config.ts、tsconfig.json、vue-tsc、SFC 中的 lang='ts'，以及 IDE 的 TypeScript 支持

在 Vue 项目中配置 TypeScript 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

Vue 3 中的 TypeScript

Vue 3 使用 TypeScript 重写，因此提供了出色的类型支持。配置完善的项目可以在编译时发现错误，并为 .vue 文件提供优秀的编辑器自动补全功能。

使用 TS 搭建项目骨架

最简单的起点是 create-vue。它会询问您是否要添加 TypeScript，并配置好 tsconfig.json、vue-tsc 以及正确的工具链。

npm create vue@latest
# select "Add TypeScript? Yes"

tsconfig.json 基础

tsconfig.json 控制编译过程。要捕获错误，最重要的设置是 严格模式。

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

严格模式为何重要

strict: true 会启用 strictNullChecks、noImplicitAny 等功能。它会强制您处理 null/undefined，并阻止未声明类型的值混入代码。

路径别名

@/ 别名映射到您的 src 文件夹，因此无论文件嵌套多深，导入语句都能保持简洁。请在 tsconfig.json 和打包工具中分别进行配置。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

使用别名

现在，导入语句可以从项目根目录引用模块，而不必使用相对路径 ../../ 链。

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

在 SFC 中使用 TypeScript

要在单文件组件中使用 TypeScript，请将 lang="ts" 添加到 script 标签中。使用 <script setup> 后，您还可以使用带类型的宏。

<script setup lang="ts">
const count: number = 0
</script>

检查 SFC 类型

常规的 tsc 编译器无法理解 .vue 文件。Vue 提供了 vue-tsc，这是一个可以同时检查模板和脚本类型的封装器。

vue-tsc --noEmit

添加检查脚本

在 package.json 中添加一个脚本，这样 CI 和您本人就能通过一条命令检查类型。

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Volar 编辑器支持

Volar（Vue - 官方）VS Code 扩展可以在 .vue 文件中提供 TypeScript 智能功能：自动补全、转到定义以及模板类型错误提示。请禁用旧版 Vetur，以免发生冲突。

接管模式

Volar 可以运行在接管模式下，取代内置的 TS 扩展，从而同时处理 .ts 和 .vue 文件。这会改善大型项目中的性能和一致性。

快速检查

测试您对 TypeScript 配置的了解。

总结

您已经在 Vue 中配置好了 TypeScript：

在 tsconfig.json 中启用严格模式，以获得最严格的检查。
将 @/* 路径别名配置为指向 src。
为 SFC 脚本添加 lang="ts"。
使用 vue-tsc --noEmit 检查类型，并在 VS Code 中使用 Volar 扩展。

常见问题解答

「在 Vue 项目中配置 TypeScript」课时是免费的吗？

是的 — 「在 Vue 项目中配置 TypeScript」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「在 Vue 项目中配置 TypeScript」这节课中我会学到什么？

vite.config.ts、tsconfig.json、vue-tsc、SFC 中的 lang='ts'，以及 IDE 的 TypeScript 支持你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「在 Vue 项目中配置 TypeScript」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

在 Vue 项目中配置 TypeScript
使用 defineProps/defineEmits 定义带类型的 Props 与 Emits
为组合式函数与 Ref 添加类型
泛型 Vue 组件

← 返回 Vue Academy