面试题：TypeScript类型守卫与类型断言在复杂项目架构中的最佳实践

类型守卫
- 定义：类型守卫是一种运行时检查，它可以缩小变量的类型范围。在处理用户输入数据时，类型守卫非常有用，因为我们需要根据数据的实际类型来执行不同的操作。
- 示例：假设我们有一个函数，它接受一个可能是字符串或数字数组的参数，并进行相应处理。

function processInput(input: string | number[]) {
    if (typeof input ==='string') {
        // 这里 input 被类型守卫缩小为 string 类型
        console.log(`处理字符串: ${input}`);
    } else if (Array.isArray(input) && input.every((element) => typeof element === 'number')) {
        // 这里 input 被类型守卫缩小为 number[] 类型
        console.log(`处理数字数组: ${input.join(', ')}`);
    } else {
        console.log('不支持的输入类型');
    }
}

类型断言
- 定义：类型断言允许我们手动指定一个值的类型，告诉编译器“相信我，这个值就是这个类型”。但使用时需谨慎，因为如果断言错误，可能导致运行时错误。
- 示例：假设我们从一个API获取数据，该API文档表明某个字段在特定条件下是一个JSON对象，但TypeScript无法自动推断出来。

interface User {
    name: string;
    age: number;
}

function getUserData(): any {
    // 模拟从API获取数据
    return { name: 'John', age: 30 };
}

let userData = getUserData();
// 使用类型断言将 userData 断言为 User 类型
let user: User = userData as User;
console.log(`用户姓名: ${user.name}, 年龄: ${user.age}`);

结合使用提高代码质量
- 在大型前端项目中，我们可以先使用类型守卫对输入数据进行初步判断，然后在确定类型后，使用类型断言来更明确地告诉编译器数据的类型，从而进行更准确的操作。
- 示例：假设我们有一个函数，它接收一个可能是JSON对象或字符串的数据，并且如果是JSON对象，它应该有一个 message 字段。

function handleData(data: string | { message: string }) {
    if (typeof data ==='string') {
        console.log(`接收到字符串: ${data}`);
    } else {
        // 使用类型断言，因为已经通过类型守卫确定不是字符串
        let jsonData = data as { message: string };
        console.log(`接收到JSON对象消息: ${jsonData.message}`);
    }
}

这样，通过类型守卫和类型断言的合理运用，我们可以确保数据处理的准确性和安全性，同时代码的可维护性和扩展性也得到了保障。当项目需求变化，有新的数据类型需要处理时，我们可以在类型守卫中添加新的判断逻辑，而类型断言部分则可以根据新的类型定义进行调整。

面试题：TypeScript类型守卫与类型断言在复杂项目架构中的最佳实践

知识考点

面试题答案