首页 > 解决方案 > Typescript - 输出类型取决于输入类型

问题描述

我有一个检查输入字段有效性的功能。

export const getInputValidity = (inputData:DeepReadonly<InputData> , val:string) => {
    const {length} = val
    if (inputData.type==="select"){
        return val.length<5
    } 
    if (inputData.type==="email"){
        return {
            validEdit: !length || isExp(val, /^[a-zA-Z0-9!#$%&'*+-/=?^_`{|}~."(),:;<>@[\]]+$/), 
            validFinal: length && isExp(val, COMMON_REGEX.email)
        } 
    }
}

我希望输出取决于输入

const validity = getInputValidity(EMAIL_INPUT_DATA, emailVal )

所以如果EMAIL_INPUT_DATA.type==="email"我想要有效性的类型将是

{
   validEdit: boolean
   validFinal: boolean
}

可能吗?当前有效性键入为

const validity: true | {
    readonly validEdit: boolean;
    readonly validFinal: boolean | 0;
    readonly validLength?: undefined;
    readonly validChars?: undefined;
} | {
    readonly validLength: boolean;
    readonly validChars: boolean;
    readonly validEdit?: undefined;
    readonly validFinal?: undefined;
}

我知道这可以通过键入 getInputValidity 作为函数来完成,但是可以从实现中推断出来吗?

标签: typescripttypescript-typings

解决方案


您可以使用函数重载来执行此操作:

const isExp = (s: String, r: RegExp) => true;

interface IValidityReturn {
  validEdit: boolean;
  validFinal: boolean;
}

function getInputValidity(inputData: { type: 'select' }, val: string): boolean;
function getInputValidity(inputData: { type: 'select' }, val: string): boolean;
function getInputValidity(inputData: { type: 'select' | 'email' }, val: string): boolean | IValidityReturn {
    const { length } = val

    if (inputData.type==="select"){
        return val.length<5
    }

    if (inputData.type==="email"){
        return {
            validEdit: !length || isExp(val, /^[a-zA-Z0-9!#$%&'*+-/=?^_`{|}~."(),:;<>@[\]]+$/), 
            validFinal: !!length && isExp(val, /a/g),
        } 
    }

    // only to make example work:
    return {
      validEdit: false,
      validFinal: false,
    }
}

为了示例的目的,将其中一些部分拼凑在一起,但似乎这应该可以解决问题。


推荐阅读