Vue + TypeScript 开发中，严格类型是保障组件健壮性的基础，需为 Props（用接口或泛型定义结构、withDefaults 设默认值）、Emits（用事件重载语法声明签名）、ref/reactive/computed（显式泛型或接口标注）等响应式声明主动标注类型，并启用 tsconfig.json 的 strict 模式确保类型安全。
Vue + TypeScript 开发中，严格类型不是可选项，而是保障组件健壮性的基础。关键在于从 Props、Emits 到 ref、reactive、computed，每处响应式声明都需显式标注类型，避免依赖隐式推导带来的精度丢失。
Props 必须用接口或字面量明确结构
不要靠运行时 type 选项兜底，而要用 TypeScript 接口定义契约。复杂对象优先抽离为 interface，简单场景可用泛型字面量。
- 定义 UserProfile 接口后，通过
defineProps()声明 - 可选属性加
?，联合字面量（如'read' | 'write'）比 string 更安全 - 含函数的 Prop 需用
PropType：例如callback: { type: Function as PropType void>, required: true } - 默认值用
withDefaults包裹，类型仍由接口约束，不会破坏类型完整性
Emits 要声明事件名与 payload 的完整签名
父组件监听时需要准确知道子组件 emit 了什么、参数是什么类型，否则解构或调用会出错。
- 使用
defineEmits的事件重载语法：const emit = defineEmits() - 触发时必须严格匹配签名：
emit('submit', 'hello')合法，emit('submit', 123)类型报错 - 父组件中
@submit="handler"的handler参数自动推导为string，无需手动注解
ref / reactive / computed 必须主动标注类型
Vue 的响应式 API 在无泛型时会尝试推导，但嵌套对象、空数组、异步初始值等场景极易推导失败或退化为 any。
-
ref显式传泛型：const count = ref、(0) const items = ref([]) -
reactive推荐配合接口：const state = reactive({ name: '', age: 0 }) -
computed返回值类型由 getter 函数返回值决定，但复杂逻辑建议显式标注：const total = computed(() => list.value.reduce((a, b) => a + b.price, 0)) - 避免
ref(null)这类模糊写法，改用ref(null)
tsconfig.json 必须启用 strict 模式
没有严格模式，再精细的类型声明也形同虚设。它强制你处理 null、undefined、隐式 any 等常见隐患。
- 确保
"strict": true，它等价于同时开启noImplicitAny、strictNullChecks、strictFunctionTypes等七项检查 -
"include"中加入"src/**/*.vue"，让 Vue 单文件组件参与类型校验 -
"moduleResolution": "node"和"target": "ESNext"保证模块解析与目标环境一致 - 搭配
shims-vue.d.ts声明文件，使.vue文件能被 TypeScript 正确识别
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
