AngularJS在发布时就颠覆了前端开发的世界，将许多新的或最新的Web应用程序开发实践整合为一个功能强大且易于使用的框架。 在版本2中，Angular团队从头开始使用了一个全新的系统。 Angular背后的许多想法仍然相同，但是API和开发人员的经验却大不相同。

在本教程“ Angular 2入门”的视频教程中，我们将研究TypeScript如何与Angular 2一起使用。我还将向您展示一些基本的TypeScript语法。

Angular 2和TypeScript入门

TypeScript如何适合Angular 2

Angular 2是基于TypeScript构建的，它使用ES6语法并编译为原始JavaScript。 标准ES5 JavaScript也是有效的TypeScript，因此您仍然可以使用现有代码。

TypeScript的不同之处在于键入系统。 尽管它是可选的，但我建议您在项目中使用打字系统。 键入系统通过识别代码中期望的值类型来帮助大型项目。

这扩展到数组和对象，并允许诸如Visual Studio Code之类的编辑器识别期望值。 这在大型项目或其他开发人员将使用您的代码时很有用。 不用怀疑应该在通用变量中使用什么数据，而是通过键入就能知道要使用哪种类型的值。

TypeScript的实际应用

在介绍TypeScript语法之前，我们将讨论在项目中设置的tsconfig.json和types.json文件。

tsconfig.json文件

首先，将编译控制我们的TypeScript文件的tsconfig.json文件。 编译器选项中的目标告诉编译器生成ES5 JavaScript。

module确定我们正在使用的模块加载器的样式； 其他选项是常见的JS，AMD和UMD。 moduleResolution决定如何解析模块，并且sourceMap生成相应的映射文件，该映射文件将生成JavaScript映射到其源TypeScript。 emitDecoratorMetadata和experimentalDecorators允许我们在应用程序中使用装饰器。 我们将在稍后讨论装饰器。 removeComments确定在编译时是否删除添加的任何注释，最后有noImplicitAny 。 这控制了编译器在无法推断类型时的行为。 由于TypeScript是可选类型的，因此，如果我们不提供类型，则需要根据我们如何使用变量来确定类型。

将noImplicitAny设置为false ，编译器将针对无法确定的类型将其默认设置为any 。 如果将其设置为true ，则TypeScript在无法推断类型时将报告错误。 然后，我们有一个exclude块，其中排除了我们希望编译器忽略的所有文件。

除了包含TypeScript文件的节点模块之外，我们还包括了typesings文件夹中的一些文件。 这是因为已安装了两组类型，所以我们必须忽略其中一种。

Types.json文件

如果我们转至Types.json ， es6-shim看到es6-shim 。 这表示已添加到我们的项目中的类型。

TypeScript编译器无法理解外部库可能包含的方法。 发生这种情况时，您将在编译器中得到一个错误。 为了解决这个问题，我们可以获取正在使用的库的类型，以便TypeScript理解编译器中工作的方法。

在这种情况下，环境标志和关联的依赖项指示键入文件来自DefinitelyTyped。 DefinitelyTyped是用于大多数流行库的大型文件键入库。 在我们的Types.json文件中，我们正在获取es6-shim文件。 末尾的数字表示键入文件的提交ID。 该分型被安装在后安装，然后打字文件复制到我们的分型为我们的文件夹。

价值打字

既然我们已经了解了关于TypeScript编译器的设置，那么让我们看一下语言本身。 我们首先要看的是值的类型。

在这里，我们有了在JavaScript中使用过的基本类型，但是我们有了附加的标识符，该标识符告诉编译器对该变量使用了哪种类型的值。

如果我们尝试在myName变量中存储数字，则会收到错误消息。 如果我们尝试在任何变量中存储错误的类型，这将成立。 我们还可以使用any来指定此变量可用的任何类型：

var myName2: any = 'Reggie';

我们还可以将void用作类型，通常将其用作不返回值的函数的返回类型。

最后，我们可以将数组用作类型。 我们使用数组内部元素的类型，后跟方括号以表明这是数组类型。

var letters:string[] = ['a','b','c'];

我们也可以这样写一个数组类型：

var letters2:Array<string> = ['a','b','c'];

接下来，我们有了接口，该接口使您可以在代码中定义有关值形状的契约。

interface SampleInterface {title: string;
}

在这里，我们创建了一个示例界面，但是为了更好地理解它，让我们使用此界面。

在函数中，我们将接口指定为传递给函数的参数的形状。 然后，我们创建一个要使用的对象。 如果我们编译并运行此命令，最后一行将注销我们的标题。

我们只需要在此接口上使用title属性。 我们添加了另一个属性，但是只要我们在此对象中包含title属性，TypeScript都不在乎。 如果没有它，我们会得到一个错误。 另外请注意，只要存在所需的值，属性的顺序就无关紧要。

班级

您需要了解的TypeScript的下一部分是类。 在TypeScript中，我们可以使用类以面向对象的方式构建应用程序。 Angular 2通过使用类作为框架的主干来利用这一点。

Angular 2语法不是基于特定于框架的语法，而是基于TypeScript。 这样，您就不会局限于学习Angular 2，因为在Angular 2之外进行开发时，该语法将非常有用。

class SampleClass {}

任何逻辑以及构造函数都可以包含在此类中。

我们如何通过使用装饰器（例如@Component({})在Angular 2中进行扩展。 此装饰器添加了元数据，该元数据告诉应用程序该类是Angular组件。 我们构建应用程序以为组件，服务，指令等添加元数据。构建Angular 2的所有内容都基于一个类。 在构建应用程序时，我们将进一步探索。

最后，在构建应用程序时，我们将运行NPM启动脚本。 这将在预览中启动我们的应用，并在监视模式下运行编译器。 任何更改将被编译并反映在预览中。 这些都是Angular 2入门所需的TypeScript基础。

一定要查看TypeScript文档以了解更多信息，因为我只是从头开始了解可用功能。 在本课程的其余部分中，您还将学到更多东西-见下文。

观看完整课程

在整个课程Angular 2入门中 ，您将学习如何从头开始构建简单的Web应用程序-从脚手架和工具配置开始。 您将学习如何使用TypeScript静态类型JavaScript变体来创建Angular 2组件，服务和指令。 一路上，您将看到如何实现现代单页应用程序的基础：包括路由，外部API访问，用户输入和验证。

无论您是想升级到最新版本的经验丰富的Angular开发人员，还是想学习使用最新技术创建网站的新开发人员，本课程都是学习Angular 2的理想起点。

翻译自: https://code.tutsplus.com/tutorials/get-started-with-angular-2--cms-27268