Web-Typescript 其他类型

其他Typescript类型

到目前为止，我们已经介绍了基本的Typescript特性。不幸的是，还有许多更高级的Typescript特性可能会遇到。现在，让我们简要地了解一下在本单元的剩余部分可能会遇到的一些特性。请记住，这不是一个Typescript单元。我们的目标是达到可以使用JavaScript框架进行Web开发的程度。

联合类型（Union Types）

联合类型允许我们指定接受两个或多个其他类型的类型。使用‘|’运算符来创建联合类型声明。例如，下面的函数接受一个字符串或数字类型的单个参数。

function primitive(x: number | string): string {
    if (typeof x == "number") {
    return "number";
    } else {
    return "string";
    }
  }

在联合类型中，我们不仅限于两种类型。例如，我们可以向上述定义中添加布尔类型参数，如下所示。

  function primitive2(x: number | string | boolean): string {
    if (typeof x == "number") {
      return "number";
    } else if (typeof x == "string"){
      return "string";
    } else {
      return "boolean";
    }
  }

类型断言和类型转换（Type assertion and type conversion）

在运行时进行类型转换是必要的，以便实现对象类型的类型安全转换。当需要将一个更通用的类型转换为特定类型以访问与该类型关联的属性或方法时，就需要进行类型转换。在与网页关联的Typescript代码中，当我们访问DOM对象时，就会遇到这种情况。

你可能已经在像Java或C#这样的面向对象语言中见过类型转换。在Java和C#中，我们通过将新类型括在括号中来编写显式类型转换，称为类型转换。在Typescript中，我们使用不同的语法。我们使用尖括号‘<’和‘>’，通常称为类型断言。

例如，假设我们希望将HTMLElement对象的类型调整为HTMLInputElement对象。这种情况经常发生，并且我们将在教程中进一步解释。代码示例如下：

  let elt = document.getElementByID('element1');
  let val1 = <HTMLInputElement>elt.value;

        在这种情况下，调用getElementById()返回的是一个HTMLElement类型的对象。这个对象不包含value属性。然而，HTMLElement的一个子类是HTMLInputElement，它表示HTML中的标签，它是包含value属性的。在我们尝试访问这个属性之前，我们必须将类转换为适当的类型。请注意，这种转换是在运行时发生的，因此如果发生错误（例如val1不是HTMLInputElement类型），将会导致运行时错误。
        我们将把类型转换的示例留在教程会话中，这样您就可以在自己的代码中动态查看它的效果。
        接下来，我们将看看DOM元素和类型转换。

使用 DOM 类型

我们想做的有用事情之一是访问网页小部件及其包含的数据。例如，如果我们有一个文本输入字段，那么在某个阶段，我们希望提取用户输入的文本。在 JavaScript 中，我们可以简单地做到这一点，例如对于一个 HTML 元素：

<input id="field1">

我们可以用 JavaScript 代码提取文本：

var f1 = document.getElementById("field1").value;

这不会转换为Typescript 。Typescript 编译器将给出以下错误：

error TS2339: Property 'value' does not exist on type 'HTMLElement'.

这里的问题是 getElementById（）方法返回一个没有 value 属性的对象。正如错误消息所暗示的那样，此方法的返回对象具有 HTMLElement 类型。类型HTMLElement表示所有DOM元素，包括表示文本输入字段的元素。从技术上讲，HTMLElement是一个代表所有DOM元素的超类，这个例子是针对特定元素类型的子类化的。value 属性在名为 HTMLInputElement 的子类中实现。这就是 Javascript 的动态类型（在运行时查找属性）和 Typescript 的静态类型（在编译时和执行之前检查类型）之间的区别。

那么我们必须做什么呢？与大多数面向对象的语言（如 Java 或 C#）一样，我们需要在运行时将超类类型对象转换为子类类型 HTMLInputElement，以便可以检查对象的类型是否正确。Typescript 通过将类型括在“<”和“>”中并将此语法放在对象之前以转换其类型来进行类型转换。在本例中，我们编写：

let f1 = (<HTMLInputElement>document.getElementById("field1")).value;

如果所需的括号令人困惑，我们也可以编写以下两个步骤：

let f1elt = <HTMLInputElement>document.getElementById("field1");
let f1 = f1elt.value;

那么我们如何知道需要什么类型转换呢？通常，我们知道当我们访问的属性对于我们正在访问的元素是唯一的或并非存在于所有 DOM 对象上时，需要类型转换。在上面的示例中，value 属性仅适用于表单小部件对象。您可以猜测类型，因为在本例中，类型名称在“HTML”和“Element”之间插入了标记名称“Input”。