在Angular 2中创建组件，并用打字稿和ES5创建

核心要点

• Angular 2.0 使用 TypeScript（JavaScript 的超集）来优化性能，提升页面速度和工作流程自动化。TypeScript 允许开发人员使用类型信息来注释 JavaScript 代码，从而帮助捕获代码库中的错误。
• Angular 2.0 引入了组件的概念，组件是可重用的代码块，包含视图和逻辑。组件取代了指令成为框架的主要元素，确保应用程序一个部分的代码不会干扰另一个部分的代码。
• 使用 TypeScript 在 Angular 2.0 中创建组件涉及定义组件类并从 Angular 导入必要的函数。然后，使用 @Component 装饰器装饰该类，并将其导出以便在应用程序的其他部分使用。
• Angular 2.0 也支持 ES5，这是在大多数浏览器中运行的标准 JavaScript 版本。要在 Angular 2.0 中使用 ES5 创建组件，开发人员可以使用 ng 对象上的方法来定义组件并添加功能。然后可以直接在浏览器中运行代码，无需服务器。

本文由 Stephan Max、Jeff Smith 和 Ravi Kiran 共同评审。感谢所有 SitePoint 的同行评审员，使 SitePoint 的内容达到最佳状态！

随着年末将至，Angular 团队比以往任何时候都更接近于发布 Angular 2.0 的稳定版本。这将重塑 Angular 应用程序的开发方式，但会带来更好的效果。在本文中，我将向您展示 Angular 2.0 中的一些核心概念以及如何使用它们。具体来说，我将引导您完成从头到尾构建 Angular 2 组件的过程。首先，我们将详细了解如何使用 TypeScript 完成此操作，然后我们将迁移 Angular 组件，使其可以使用纯 ES5 运行。

本教程的代码可以在我们的 GitHub 代码库中找到。该代码库有两个分支，一个用于 TypeScript 版本，一个用于 ES5 版本。如果您想克隆特定分支，请使用 git clone <url> --branch <branch></branch></url>。

什么是组件？

在过去几个月里，JavaScript 中组件的使用量大幅增加。它们用于 React、Knockout、Ember 等项目，因此 Angular 将它们整合到 2.0 版本中也就不足为奇了。代码模块化一直是 Angular 团队关注的重点，而组件的使用也突显了这一点，因为它们允许我们将代码分解成封装的块。

那么什么是组件呢？它本质上是一段可以在整个应用程序中重用的代码。它包含两部分：视图和逻辑。通过利用 Angular 开发团队对组件的关注，我们可以利用一些非常强大的功能。Angular 2 使创建由不同组件组成的动态应用程序变得非常容易，这些组件已经取代了指令成为框架的核心。在 Angular 2 中，指令是轻量级的组件，它们仅用于向 DOM 添加一些功能。现在，Angular 开发人员不必担心由于隔离 $scope 相关的冲突问题而弄乱应用程序。相反，使用组件是一种确保应用程序一个部分的代码不会干扰另一个部分代码的方法。

TypeScript

Angular 2.0 已创建为使用 TypeScript，它是 JavaScript 的超集。Angular 的开发人员花费了大量时间来完成此版本。他们努力优化性能，包括页面速度和工作流程自动化。TypeScript 类似于其他代码转换器，允许开发人员编写可以轻松转换为有效 JavaScript 的代码。话虽如此，它在过去一年中变得越来越流行，因此 Angular 团队决定使用它来创建框架。

使用 TypeScript 的好处之一是其类型系统，它允许开发人员使用类型信息来注释 JavaScript。此注释代码将通过编译器运行，这有助于捕获错误，否则这些错误会潜伏在代码库中，等待用户发现。现在让我们看看 TypeScript 的实际应用。

下面，我从 TJ Van Toll 的文章《TypeScript 的兴起》中提取了一个示例。在这个函数中，我们看到高度和宽度参数都应为数字类型。函数主体之前的 : number 指定返回类型，它也是数字类型。因此，传递给此函数的任何非数字内容都会导致编译器在编译时抛出错误。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

类型声明有助于我们记录 API 并使我们的代码随着时间的推移更易于维护。

安装

将 TypeScript 编译为 JavaScript 的过程非常简单。首先从 npm 获取 TypeScript 包：

npm install -g typescript

安装完成后，将 TypeScript 编译为 JavaScript 就如同从命令行运行以下命令一样简单（TypeScript 文件使用 .ts 扩展名保存）：

tsc <filename.ts>

现在，让我们看看 Angular 2 如何利用 TypeScript 的强大功能来轻松创建自定义组件。我们第一个示例的代码可以在我们 GitHub 代码库的 TypeScript 分支中找到。

在 TypeScript 中创建组件

因为 TypeScript 是 JavaScript 的超集，所以任何有效的 JavaScript 都可以在 .ts 文件中正常工作。通过使用 TypeScript，开发人员能够扩展其 JavaScript 代码以利用最新的 ES6 功能。在此示例中，我们将使用类。

下面，我使用 TypeScript 代码创建了一个组件。我首先使用 ES6 导入语法导入 Angular。在此示例中，我们将定义一个组件以及该组件的视图。完成后，我们将需要 Angular 的 bootstrap 函数才能使 Angular 运行代码。在此代码中，我们将看到 @ 符号，它用于告诉 Angular 我们正在尝试构建的内容。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

因为 Angular 2 是构建在 TypeScript 之上的，所以框架识别我们的 @Component 注解，并知道我们正在尝试创建一个新组件。此外，它还告诉 Angular，每当它在我们的 HTML 中看到 <user-name></user-name> 时，我们都想要实例化一个组件。

