如何解决TypeScript中Kushki表单验证的联合类型报错？

你编写的Kushki表单验证函数中，当访问kushkiData.firstName时出现TypeScript错误：

类型“KushkiCashType | KushkiTransferType”上不存在属性“firstName”。
  类型“KushkiTransferType”上不存在属性“firstName”。ts(2339)

原因是TypeScript无法通过type参数的判断自动将kushkiData的联合类型收窄到对应的具体类型，下面是几种可行的修复方案：

方案一：类型断言（Type Assertion） #

直接在判断type为CASH时，将kushkiData断言为KushkiCashType，明确告诉TypeScript此时的类型：

export const validateKushkiForm = (type: KUSHKI_METHODS, kushkiData: KushkiCashType | KushkiTransferType) => {
    const errors: string[] = [];

    if (type === KUSHKI_METHODS.CASH) {
        // 断言为KushkiCashType
        const cashData = kushkiData as KushkiCashType;
        !cashData.firstName && errors.push('firstName');
        !cashData.lastName && errors.push('lastName');
        !cashData.documentNumber && errors.push('documentNumber');
    } else if (type === KUSHKI_METHODS.TRANSFER) {
        const transferData = kushkiData as KushkiTransferType;
        !transferData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

这种方式简单直接，适合在小范围逻辑中使用。

方案二：自定义类型守卫（Custom Type Guard） #

编写一个类型守卫函数，让TypeScript能自动识别kushkiData的具体类型，提升代码的严谨性：

// 自定义类型守卫，判断是否为KushkiCashType
function isKushkiCash(data: KushkiCashType | KushkiTransferType): data is KushkiCashType {
    return (data as KushkiCashType).firstName !== undefined;
}

export const validateKushkiForm = (type: KUSHKI_METHODS, kushkiData: KushkiCashType | KushkiTransferType) => {
    const errors: string[] = [];

    // 结合type判断和类型守卫，自动收窄类型
    if (type === KUSHKI_METHODS.CASH && isKushkiCash(kushkiData)) {
        !kushkiData.firstName && errors.push('firstName');
        !kushkiData.lastName && errors.push('lastName');
        !kushkiData.documentNumber && errors.push('documentNumber');
    } else if (type === KUSHKI_METHODS.TRANSFER) {
        !kushkiData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

类型守卫适合需要多次对该联合类型进行判断的场景，能减少重复断言的代码。

方案三：函数重载（Function Overloads） #

通过函数重载，让调用方在传入参数时就必须保证type和kushkiData的类型匹配，从根源避免类型不匹配的问题：

// 定义函数重载签名
export function validateKushkiForm(type: KUSHKI_METHODS.CASH, kushkiData: KushkiCashType): string[];
export function validateKushkiForm(type: KUSHKI_METHODS.TRANSFER, kushkiData: KushkiTransferType): string[];

// 实现函数
export function validateKushkiForm(type: KUSHKI_METHODS, kushkiData: KushkiCashType | KushkiTransferType): string[] {
    const errors: string[] = [];

    if (type === KUSHKI_METHODS.CASH) {
        const cashData = kushkiData as KushkiCashType;
        !cashData.firstName && errors.push('firstName');
        !cashData.lastName && errors.push('lastName');
        !cashData.documentNumber && errors.push('documentNumber');
    } else if (type === KUSHKI_METHODS.TRANSFER) {
        const transferData = kushkiData as KushkiTransferType;
        !transferData.documentNumber && errors.push('documentNumber');
    }

    return errors;
};

这种方式能在编译阶段就阻止调用方传入不匹配的参数，提升代码的健壮性。

内容的提问来源于stack exchange，提问作者Tisachniy