TypeScript 与 React、Vue、Angular 等主流框架如何配合使用？

1. 与 React 配合

• React 18+ 对 TypeScript 有原生支持，新建项目时可选择 TypeScript 模板
• 组件 Props 使用 interface 定义，替代 PropTypes 运行时验证
• useState、useReducer、useContext 等 Hook 的状态类型可以通过泛型显式指定
• 自定义 Hook 可以定义返回类型，提升复用性和类型安全
• 事件处理函数（如 onClick、onChange）的参数类型由 React 提供，避免手动查找类型
• 使用 React.FC<Props> 或函数声明配合返回类型定义组件

2. 与 Vue 配合

• Vue 3 使用 TypeScript 重写，对 TypeScript 有内置支持
• 使用 defineProps<T>() 定义类型化的 Props，defineEmits<T>() 定义类型化的事件
• Composition API 与 TypeScript 配合良好，ref、computed、watch 等函数提供优秀的类型推断
• 使用 vue-tsc 进行类型检查，支持单文件组件（.vue）
• Pinia 状态管理库提供完整的类型支持

3. 与 Angular 配合

• Angular 从底层使用 TypeScript 构建，是原生支持 TypeScript 的框架
• 组件、服务、模块、管道等均使用 TypeScript 编写
• 依赖注入系统通过类型安全的方式管理服务依赖
• 装饰器（@Component、@Injectable、@Module）是 TypeScript 特性，Angular 深度使用
• RxJS Observable 的类型推断和链式操作在 TypeScript 中获得完整支持
• 使用 Angular CLI 创建项目时，TypeScript 默认已配置好

4. 框架集成的一般原则

• 优先使用框架提供的类型定义和工具，如 React.ComponentProps、Vue 的 ComponentPublicInstance
• 为框架特定的模式定义类型，如 React 的事件类型、Vue 的组件实例类型
• 使用泛型增强组件的可复用性，如通用的列表组件、表单组件
• 在组件边界处进行类型检查，确保传入的数据符合预期