5 分钟学会 TypeScript
让我们使用 TypeScript 创建一个简单的 Web 应用程序。
安装 TypeScript
获取 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.textContent = greeter(user);
编译代码
我们使用了 .ts 扩展名，但此代码只是 JavaScript。 您可以直接从现有 JavaScript 应用程序复制/粘贴此代码。
在命令行上运行 TypeScript 编译器：
tsc greeter.ts
输出是一个greeter.js 文件，其中包含与输入文件相同的JavsScript 代码。 一切准备就绪，我们可以运行这个用 TypeScript 编写的 JavaScript 应用程序了！
让我们看一下 TypeScript 工具带来的中级功能。 在person函数的参数中添加字符串类型注解，如下：
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
类型注释
TypeScript 中的类型注释是向函数或变量添加约束的轻量级形式。 在本例中，我们希望greeter 函数接受一个字符串参数。 然后尝试更改对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文件识别，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 相当于创建同名的成员变量。
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);
重新运行 tscgreeter.ts，您将看到生成的 JavaScript 代码与之前相同。 TypeScript 中的类只是 JavaScript 中常用的基于原型的面向对象编程的缩写。
运行 TypeScript Web 应用程序
在greeter.html中输入以下内容：
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
在浏览器中打开greeter.html并运行该应用程序！
可选：在 Visual Studio 中打开greeter.ts 或将代码复制到 TypeScript Playground 中。 将鼠标悬停在标识符上可查看其类型。 请注意，在个别情况下可以手动推断它们的类型。 重新输入最后一行代码，查看手动补全列表和参数列表，这些列表会根据 DOM 元素类型而变化。 将光标放在greeter 函数上并按F12 跟踪其定义。 另一件事是typescript文件识别，您可以右键单击该图标并使用构建功能对其进行重命名。
这些类型的信息和工具与 JavaScript 配合得很好。 有关 TypeScript 功能的更多演示，请查看本网站的示例部分。
