面试题：TypeScript 中混合类型的使用场景及示例

Question

请举例说明在哪些实际场景下会用到 TypeScript 的混合类型，并编写相应代码展示如何定义和使用混合类型。

Answer 1

实际场景

1. 函数参数灵活性场景：当一个函数可能接受不同类型的参数，但需要进行不同逻辑处理时。例如，一个日志记录函数，既可以接受字符串消息，也可以接受对象来记录详细信息。
2. DOM 操作场景：获取 DOM 元素时，返回的结果可能是一个具体的元素类型（如 HTMLInputElement），也可能是 null（当未找到元素时）。

代码示例

1. 函数参数灵活性场景代码

function logMessage(message: string | object) {
    if (typeof message ==='string') {
        console.log(`简单消息: ${message}`);
    } else {
        console.log(`详细信息:`, message);
    }
}

logMessage('这是一条简单消息');
logMessage({ key: 'value', moreInfo: '一些详细信息' });

2. DOM 操作场景代码

function getInputElement(): HTMLInputElement | null {
    return document.querySelector('input');
}

const input = getInputElement();
if (input) {
    input.value = '设置值';
}