5 分钟了解 TypeScript 工具

让我们通过构建一个简单的 web 应用程序来开始使用 TypeScript。

安装 TypeScript

有两种主要方式将 TypeScript 添加到你的项目中：

通过 npm（Node.js 包管理器）
通过安装 TypeScript 的 Visual Studio 插件

Visual Studio 2017 和 Visual Studio 2015 Update 3 默认包含 TypeScript 语言支持，但不包含 TypeScript 编译器 tsc。如果你没有通过 Visual Studio 安装 TypeScript，你仍然可以下载它。

对于 npm 用户：

shell

> npm install -g typescript

构建你的第一个 TypeScript 文件

在你的编辑器中，在 greeter.ts 中输入以下 JavaScript 代码：

function greeter
(person
) {
  return "Hello, " + person
;
}

let user
 = "Jane User";

document
.body
.textContent
 = greeter
(user
);

Try

编译你的代码

我们使用了 .ts 扩展名，但这段代码只是 JavaScript。你可以直接从现有的 JavaScript 应用程序中复制/粘贴过来。

在命令行中，运行 TypeScript 编译器：

shell

tsc greeter.ts

结果将生成一个 greeter.js 文件，其中包含与你输入相同的 JavaScript。我们已经成功地在 JavaScript 应用程序中运行了 TypeScript！

现在我们可以开始利用 TypeScript 提供的一些新工具。如下所示，为 'person' 函数参数添加一个 : string 类型注解：

function greeter
(person
: string) {
  return "Hello, " + person
;
}

let user
 = "Jane User";

document
.body
.textContent
 = greeter
(user
);

Try

类型注解

TypeScript 中的类型注解是一种轻量级的方式，用于记录函数或变量的预期契约。在这种情况下，我们希望 greeter 函数使用单个字符串参数进行调用。我们可以尝试更改 greeter 调用，改为传递一个数组：

function greeter
(person
: string) {
  return "Hello, " + person
;
}

let user
 = [0, 1, 2];

document
.body
.textContent
 = greeter
(user);Argument of type 'number[]' is not assignable to parameter of type 'string'.

Try

重新编译，你现在会看到一个错误：

shell

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

类似地，尝试移除 greeter 调用的所有参数。 TypeScript 会告诉你，你以意外数量的参数调用了此函数。在这两种情况下，TypeScript 都可以根据你的代码结构和提供的类型注解提供静态分析。

请注意，尽管存在错误，但 greeter.js 文件仍然被创建。即使代码中存在错误，你也可以使用 TypeScript。但在这种情况下，TypeScript 正在警告你的代码可能无法按预期运行。

接口

让我们进一步开发我们的示例。这里我们使用一个接口来描述具有 firstName 和 lastName 字段的对象。在 TypeScript 中，如果两种类型的内部结构兼容，则它们是兼容的。这允许我们只需具有接口所需的形状来实现接口，而无需显式的 implements 子句。

interface Person {
  firstName
: string;
  lastName
: string;
}

function greeter
(person
: Person) {
  return "Hello, " + person
.firstName
 + " " + person
.lastName
;
}

let user
 = { firstName
: "Jane", lastName
: "User" };

document
.body
.textContent
 = greeter
(user
);

Try

类

最后，让我们最后一次用类来扩展这个示例。 TypeScript 支持 JavaScript 中的新特性，例如支持基于类的面向对象编程。

这里我们将创建一个 Student 类，它带有一个构造函数和几个公共字段。请注意，类和接口可以很好地协同工作，让程序员决定合适的抽象级别。

另外值得注意的是，在构造函数参数上使用 public 是一种简写，允许我们自动创建具有该名称的属性。

class Student
 {
  fullName
: string;
  constructor(
    public firstName
: string,
    public middleInitial
: string,
    public lastName
: string
  ) {
    this.fullName
 = firstName
 + " " + middleInitial
 + " " + lastName
;
  }
}

interface Person {
  firstName
: string;
  lastName
: string;
}

function greeter
(person
: Person) {
  return "Hello, " + person
.firstName
 + " " + person
.lastName
;
}

let user
 = new Student
("Jane", "M.", "User");

document
.body
.textContent
 = greeter
(user
);

Try

重新运行 tsc greeter.ts，你会看到生成的 JavaScript 与之前的代码相同。 TypeScript 中的类只是 JavaScript 中常用的基于原型的面向对象编程的简写。

运行你的 TypeScript Web 应用程序

现在在 greeter.html 中输入以下内容：

html

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

在浏览器中打开 greeter.html 来运行你的第一个简单的 TypeScript Web 应用程序！

可选：在 Visual Studio 中打开 greeter.ts，或将代码复制到 TypeScript 演练场中。你可以将鼠标悬停在标识符上以查看其类型。请注意，在某些情况下，这些类型会为你自动推断。重新输入最后一行，并根据 DOM 元素的类型查看补全列表和参数帮助。将光标放在 greeter 函数的引用上，然后按 F12 转到其定义。另外注意，你可以右键单击符号并使用重构来重命名它。

提供的类型信息与工具协同工作，以便在应用程序规模上处理 JavaScript。有关 TypeScript 中更多可能的示例，请参阅网站的示例部分。

Visual Studio 图片

5 分钟了解 TypeScript 工具 ​

安装 TypeScript ​

构建你的第一个 TypeScript 文件 ​

编译你的代码 ​

类型注解 ​

接口 ​

类 ​

运行你的 TypeScript Web 应用程序 ​

5 分钟了解 TypeScript 工具

安装 TypeScript

构建你的第一个 TypeScript 文件

编译你的代码

类型注解

接口

类

运行你的 TypeScript Web 应用程序