当前位置：首页 > article >正文

最佳实践：如何实现函数参数之间的TS类型相依赖和自动推断

article 2024/11/9 2:12:16

引入

最近在开发一款极致优雅的前端状态管理库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> = ComputedGetter<boolean> | AsyncComputedGetter<boolean>来约束的validate的本意是：