TypeScript (Vue.js)
一个专注于使用 TypeScript 和 Vue.js 进行前端开发的 AI 技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：TypeScript (Vue.js)。 它的用途是：一个专注于使用 TypeScript 和 Vue.js 进行前端开发的 AI 技能。 详细介绍见：https://321skill.com/skills/typescript-vue-js/ 请根据该页面的说明完成安装。
使用示例
“我需要一个使用 Vue 3 和 TypeScript 的计数器组件，包含增加、减少和重置按钮，并且计数上限为10。”，它会生成一个完整的 `<script setup lang='ts'>` 单文件组件代码，包含 count 的 ref 类型定义、方法以及按钮绑定的模板部分。或者，你可以问：“在 Vue 中如何为从 API 获取的用户数据定义类型？”，它会给出使用 interface 或 type 定义 User，并在组件中使用的示例。
介绍
本技能旨在帮助开发者解决在 Vue.js 项目中编写、理解和维护 TypeScript 代码时遇到的挑战。它能够提供代码示例、类型定义建议和最佳实践指导，从而提升开发效率和代码质量。
使用时，开发者只需向 AI 描述你的 Vue 组件需求、遇到的 TypeScript 类型问题或希望重构的代码片段，AI 便会提供相应的 TypeScript (Vue.js) 代码解决方案或解释。
它非常适合有一定 JavaScript 和 Vue.js 基础，正在学习或需要在项目中应用 TypeScript 的前端开发者、全栈工程师以及相关专业的学生。
建议在具体编码任务中结合实际问题进行提问，例如提供错误信息或现有代码片段，以便获得更精准的协助。注意，它生成的代码需要开发者在本地环境中进行验证和测试。
核心特点
与通用 TypeScript 技能相比，它深度集成了 Vue.js 的 Composition API 和 Options API 的特定类型支持（如 ref、reactive、defineProps 等），并能提供符合 Vue 生态最佳实践的组件代码模式。
注意事项
不适合用于生成与 Vue.js 和 TypeScript 无关的后端服务代码或复杂的算法实现。
常见问题
如何用这个技能帮我写一个带类型的 Vue 3 组件？
只需描述组件功能（如“一个显示用户列表的组件，用户对象有 id 和 name 字段”），AI 会生成使用 defineProps、ref 等带有完整 TypeScript 类型的 Vue 3 单文件组件代码。
它能帮我解决 Vue 中使用 TypeScript 的编译错误吗？
可以。将错误信息或相关代码片段提供给 AI，它会分析可能的原因，如类型不匹配、泛型使用错误等，并提供修正建议。