五分钟速览

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

安装 TypeScript

有两种方法设置 TypeScript 开发工具：

  1. 通过 npm (Node JS 包管理器)
  2. 安装 TypeScript 的 Visual Studio 插件

Visual Studio 2017 和 Visual Studio 2015 Update 3 默认带有 TypeScript，如果安装 Visual Studio 时没有安装 TypeScript，可以直接下载安装。

使用 NPM 的用户：

npm install -g typescript

构建第一个 TypeScript 文件

在编辑器中，输入如下 JavaScript 代码，并将文件命名为：greeter.ts

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

let user = "Jane User";

document.body.textContent = greeter(user);

编译代码

我们的文件使用 .ts 作为扩展名，但代码却是 JavaScript。你本可以直接从现有的 JavaScript 应用中拷贝这段代码。

在命令行运行 TypeScript 编译器：

tsc greeter.ts

执行完成后将生成一个与 greeter.ts 内容相同的 JavaScript 文件 greeter.js，接下来就可以在 JavaScript 应用程序中用 TypeScript 来编写代码了。

~上面这部分，个人认为官方文档写的并不是太好，没有照顾到初次接触 TypeScript 的人，建议先看 项目初始化 章节。

现在我们可以开始使用 TypeScript 提供的一些新特性了。先给函数的 person 参数添加 : string 类型注解，如下所示：

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

let user = "Jane User";

document.body.textContent = greeter(user);

类型注解

类型注解是 TypeScript 中声明函数返回值类型或定义变量类型的轻量级方法。在上面的例子中，声明 greeter 函数仅有一个类型为 string 的参数，我们可以尝试在调用 greeter 函数时为其传递数组类型的参数。

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

let user = [0, 1, 2];

document.body.textContent = greeter(user);

重新编译，将提示如下错误：

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);

~这里听起来可能不太明白，在后续的官方文档详细手册中将会深入对其进行描述，不用在这里纠结，如果不明白可以直接略过。

类

最后我们使用类来扩展示例代码，TypeScript 支持 JavaScript 的新特性，比如基于类的面向对象编程。

这里我们创建一个具有构造方法的 Student 类，该类还有一些具有 public 访问权限的属性。注意例子中类和接口的配合使用能方便程序员对数据模型进行正确的抽象化。

还要注意的是，在构造函数的参数上使用 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);

重新运行 tsc greeter.ts，你会看到生成的 JavaScript 代码和之前的代码完全一致。TypeScript 中的类只是 JavaScript 中基于原型的面向对象编程的一种更加简洁的方式。

~当类中的属性或函数不声明任何访问修饰符时，默认值就是 public，这一点和 Java 有些区别，另外我们可以发现 TypeScript 在尽量往 Java 的语法特性上靠，这对降低代码歧义，从语言级工程化前端开发是很有意义的。

运行你的 TypeScript Web 应用

创建 greeter.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键可以跳转到这个函数的定义。另外你还可以右键单击标识符然后使用代码重构功能进行批量重命名。

TypeScript 提供的类型支持可以很好的扩展 JavaScript 的语言能力。有关 TypeScript 的更多功能示例，请参考网站的 示例 部分。

示例

← 历史版本数据类型 →