面试题：TypeScript 中联合类型与交叉类型在实际前端开发的应用案例分析

Question

假设你正在开发一个前端表单验证组件，对于用户输入的内容，有时候是数字，有时候是字符串，你如何使用 TypeScript 的联合类型来定义这个输入值的类型？另外，如果这个组件既要具备基本的验证功能，又要支持一些自定义的扩展验证功能，你会如何运用交叉类型来实现？请给出具体的代码示例。

Answer 1

定义联合类型

在TypeScript中，我们可以使用|符号来定义联合类型。对于既可以是数字也可以是字符串的输入值，我们可以这样定义：

let inputValue: string | number;
inputValue = "Hello";
inputValue = 123;

使用交叉类型实现基本验证和自定义扩展验证

1. 首先定义基本验证功能的接口：

interface BaseValidation {
    required: boolean;
    minLength?: number;
    maxLength?: number;
    validate(): boolean;
}

2. 然后定义自定义扩展验证功能的接口：

interface CustomValidation {
    customRule: (value: string | number) => boolean;
}

3. 最后，通过交叉类型将两者结合起来：

type FormValidation = BaseValidation & CustomValidation;

function validateForm(input: string | number, validation: FormValidation): boolean {
    if (validation.required && (!input || input.toString().trim() === "")) {
        return false;
    }
    if (typeof input === "string") {
        if (validation.minLength && input.length < validation.minLength) {
            return false;
        }
        if (validation.maxLength && input.length > validation.maxLength) {
            return false;
        }
    }
    return validation.customRule(input);
}

// 示例使用
const validationConfig: FormValidation = {
    required: true,
    minLength: 3,
    customRule: (value) => {
        if (typeof value === "string") {
            return value.includes("a");
        }
        return true;
    },
    validate() {
        // 这里可以实现一些通用的验证逻辑，暂时简单返回true
        return true;
    }
};

const testInput1 = "abc";
const testInput2 = "bc";
console.log(validateForm(testInput1, validationConfig)); // true
console.log(validateForm(testInput2, validationConfig)); // false

上述代码中，BaseValidation接口定义了基本的验证规则，如是否必填、最小长度和最大长度等。CustomValidation接口定义了自定义的验证规则。通过交叉类型FormValidation将两者结合起来，validateForm函数可以同时应用基本验证和自定义验证。