Vue.js组件props自动类型检查需定义TypeScript接口并传给defineProps，配合withDefaults设默认值，确保tsconfig.json包含.vue文件且启用严格模式，父组件调用时可获反向类型提示。
Vue.js 组件属性的自动类型检查，核心在于把 props 的结构用 TypeScript 接口明确定义，并让 Vue 编译器和 IDE 能识别、校验、推导它。不是加了 lang="ts" 就自动生效，关键在接口声明方式与编译配置协同。
定义 Props 接口并传给 defineProps
在 <script setup lang="ts"> 中，先写接口，再用泛型调用 defineProps：
- 声明清晰结构：比如
interface ButtonProps { label: string; size?: 'sm' | 'md' | 'lg'; disabled?: boolean } - 传入泛型：写成
const props = defineProps<ButtonProps>()，此时props.label就是字符串，props.size只能是那三个字面量之一 - IDE 会实时提示可用属性、类型错误（如
props.count未定义）、以及可选属性是否缺失
处理默认值需配合 withDefaults
可选属性设默认值不能只靠接口，必须显式调用 withDefaults，否则类型系统仍认为该属性可能为 undefined：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 写法：
const props = withDefaults(defineProps<ButtonProps>(), { size: 'md', disabled: false }) - 这样
props.size类型就从'sm' | 'md' | 'lg' | undefined变成确定的'sm' | 'md' | 'lg' - 注意：默认值必须与接口中声明的类型完全一致，否则 TS 报错
确保 tsconfig.json 支持 .vue 文件类型解析
如果类型检查不生效，大概率是编译配置没覆盖单文件组件：
立即学习“前端免费学习笔记（深入）”；
-
"include"字段必须包含"src/**/*.vue"，否则 TS 不扫描.vue文件里的script块 - 推荐启用严格模式：
"strict": true，否则部分隐式类型（如未声明的 props）可能被忽略 -
"moduleResolution": "node"是必需的，否则无法正确解析 Vue 和类型声明文件
父组件传参时获得反向类型提示
当子组件 props 类型定义完整后，父组件使用时也能享受类型保障：
- 写
<MyButton label="提交" size="lg" />，IDE 会校验size是否合法，拼写错误（如szie）直接标红 - 若传入对象或函数，接口里定义好类型后，参数签名也会被推导，比如
on-click对应的事件处理器参数类型自动匹配 - 配合 Volar 插件，悬停查看 props 文档、跳转到接口定义，开发体验接近原生 TS 项目
