TypeScript in 5 minutes

在5分钟内TypeScript

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

安装TypeScript

有两种主要的方法可以获得TypeScript工具：

通过npm（Node.js包管理器）

通过安装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;
}

var user = "Jane User";

document.body.innerHTML = greeter(user

编译你的代码

我们使用了.ts扩展，但是这个代码只是JavaScript。你可以直接从现有的JavaScript应用程序中复制/粘贴。

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

tsc greeter.ts

结果将是一个greeter.js包含您输入的JavaScript 的文件。我们在JavaScript应用程序中使用TypeScript启动并运行！

现在我们可以开始利用TypeScript提供的一些新工具。将: string类型注释添加到'person'函数参数中，如下所示：

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

var user = "Jane User";

document.body.innerHTML = greeter(user

键入注释

TypeScript中的Type注释是用于记录函数或变量的预期合同的轻量级方法。在这种情况下，我们打算使用单个字符串参数调用greeter函数。我们可以尝试改变呼叫欢迎词来传递数组：

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user

重新编译，你现在会看到一个错误：

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

同样，尝试删除所有参与欢迎致电的参数。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;
}

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

document.body.innerHTML = greeter(user

类

最后，让我们最后一次用类来扩展这个例子。TypeScript支持JavaScript中的新功能，如支持基于类的面向对象编程。

在这里，我们将创建一个Student带有构造函数和一些公共字段的类。请注意，类和接口在一起发挥得很好，让程序员决定正确的抽象级别。

另外值得注意的是，对public构造函数使用on参数是一种简写，它允许我们自动创建具有该名称的属性。

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

var user = new Student("Jane", "M.", "User"

document.body.innerHTML = greeter(user

重新运行tsc greeter.ts，你会看到生成的JavaScript与早期的代码相同。TypeScript中的类只是JavaScript中经常使用的基于原型的OO的缩写。

运行您的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应用程序！

可选：greeter.ts在Visual Studio中打开，或将代码复制到TypeScript操场中。您可以将鼠标悬停在标识符上以查看其类型。请注意，在某些情况下，这些类型会自动推断出来。重新输入最后一行，并根据DOM元素的类型查看完成列表和参数帮助。将光标放在对迎宾函数的引用上，然后按F12进入其定义。请注意，您可以右键单击某个符号并使用重构对其进行重命名。

所提供的类型信息与在应用程序规模上使用JavaScript的工具一起工作。有关TypeScript中可能的更多示例，请参阅网站的示例部分。