Typescript中根据某个字段判断其他字段是否必传

背景

我在使用 Typescript 的时候遇到过这样的一个问题。我有这样的一个组件

前面的两个搜索框是根据参数判断是否要隐藏的&＃xff0c;Typescript 的类型定义就是这样的

type BasicItem &＃61; {
label: string
value: number
}
type BrandItem &＃61; BasicItem & {}
type PruductionItem &＃61; BasicItem & {}
type HeaderPropsType &＃61; {
hideSearch?: boolean
brandOptions: []
productionOptions: []
}
function Header(props: HeaderPropsType) {}


如果这样写的话就不能满足要求&＃xff0c;我希望是当 hideSearch &＃61; true 的时候&＃xff0c;brandOptions 和 productionOptions 才为必传属性&＃xff0c;当他为 false 或者不传的时候&＃xff0c;是非必传属性。

解决方法

1. 添加默认值

这个应该是最简单的方法了&＃xff0c;如果你不传的话&＃xff0c;我给你添加一个空数组不就完事了吗&＃xff1f;也不会因为不传而导致在 undefined 上取方法属性而报错

type HeaderPropsType &＃61; {
hideSearch?: boolean
brandOptions?: []
productionOptions?: []
}
function Header({ hideSearch, brandOptions&＃61;[], productionOptions&＃61;[] }: HeaderPropsType) {}


2. 函数重载

如果是普通函数的话&＃xff0c;可以是用函数重载的方式&＃xff0c;大致这样&＃xff0c;看起来好像挺复杂的&＃xff0c;思想还是比较简单的&＃xff0c;就是相当于我定义了几种不同情况的函数的参数和返回值而已。但是这种就不适合用在 React 函数组件上了
可以点击这里在线体验一下

type BasicItem &＃61; {
label: string
value: number
}
type BrandItem &＃61; BasicItem & {}
type ProductionItem &＃61; BasicItem & {}
type RequiredType &＃61; {
brandOptions: BrandItem[]
productionOptions: ProductionItem[]
}
type OptionalType &＃61; Partial<RequiredType>
type RequiredHideSearch &＃61; { hideSearch: true}
type OptionalHideSearch &＃61; { hideSearch?: false}
// 函数重载需要紧跟着实现
function test(props: OptionalHideSearch & RequiredType): void
function test(props: RequiredHideSearch & OptionalType): void
function test(props) {
return props
}
// 这样调用都是可以的
test({ hideSearch: true })
test({ brandOptions: [], productionOptions: [] })
test({ hideSearch: false, brandOptions: [], productionOptions: [] })


3. 类型运算

这是我比较喜欢的一种方式&＃xff0c;当然用默认值是最简单的&＃xff0c;也不用去定义那么多类型&＃xff0c;但是我总觉得写 typescript&＃xff0c;写了那么久&＃xff0c;好像就只会这种简单的类型添加&＃xff0c;看源码的时候&＃xff0c;也很难看懂人家的类型为啥这么写。

type BasicProps &＃61; {
hideSearch?: boolean
}
// 如果 hideSearch &＃61; true 就使用 T&＃xff08;就是BasicProps&＃xff09;
// 否则则使用 T & OptionListType
// 就是一个简单的三元表达式
export type HeaderProps<T> &＃61; T extends { hideSearch: true }
? T
: T & OptionListType
export type HeaderPropsType<T> &＃61; T extends BasicProps ? HeaderProps<T> : {} // 这里最后的 {} 也可以换成别的类型
function Header<T extends BasicProps>({hideSearch &＃61; false}: HeaderPropsType<T>) {}
// 使用组件的时候&＃xff0c;就可以这样使用啦&＃xff0c;也会有类型提示
<Header brandOpts&＃61;{[]} productOpts&＃61;{[]} />
<Header hideSearch&＃61;{true} />


其实这里也体现了 Typescript 中&＃xff0c;interface 和 type 的一个区别&＃xff0c;interface 就不能进行这些三元运算符的操作

总结

其实这个问题我也是问别人的&＃xff0c;他们都说我搞那么麻烦干嘛&＃xff0c;直接默认值不就搞定了吗&＃xff1f;

但是我总觉得多总结总结方法&＃xff0c;可以在以后开发的时候&＃xff0c;思路多一些&＃xff0c;不会只握着手中仅有的知识&＃xff0c;止步不前。多探索探索嘛&＃xff0c;不然总觉得自己在搬砖&＃xff0c;多回头看看以前写的代码&＃xff0c;有机会的话&＃xff0c;可以总结或者优化一些&＃xff0c;这样就不会觉得自己整天都在干相同的事情啦