面试题：TypeScript 中如何使用类型断言实现高级类型与运行时交互

Question

在TypeScript项目中，假设你有一个函数`getElement`，它返回`HTMLElement | null`，你需要在运行时确定返回值是`HTMLElement`类型并调用其`innerHTML`属性。请用类型断言的方式实现，并解释为什么要这样做。

Answer 1

function getElement(): HTMLElement | null {
    // 这里假设实际有获取元素的逻辑，暂时返回null
    return null; 
}

const element = getElement();
if (element) {
    const htmlElement = element as HTMLElement;
    console.log(htmlElement.innerHTML);
}

解释：因为getElement函数的返回值类型是HTMLElement | null，表示可能返回HTMLElement元素，也可能返回null。在调用innerHTML属性前，需要确保element不为null，所以先进行if (element)判断。然后使用类型断言as HTMLElement，告诉TypeScript编译器，此时element一定是HTMLElement类型，这样就可以安全地调用innerHTML属性，否则TypeScript会因为类型的不确定性而报错。