title: 类型转换

类型转换

原文地址

在本教程中，你将学习 TypeScript 中的类型转换，它允许变量从一种类型转换成另外一种类型。

JavaScript 没有类型转换的概念，因为变量具有动态类型的特性。而 TypeScript 中的变量都有类型，类型转换允许变量从一种类型转换成另外一种类型。

TypeScript 中可以使用 as 关键字或者 <> 操作符进行类型转换的操作。

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

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

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

因为 document.querySelector() 方法的返回类型是 Element 类型，下面的代码会导致编译错误：

  1. console.log(input.value);

因为 Element 类型不存在 value 属性，这个属性只存在 HTMLInputElement 类型上。为了解决这个问题，你可以使用类型转换，使用关键字 as 把 input 变量的类型从 Element 类型转换为 HTMLInputElement 类型，如下所示：

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

现在，input 变量的类型是 HTMLInputElement 类型，所以访问它的 value 属性不会导致任何错误，下面的代码可以正常工作：

  1. console.log(input.value);

另外一种把 input 变量的类型从 Element 类型转换为 HTMLInputElement 类型的方法如下所示：

  1. let enteredText = (input as HTMLInputElement).value;

注意 HTMLInputElement 类型扩展自 HTMLElement 类型，而 HTMLElement 类型扩展自 Element 类型。把 HTMLElement 类型转换成 HTMLInputElement 类型被称为向下转换。

也可以进行如下所示的向下转换：

  1. let el: HTMLElement;
  2. el = new HTMLInputElement();

在这个例子中，el 变量的类型是 HTMLElement 类型，你可以给它指定一个 HTMLInputElement 类型的实例，因为 HTMLInputElement 类型是 HTMLElement 类型的子类。将类型从 typeA 转换成 typeB 的语法如下：

  1. let a: typeA;
  2. let b = a as typeB;

使用 <> 操作符进行类型转换

除了 as 关键词，你可以使用 <> 操作符进行类型转换，如下所示：

  1. let input = <HTMLInputElement>document.querySelector('input[type="text"]');
  3. console.log(input.value);

使用 <> 操作符进行类型转换的语法如下所示：

  1. let a: typeA;
  2. let b = <typeB>a;

小结

  • 类型转换允许变量从一种类型转换成另外一种类型；
  • 使用 as 关键字或者 <> 操作符进行类型转换的操作。