让我们使用 TypeSctipt 快速创建一个 web 应用。
安装 TypeScript
使用 npm 获取 TypeScript 工具：
> 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
结果会生成一个 greeter.js 文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，我们可以运行这个使用 TypeScript 写的 JavaScript 应用了！
接下来让我们看看 TypeScript 工具带来的高级功能。 给person函数的参数添加: string类型注解，如下：
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
类型注解
TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里，我们希望greeter函数接收一个字符串参数。
然而当我们尝试将一个数组作为参数传入greeter方法时：
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);
重新编译，你会看到一个错误产生：
tsc greeter.ts
greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
注意：要注意的是尽管有错误，
greeter.js文件还是会被创建。 就算你的代码里有错误，你仍然可以使用 TypeScript 。但在这种情况下，TypeScript 会警告你代码可能不会按预期执行。
接口
这里我们使用接口来描述一个拥有firstName和lastName属性的对象。
在 TypeScript 里，只要两个类型内部的结构兼容那么这两个类型就是兼容的。
这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用implements语句。
注意：JavaScript 中是没有接口的概念的。所以 TypeScript 在编译成 JavaScript 的时候，所有的接口都会被擦除掉。
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 支持 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.innerHTML = greeter(user);
重新运行tsc greeter.ts，你会看到生成的 JavaScript 代码和原先的一样。TypeScript 里的类只是 JavaScript 里常用的基于原型面向对象编程的简写。
运行 TypeScript Web Aplication
创建greeter.html文件，内容如下：
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
在浏览器里打开greeter.html运行这个应用！
