TypeScript：5 分钟了解 TypeScript 工具

让我们从用 TypeScript 构建一个简单的 Web 应用开始。

安装 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 文件

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

ts
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 类型注解：

ts
function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);Try

类型注解

TypeScript 中的类型注解是一种轻量的方式，用来记录函数或变量预期的约定。在这里，我们期望 greeter 函数以单个字符串参数被调用。我们可以试着把对 greeter 的调用改为传入一个数组：

ts
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'.2345Argument 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 子句。

ts
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 是一种简写方式，能让我们自动创建同名属性。

ts
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 Playground。你可以将鼠标悬停在标识符上以查看它们的类型。注意，在某些情况下这些类型是自动为你推断的。重新输入最后一行，查看基于 DOM 元素类型的补全列表和参数提示。把光标放在对 greeter 函数的引用上，按 F12 跳转到它的定义。另外注意，你可以右键单击某个符号，并通过重构来重命名它。

所提供的类型信息与工具协同工作，让你能在整个应用规模上处理 JavaScript。想了解更多 TypeScript 能实现的示例，请参阅网站中的“示例”部分。

Visual Studio 图片