TypeScript是使用JavaScript创建更好体验的众多尝试之一。

TypeScript究竟是什么？

TypeScript是JavaScript的强类型超集，这意味着它为语言添加了一些语法上的好处，同时仍然允许正常的编写JavaScript。它通过诸如接口和静态类型之类的东西（稍后会详细介绍），提供模块和类，以及最重要的是，与流行的JavaScript库和代码集成得相当好，从而鼓励更具声明性的编程风格。您可以将其视为当前JavaScript上的一个强静态层，它具有一些使生命（尤其是调试）更具可忍性的功能。

TypeScript在几年前引起了特别的关注，因为它被Angular 2和follow（它也是用TypeScript本身编写）选择完全支持。它也是由微软开发的，这意味着它得到了两家主要科技公司的支持（对任何语言来说都不是一个糟糕的地方）。从那时起，它获得了更多的追随和主流地位。

毋庸置疑，TypeScript绝对值得研究。

TypeScript是如何工作的？

TypeScript实际上看起来很像现代JavaScript。在最基本的层面上，它为JavaScript引入了静态类型范例，因此不是以下内容：

var name = “Susan”,    age = 25,    hasCode = true;

我们可以写下面的内容：

let name: string = "Susan",    age: number = 25,    hasCode: boolean = true;

如你所见，这里没有太多区别。我们所做的只是明确告诉系统每个变量的类型; 我们从一开始就告诉它name是一个字符串而且age是一个数字。但这似乎我们必须编写更多代码。为什么还要告诉系统这样的具体信息呢？因为它为系统提供了有关我们程序的更多信息，这反过来意味着它可以捕获我们可能在未来发展的错误。

想象一下，例如，你的代码中有这样的东西：

var age = 25;age = "twenty-five";

改变这样的变量并改变它的类型可能最终会破坏其他地方的东西，特别是在一个非常大的程序中，所以如果编译器在我们在浏览器中加载它并且必须坐半小时之前能够捕获它，那就太棒了我们自己寻找这个问题。基本上，它使我们的程序更安全。

以下是TypeScript网站介绍教程的示例：

interface Person {    firstname: string;    lastname: string;}function greeter(person : Person):string {    return "Hello, " + person.firstname + " " + person.lastname;}let user = {firstname: "Jane", lastname: "User"};document.body.innerHTML = greeter(user);

现在这里有一些比我们以前更不寻常的事情了。我们有一个普通的对象，称为user，包含名字和姓氏，然后传递给输出并将输出插入到文档正文中。但是在函数的参数中有一些奇怪的东西。

greeter()greeterinterface

从greeter功能开始：

function greeter(person: Person):string {    return "Hello, " + person.firstname + " " + person.lastname;}

我们可以看到，greeter接受一个person参数，我们希望它是类型的Person。通过这种方式，我们可以肯定，当我们要求该人的名字时，它肯定会在那里，如果失败，我们不会对自己产生麻烦。该函数的参数后，告诉我们，我们期待什么类型此功能时，我们把它返回。:string

功能的主体并不复杂，但是，当然，到现在为止，你可能想知道一个Person类型究竟是什么。这是该interface功能的用武之地：

interface Person {    firstname: string;    lastname: string;}

TypeScript中使用接口来定义对象（以及仅对象）的结构。在这个例子中，我们说任何类型的变量Person必须是包含a firstname和lastnameproperty 的对象，两者都是字符串类型。我们基本上是为对象创建自定义类型。

这很有用，因为它告诉编译器，以及您自己和将来将要处理此问题的任何开发人员，确切地说是期望的数据类型。我们基本上是对对象属性建模，如果我们需要稍后调试，我们可以创建一些东西。这通常是您在TypeScript文件顶部看到接口的原因，因为它们使我们能够很好地了解程序在文件的其余部分中使用的数据。

