5分钟入门TypeScript (翻译自官方文档)

让我们通过使用TypeScript来构建一个简单的Web应用程序来入门吧

安装 TypeScript

获取TypeScript主要有两种方法：

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

Visual Studio 2017和VIsual Studio 2015 Update 3 默认包含了TypeScript。如果你没有在Visual Studio上安装TypeScript，你仍然可以从这里下载它。

对于使用NPM的用户，通过以下命令安装：

> npm install -g typescript

创建你的第一个TypeScript文件

在你的编辑器里创建一个greeter.ts的文件，将下面的代码复制到这个文件中：

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

编译你的代码

我们使用了一个.ts的扩展名，但其实这些代码仅使用了JavaScript。你可以直接复制粘贴这些代码到一个已有的JavaScript程序中去使用。

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

tsc greeter.ts

这个命令将会生成一个包含了同样JavaScript代码的greeter.js文件，这样就可以在我们的JavaScript程序中去使用TypeScript了。

现在我们开始使用一些TypeScript提供的新特性。像下面一样添加一个 :string 类型的注解到person函数的参数中：

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

类型注解

类型注解在TypeScript是一个记录函数和变量预期契约的轻量级方法，在这个例子中，我们预计greeter函数将会在被调用时候使用一个string类型的参数。我们可以尝试传递一个数组去调用greeter函数：

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

let user = [0, 1, 2];

document.body.innerHTML = 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中如果他们的内部结构兼容，那么这两种类型是兼容的。这允许我们不用显式的去实现一个接口，仅仅定义好接口的格式就可以。

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

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

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

document.body.innerHTML = greeter(user);

类

最后，我们使用类来扩展这个例子。TypeScript支持新的特性，例如支持基于类的面向对象编程。

这里我们创建一个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.innerHTML = greeter(user);

再次运行 tsc greeter.ts ，你将会发现像之前一样生成了JavaScript文件。在TypeScript中的类仅仅是针对JavaScript中常用的基于原型面向对象的简单表达方式。

在你的Web程序中使用TypeScript

现在我们使用下面的代码创建 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文件，你可以在变量上悬停以查看其类型。注意，在某些情况下，这些类型是自动为您推断的。重新键入最后一行，并根据DOM元素的类型查看完成列表和参数帮助。将光标放在对greeter函数的调用上，并按F12键，将会跳转到它的定义。请注意，您也可以右键单击一个成员并使用重构去重命名它。

The type information provided works together with the tools to work with JavaScript at application scale.。更多示例，请参见网站的示例部分。

翻译自： http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html