type接口有什么用:统一数据类型校验
type接口有什么用,在TypeScript中它用来定义自定义数据结构,约束变量、函数入参、返回值的字段名称、数据类型,支持基础类型、嵌套对象、可选属性、只读属性,适合前后端约定返回格式、组件传参、接口请求体定义,该能力只在编译阶段生效,运行环境不会保留type代码,不能用于判断运行时真实数据类型,如果你需要做运行时校验,要搭配zod、joi这类校验库,不能单独依靠type。
type接口做类型约束
你可以用type给一组固定字段起一个类型别名,后续多处复用这个结构,不用重复写一长串对象定义。定义之后,编辑器会自动提示字段,写错字段名、类型不匹配时,TS编译阶段直接抛出提示,减少类型错误流入线上。比如后端返回用户信息包含id、name、age,你用typeUser={id:number,name:string,age?:number},age加问号代表可选字段,不传也不会报错。
可复用,减少重复代码。
type接口区分和interface的差异
| 对比项 | type | interface |
|---|---|---|
| 扩展方式 | 使用交叉运算符& | 使用extends关键字 |
| 合并特性 | 不支持同名自动合并 | 同名声明自动合并 |
| 适用范围 | 对象、联合类型、元组 | 主要用于对象、类 |
联合类型是type独有的常用场景,你可以把多个类型合并成一个,typeStatus='success'|'fail'|'loading',这种写法interface无法实现。你在写状态枚举、多种返回值类型的时候优先选type,单纯定义对象结构、需要多次扩展合并时,interface会更顺手。
type接口用于函数和组件传参
组件开发里,props是高频使用场景,你提前用type定义props结构,父组件传参时,类型不符合就会提示,避免传错参数。函数同样可以绑定type作为入参和返回类型,比如请求函数接收指定结构的查询参数,返回约定好的响应体,团队协作时,新人打开代码就能看懂数据应该长什么样,不用反复翻看接口文档。
type只做静态检查,不生成JS代码。
type接口的边界限制
浏览器、Node.js等JS运行环境识别不到type,打包之后type相关代码会被直接擦除,后端返回脏数据、恶意修改的数据,type拦不住。举个例子,后端接口本该返回数字id,实际返回字符串,type不会抛出异常,这就是它的局限。这种场景下,你必须额外写运行时校验逻辑,不能只依赖TypeScript静态类型。
泛型可以和type搭配,写出通用类型,typeList
业务项目里,大多数简单对象、联合类型、工具类型,都优先用type,只有需要声明合并、面向类实现的场景,才切换为interface。
