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 是在警告你代码可能无法按预期运行。

接口 (Interfaces)

让我们进一步开发这个示例。这里我们使用一个接口来描述具有 firstName 和 lastName 字段的对象。在 TypeScript 中，如果两个类型的内部结构兼容，它们就是兼容的。这允许我们仅通过拥有接口所需的形状（shape）来实现接口，而无需显式的 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

类 (Classes)

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

在这里，我们将创建一个带有构造函数和几个公共字段的 Student 类。请注意，类和接口配合得很好，让程序员能够决定合适的抽象级别。

另外值得注意的是，在构造函数参数上使用 public 是一种速记法（shorthand），它允许我们自动创建同名的属性。

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 中常用的基于原型（prototype-based）的面向对象编程的一种简写。

运行你的 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 picture