如上所述，组件包含两部分：

• 视图
• 逻辑

由于组件已定义，因此我们现在需要创建视图和逻辑。

在我们的组件之后，我们可以添加一些 TypeScript 代码来定义我们的视图。让我们看看上面代码的延续，并亲眼看看 Angular 使向自定义组件添加视图的过程有多么容易：

npm install -g typescript

现在，当我将 <user-name></user-name> 添加到我的 index.html 文件时，此模板将被注入到 DOM 中。话虽如此，我们的组件的逻辑部分是空的，因为我们的 UserComponent 类不包含任何代码。

在上面的示例中，我只有一个空类。但是现在，我将创建一个 name 变量，然后使用表达式在我们的视图中呈现此 name 变量：

tsc <filename.ts>

您还将看到我前面提到的 bootstrap 函数。尽管它们共享一个名称，但此函数用于启动或 引导 我们的 Angular 应用程序，并且与 Twitter BootStrap 框架无关。如果我们忘记将我们的组件传递到此函数中，Angular 将不知道加载我们的组件。

我还想快速注意的是，我们的应用程序必须使用某种服务器才能正确显示。如果直接访问它，则 System.js 将无法加载我们的主模块，该模块包含我们的代码。

现在，使用此示例的存储库的用户可以在根目录中运行 node app.js。运行此命令后，我们可以通过访问 https://www.php.cn/link/f74d6ef882234fd34400a296b1da6149 来查看我们的组件的实际效果。希望这能说明 Angular 使向组件添加逻辑变得多么容易！

将我们的组件迁移到 ES5

对于那些希望使用 ES5 利用 2.0 强大功能的用户，Angular 2 团队创建了一个可以简单地放入网站中的框架版本。这是必要的，因为 ES5 没有模块系统，因此我们需要某种自执行捆绑包。如果您查看了第一个示例的代码，您会看到我需要向应用程序中添加三个不同的脚本标签。在此示例中，我们只需要添加以下脚本。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

借助此脚本，开发人员可以使用他们对 ES5 的知识，而不必担心牺牲框架的任何功能。让我们看看如何使用 ES5 构建 Angular 组件。此示例的代码可以在我们 GitHub 代码库的 ES5 分支中找到。也就是说，让我们开始吧！

为了使用 ES5 而不是 TypeScript 来重新创建组件，我将使用一些不同的方法。这与我在上面示例中所做的基本上相同，但是我们将使用 ng 对象上的方法链接，而不是使用 @ 符号。这在下面的代码中显示：

npm install -g typescript

现在，我们可以继续向我们的组件添加功能，这些功能将在我们的应用程序读取 <user-name> 选择器时显示。

让我们使用 View 和 Class 方法。在我们的 View 方法中，我们只需要传入我们之前使用的模板字符串。由于 ES5 中不支持类，因此我们将通过创建一个简单的构造函数来模拟我们在 Class 方法中使用它们，该构造函数将包含我们的 name 属性。

tsc <filename.ts>

但是我们缺少一样东西。在我们的 TypeScript 示例中，我们使用了 bootstrap 函数来启动我们的 Angular 代码。以下是如何在 ES5 中执行相同操作的方法：

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

这应该放在我们的自定义应用程序代码下方。这将导致 Angular 引导我们的应用程序，并在页面加载后加载组件。与我们之前的示例（需要服务器）不同，此页面可以直接在浏览器中查看。

如您所见，Angular 团队为希望使用 ES5 构建 2.0 应用程序的用户提供了一个清晰的解决方案。如果您对此感兴趣，我强烈建议您查看 a.js 库，该库允许开发人员使用类似 TypeScript 的语法在 ES5 中构建 Angular 应用程序。

结论

希望这能让您深入了解 Angular 的各个方面，这些方面将在框架的下一个版本中出现。如果您想进一步使用 Angular 2 和 TypeScript（在这种情况下为留言板）构建完整的应用程序，那么我建议您查看这篇文章：使用 TypeScript 开始使用 Angular 2。

我还想了解您使用 Angular 2 的经验。您是否已经尝试过？您是否构建了一些想分享的内容？请在评论中告诉我。

关于使用 TypeScript 和 ES5 在 Angular 2 中创建组件的常见问题解答

如何使用 TypeScript 在 Angular 2 中创建组件？

使用 TypeScript 在 Angular 2 中创建组件涉及几个步骤。首先，您需要从 Angular 核心库导入 Component 符号。然后，您定义一个组件类并使用 @Component 装饰器对其进行装饰。装饰器告诉 Angular 该类是一个组件，并提供元数据，例如选择器和模板。最后，您导出组件类，以便可以在应用程序的其他部分使用它。这是一个基本示例：

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Angular 2 中 TypeScript 和 ES5 之间的区别是什么？

TypeScript 和 ES5 都是您可以用来编写 Angular 2 应用程序的语言，但它们有一些关键区别。TypeScript 是 JavaScript 的静态类型超集，它向语言添加了类型和其他功能。它是 Angular 2 的首选语言，因为它使代码更健壮且更易于维护。另一方面，ES5 是在大多数浏览器中运行的标准 JavaScript 版本。可以使用 ES5 编写 Angular 2 应用程序，但是您将错过 TypeScript 的一些好处。

（其余常见问题解答与 Angular 和 React 相关，与原文的主题不符，故略去。）

以上是在Angular 2中创建组件，并用打字稿和ES5创建的详细内容。更多信息请关注PHP中文网其他相关文章！