类型转换

摘要：在本教程中，你将了解 TypeScript 中的类型转换，它允许将变量从一种类型转换为另一种类型。

JavaScript 没有类型转换的概念，因为变量具有动态类型。然而，TypeScript 中的每个变量都有一个类型。类型转换允许你将变量从一种类型转换为另一种类型。

在 TypeScript 中，可以使用 as 关键字或 <> 运算符进行类型转换。

使用 as 关键字进行类型转换

下面使用 querySelector() 方法选择第一个 input 元素：

let input = document.querySelector('input["type="text"]');

由于 document.querySelector() 方法的返回类型是 Element 类型，因此以下代码会导致编译器错误：

console.log(input.value);

原因是 Element 类型中不存在 value 属性。它仅存在于 HTMLInputElement 类型上。

要解决此问题，可以使用类型转换，通过使用 as 关键字将 Element 转换为 HTMLInputElement，如下所示：

let input = document.querySelector('input[type="text"]') as HTMLInputElement;

现在，input 变量的类型为 HTMLInputElement。所以访问它的 value 属性不会导致任何错误。以下代码有效：

console.log(input.value);

将 Element 转换为 HTMLInputElement 的另一种方法是按如下方式访问该属性：

let enteredText = (input as HTMLInputElement).value;

请注意，HTMLInputElement 类型扩展了 HTMLElement 类型，而 HTMLElement 类型又扩展为 Element 类型。当你将 HTMLElement 转换为 HTMLInputElement 时，这种类型转换也称为向下转换。

向下转换也是可以的。例如：

let el: HTMLElement;
el = new HTMLInputElement();

在此示例中，el 变量具有 HTMLElement 类型。你可以为其分配一个 HTMLInputElement 类型的实例，因为 HTMLInputElement 类型是 HTMLElement 类型的子类。

将变量从 typeA 转换为 typeB 的语法如下：

let a: typeA;
let b = a as typeB;

除了 as 关键字之外，还可以使用 <> 运算符来进行类型转换。例如：

let input = <HTMLInputElement>document.querySelector('input[type="text"]');

console.log(input.value);

使用 <> 进行类型转换的语法是：

let a: typeA;
let b = <typeB>a;