面试题：TypeScript 类型断言 as 和 <T> 的基础使用场景辨析

Question

在 TypeScript 中，假设有一个函数 `getElement`，它从 DOM 中获取一个元素，但返回类型是 `any`。请使用 `as` 和 `<T>` 两种类型断言方式，将返回值断言为 `HTMLInputElement` 类型，并分别写出对应的代码。同时解释在这种场景下，两种断言方式有何异同。

Answer 1

使用 as 类型断言方式

function getElement(): any {
    // 这里模拟从 DOM 获取元素，实际可能是 document.getElementById 等操作
    return document.createElement('input'); 
}

const inputElementAs: HTMLInputElement = getElement() as HTMLInputElement;

使用 <T> 类型断言方式

function getElement(): any {
    // 这里模拟从 DOM 获取元素，实际可能是 document.getElementById 等操作
    return document.createElement('input'); 
}

const inputElementAngle: HTMLInputElement = <HTMLInputElement>getElement();

异同点

• 相同点：两者的主要作用都是将 any 类型的值断言为指定的 HTMLInputElement 类型，让 TypeScript 编译器按照指定类型来处理，从而在后续代码中提供类型检查和智能提示。
• 不同点：<T> 语法在 JSX 中会产生语法歧义，因为 JSX 也使用尖括号来表示元素标签。而 as 语法在任何场景下都能正常使用，所以在 TSX（TypeScript + JSX）项目中，只能使用 as 类型断言方式。在普通的 TypeScript 项目中，两种方式都可以使用，开发者可根据个人喜好选择。