Vue3 Script Setup 与 TypeScript 的搭配方式

Vue3 在 2021 年开始真正进入团队视野时，很多项目都会顺手把 Script Setup 和 TypeScript 一起引进来。原因也很现实: 写法更短，类型提示更好，组件逻辑组织起来也更自然。

但真正落到业务里之后，大家很快会发现一个问题: 语法是更省了，代码不一定自动更清晰。

Script Setup 的优势是减少样板代码

以前写组件时，很多内容都要在 export default 里回填。Script Setup 的价值就是把这些样板去掉，让变量、方法和引入关系更直接。

这对中后台团队尤其友好，因为页面组件往往已经够复杂了，少一层样板包裹，阅读成本会明显下降。

TypeScript 更适合补齐边界而不是追求满分

我不太建议团队刚切 Vue3 就把所有类型写到极致。更实用的顺序通常是:

• 先把 props、emit、接口返回值这些边界补齐
• 再逐步给 composable 和复杂状态加类型

这样投入和收益比较平衡，也不会因为类型压力让大家对新写法产生抵触。

组件通信的类型最值得先收口

如果父子组件之间传参和事件定义不清楚，页面越大越容易出问题。Script Setup 配合 TypeScript 时，我最看重的反而不是“所有局部变量都推断正确”，而是 props 和 emit 能不能稳定表达组件契约。

这一步一旦做扎实，重构组件会安心很多。

别让泛型和工具类型把组件可读性吃掉

TypeScript 很强，但 Vue 组件本身已经有模板、样式、脚本三层认知负担。要是再为了追求形式上的“高级”，在一个普通业务组件里堆很多复杂泛型，可读性反而会迅速下降。

对团队来说，可维护的类型系统通常比炫技型类型系统更有价值。

小结

Vue3 的 Script Setup 和 TypeScript 组合，真正带来的不是“更潮的语法”，而是更短的组件样板和更清晰的边界表达。只要先把组件契约和业务状态类型收好，这套搭配在 2021 年已经足够实用了。