在我们的例子，如果我们使用这种Person具有可变接口在程序中的任何一点，它不包含一个firstname或者lastname，两个类型的string（我们的user目标谢天谢地一样），那么编译器将在呻吟我们，我们将被迫修补我们的方式。

不仅如此，具有静态类型意味着支持TypeScript的IDE或编辑器将能够为我们提供非常好的，非常具体的提示和自动完成，以便我们可以开发更快，更安全的代码。

TypeScript允许我们使用更多功能，例如泛型和命名空间，因此强烈建议至少快速阅读其文档。

如何设置TypeScript？

因为TypeScript是JavaScript的超集，所以如果我们想在浏览器中使用它，我们需要将其转换为JavaScript。值得庆幸的是，它已经与许多任务运行者和捆绑器很好地集成。

如果您只是想在本地首先使用它，可以通过npm全局安装TypeScript 并使用命令在命令行中使用它tsc，如下所示：

tsc your-typescript-file.ts

这将输出一个JavaScript文件，在这种情况下称为，然后您可以按照惯例在浏览器中使用该文件。但是，在项目中进行设置几乎肯定需要设置一个合适的。your-typescript-file.jstsconfig.json

此文件表示该项目是TypeScript项目，并允许我们设置许多配置选项。这是文档中的截断示例：

{    "compilerOptions": {        "module": "commonjs",        "outFile": "./build/local/tsc.js",        "sourceMap": true    },    "exclude": [        "node_modules"    ]}

这里我们以多种方式配置编译器。我们正在指定一个模块系统来编译，在编译完成后放置编译文件的位置，并包含源图。我们还给它一个exclude选项，它基本上告诉编译器编译任何TypeScript文件 – 结尾的.ts- 它只要它们不在node_modules文件夹中就会找到。

从这里，我们可以将东西集成到我们最喜欢的任务运行器或捆绑器中。Webpack有一个很棒的 TypeScript加载器，并且对其他一些设置也有很好的支持。基本上，您可以将TypeScript集成到您目前正在进行的几乎任何工作流程中而不需要太多努力。

外部打字

如果您在项目中使用外部库（说实话，谁不是？），您可能还需要一些类型定义。这些定义（由扩展名表示）使我们能够访问其他人为许多JavaScript库编写的接口。总的来说，这些定义可以在一个名为DefinitelyTyped的巨型仓库中找到，这是我们安装它们的地方。.d.ts

要使用它们，您需要安装Typings，类似于npm，但对于TypeScript类型定义。它有自己的配置文件，可以在其中配置类型定义安装的包和路径。typings.json

我们不会在这里详细介绍，但是如果我们想要使用AngularJS 1.x类型，我们可以简单地将它们下载到定义的路径中。之后，只需包含以下行，就可以在项目的任何位置使用Angular的类型定义：typings install angularjs –savetypings.json

/// <reference path="angularjs/angular.d.ts" />

现在我们可以使用Angular类型定义，如下所示：

var http: ng.IHttpService;

任何在稍后阶段发生在我们的代码上的开发人员（或者我们自己，在我们编写它之后三个月）将能够通过查看它们来更好地理解我们编写的内容。

好的，社区怎么样？

TypeScript社区正在不断发展，语言的采用也在不断发展。也许最重要的是，这是Angular 2+的编写方式，框架从一开始就提供了对它的完全支持。它的语法也很好地支持Microsoft Visual Studio IDE和Visual Studio Code，其中包括Atom，Sublime Text和Emacs等编辑器的软件包和插件。

这意味着TypeScript周围有很多活动，所以这是你需要关注的事情。

结论

TypeScript是一个有趣的推动，它通过引入一个带有接口和类型联合的静态类型系统来改进JavaScript的缺点。这有助于我们编写更安全，更易读和声明性的代码。

它与目前几乎所有主流构建设置完美集成，甚至使我们能够创建和使用自定义类型。还有无数的IDE和文本编辑器，它们对语法和编译过程提供了很好的支持，因此您可以在您选择的编码环境中轻松使用它。