typescript联合类型使用姿势

使用背景

新项目使用vue3+ts开发，之前一直是写js，所以在完成工作之余，会有意识的去把类型体操做好点，避免写成了anyscript。在开发过程中遇到一个列表数据中存在两种不同结构的对象数据

data = [
  {boxName: xx, type: xx},
  {justify: xx, item: xx}
]

首次处理

最开始碰到这个的时候，为了快速完成需求，于是定义了一个包容两种数据结构的接口

interface line {
  justify?: string;
  item?: string;
  boxName?: string;
  type?: string;
}

虽然能解决问题，但是这样写的坏处是不能精细化推导，eslint检测的时候还是会有很多红线，并且不能区分具体是哪种类型的数据结构，属于体验很差，完全没有利用好ts的类型体操

优化

于是在网上查询后就看到了联合类型，最终解决了这个问题

interface box {
  boxName: string;
  type: string;
}
interface lineData {
  justify: string;
  item: string
}
type line = lineData | box

这样做的好处就是可以根据实际情况利用as关键字来精准区分不同情况下数据的interface来帮助ts来进行类型推导。