面试题：TypeScript交叉类型在表单验证中的应用

Question

假设你正在开发一个用户注册表单，需要对用户名、密码等字段进行验证。请用TypeScript交叉类型来定义表单数据的类型，并实现简单的验证逻辑，说明交叉类型在此场景中的优势。

Answer 1

1. 定义表单数据类型并实现验证逻辑

// 使用交叉类型定义表单数据类型
type UserName = {
    username: string;
    validateUsername: () => boolean;
};

type Password = {
    password: string;
    validatePassword: () => boolean;
};

type UserRegistrationForm = UserName & Password;

// 实现验证逻辑
function createUserRegistrationForm(username: string, password: string): UserRegistrationForm {
    const validateUsername = (): boolean => {
        return username.length >= 3 && username.length <= 20;
    };

    const validatePassword = (): boolean => {
        return password.length >= 6 && password.includes('@');
    };

    return {
        username,
        password,
        validateUsername,
        validatePassword
    };
}

// 使用示例
const formData = createUserRegistrationForm('testUser', 'test@password');
console.log('用户名验证:', formData.validateUsername());
console.log('密码验证:', formData.validatePassword());

2. 交叉类型在此场景中的优势

• 清晰的逻辑分离：可以将不同字段相关的类型和验证逻辑分开定义，然后通过交叉类型合并在一起，使得代码结构更清晰，每个部分的职责更明确。例如，UserName 类型专注于用户名相关的定义和验证，Password 类型专注于密码相关的内容。
• 可复用性：如果在其他地方也需要单独使用用户名或密码的类型及验证逻辑，UserName 和 Password 类型可以直接复用，而不需要重新编写。
• 类型安全：确保表单数据必须同时满足所有交叉类型的要求，增强了类型检查的严格性，减少了运行时因数据类型不符合预期而产生的错误。