引入
最近在开发一款极致优雅的前端状态管理库AutoStore时碰到这样一个问题。
拟实现Field组件，该组件相关类型简化代码如下：
type Field = (props:{
validate,
render:(props:{
value,
isValid
})
})
该组件，具有validate和render两个属性:
- 其中
validate是校验函数，可以同步校验函数或者异步校验函数 - 重点是
render渲染函数的props.isValid的类型，则是动态的，我们希望其依赖于字段的validate属性。- 当
validate是同步校验函数时，render.props.isValid=<boolean> - 当
validate是异步校验函数时，render.props.isValid={value:boolean,loading:boolean}
- 当
问题很明了，就是函数中的一个参数的类型依赖于另外一个参数的类型。
下面，我详细分析如何实现以及介绍踩过的坑，马上开始。
路坑实现过程
第1步：声明validate校验参数的类型
首先，我们声明validate校验参数的类型：
type ComputedGetter<Value=any> = ()=>Value
type AsyncComputedGetter<Value=any> = ()=>Promise<Value>
ComputedGetter和AsyncComputedGetter分别代码同步校验和异步校验函数。
第2步：根据不同校验方式转换返回值
接着，编写一个PickResult类型，根据同步校验和异步校验函数返回不同的类型。
type PickResult<T> = T extends AsyncComputedGetter<infer X> ? {value:X,loading:boolean} :
(T extends ComputedGetter<infer X> ? X :
T
)
如果是同步校验校验则返回boolean，如果是异步校验就返回{value:X,loading:boolean}
第3步：编写Field组件
然后编写Field组件声明
function Field<
Value = string,
Validate extends ComputedGetter<boolean> | AsyncComputedGetter<boolean> = ComputedGetter<boolean> | AsyncComputedGetter<boolean>
>(props:{
validate:Validate,
render:(props:{
value:Value,
isValid: PickResult<Validate>
})=>React.ReactNode
}
){
return <>{props.render({
value:"AutoStore"
} as any) }</>
}
Field组件提供了两个Value和Validate两个泛型参数validate属性可以是同步或异步校验函数- 重点：
render属性的props.isValid是由Validate泛型参数决定的。
第4步：渲染Field组件
最后让我们来使用渲染Field组件
- **同步校验参数时 **
<Field
validate = {()=>true}
render={({value,isValid}) =>{
return <>{ isValid ?
<span>{value}</span>
: <span>No</span>
}</>
}}
/>
</>
以上validate = {()=>true}，所以isValid被自动推导为boolean
- **异步校验参数时 **
()=>{
return <>
<Field
validate = {async ()=>true}
render={({value,isValid}) =>{
return <>{ isValid.value ?
<span>{value}</span>
: <span>No</span>
}</>
}}
/>
</>
}
以上validate = {async ()=>true}，所以isValid被自动推导为{value:boolean,loading:boolean}
第5步：开始踩坑
以上我们编写的组件，已经实现了能根据validate的属性输入来自动推断render.props的类型。
render.props.isValid的类型是根据validate动态推断而来的。
看起来很完美是不是？
别急，让我们为泛型value指定一个类型。
()=>{
<>
<Field<number>
validate = {()=>true}
render={({value,isValid}) =>{
return <>{ isValid ?
<span>{value}</span>
: <span>No</span>
}</>
}}
/>
</>
}
- 以上我们为
value指定了泛型number，然后我们马上就发现isValid被推断为:
boolean | {
value: boolean;
loading: boolean;
}
自动推断不生效了？ 为什么会这样？
所以，如果我们不指定任何泛型参数，则自动推断生效，如果指定则失效。
问题就在这里：
在Typescript里面，当不指定任何泛型参数时，Validate是根据输入自动推断的，而一旦指定了任何泛型参数，则泛型匹配就开始，而以上我们为Validate指定了一个默认值。
所以，Typescript就按指定的默认值来为Validate赋值，而不是根据动态输入，就相当于自动推断失效了.
那么如果我们不为validate指定默认类型行不行呢？当然可以，但是显得很烦琐。
第6步：解决方案
我们想实现的是：
- 为
validate指定类型约束 - 能根据动态输入自动推断
显然，上述方案存在问题，并不理想。
问题的核心在于Typescript对是否指定泛型参数时的自动推规则
- 当没有指定泛形参数时，会进行自动推断。
- 当指定了泛形参数时, 则根据使用泛型参数声明，不进行动态的自动推断
知道了此规则，我们就有了如下的解决方案。
使用函数重载来解决此问题
// 同步校验
function Field<Value = string,Validate extends ComputedGetter<boolean> = ComputedGetter<boolean>>(
props:{validate:Validate,render:(props:{value:Value,isValid: PickResult<Validate>})=>React.ReactNode}):any
// 异步校验
function Field<Value = string,Validate extends AsyncComputedGetter<boolean> = AsyncComputedGetter<boolean>>(
props:{validate:Validate,render:(props:{value:Value,isValid: PickResult<Validate>})=>React.ReactNode}):any
function Field<Value,Validate>(props:{validate:Validate,render:(props:{value:Value,isValid: PickResult<Validate>})=>React.ReactNode}):any{
return <>{props.render({
value:"AutoStore"
} as any) }</>
}
简单说，就是将Validate extends ComputedGetter<boolean> | AsyncComputedGetter<boolean>拆解为两个重载即可。
小结
一开始使用Validate extends ComputedGetter<boolean> | AsyncComputedGetter<boolean> = ComputedGetter<boolean> | AsyncComputedGetter<boolean>来约束的validate的本意是：
- 为
Validate指定ComputedGetter<boolean> | AsyncComputedGetter<boolean>约束 - 然后可以根据组件的
validate参数来自动推断，让其他属性也可以自动推断。
但是由于Typescript对是否指定泛型参数时的自动推规则的问题，需要采用函数重载方式才可以实现此功能。
至此，我们完美地实现以上功能。
顺推一下，AutoStore是新进出炉的一款响应式状态管理库，设计精良，功能强大，大家可以看看。
开源推荐
以下是我的一大波开源项目推荐:
