开始使用Angular 2和TypeScript

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

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

开始使用 Angular 2 和 TypeScript

TypeScript 如何适应 Angular 2

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

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

这扩展到数组和对象，并允许 Visual Studio Code 等编辑器识别预期值。这在大型项目或其他开发人员将使用您的代码时很有帮助。与其想知道应该在泛型变量中使用什么数据，通过类型化你会知道要使用什么类型的值。

打字稿在行动

在我们看一点 TypeScript 语法之前，我们将讨论我们在项目中设置 的tsconfig.json和typings.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 文件的节点模块之外，我们还包含了来自typings文件夹的一些文件。这是因为安装了两组类型，所以我们必须忽略其中一组。 

typings.json 文件

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

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

在这种情况下，环境标志和相关的依赖项表明输入文件来自DefinitelyTyped。DefinitiveTyped 是一个用于大多数流行库的类型文件的巨大存储库。在我们的typings.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;
}

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

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

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

课程

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

Angular 2 的语法不是学习特定于框架的语法，而是基于 TypeScript。这样，您就不会限制自己学习 Angular 2，因为在 Angular 2 之外进行开发时语法将很有用。最基本的，类是这样创建的：

class SampleClass {}

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

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

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

请务必查看TypeScript 文档以了解更多信息，因为我只触及了可用功能的表面。您还将在课程的其余部分中学到更多——见下文。