前言
Angular 是一个基于 TypeScript 构建的 Web 应用程序框架，它提供了完整的工具集，以便开发者能够快速开发高质量的应用程序。在本文中，我们将学习如何使用 TypeScript 编写 Angular 应用程序。
TypeScript 简介
TypeScript 是一种由 Microsoft 开发和维护的开源编程语言。它是 JavaScript 的一个超集，意味着 TypeScript 支持所有 JavaScript 语法和功能，并在此基础上添加了类型和其他强类型特性。这使得 TypeScript 可以更好地支持大型代码库，提供更好的代码可读性和模块化。
在 Angular 中，TypeScript 是一种必需的语言，因为 Angular 框架本身就是使用 TypeScript 编写的。
Angular 简介
Angular 是一个基于 TypeScript 的 Web 应用程序框架。它由 Google 开发并维护，旨在提供一组工具和特性，使开发人员可以更快地开发高质量的应用程序。Angular 非常适合大型企业应用程序的开发，因为它提供了很好的可维护性、可扩展性和可重复使用性。
在 Angular 中，您可以使用 TypeScript 编写组件、服务、指令、管道等，这些东西将组成您的应用程序。下面我们将学习如何使用 TypeScript 编写这些组件。
开始编写 Angular 应用程序
要开始编写 Angular 应用程序，您需要安装 Node.js 和 Angular CLI。在完成安装后，您可以使用以下命令来创建一个新的 Angular 应用程序：
ng new my-app
此命令将为您创建一个具有默认设置的新应用程序。接下来，使用以下命令启动开发服务器：
cd my-app ng serve
现在，您可以在浏览器中访问 http://localhost:4200 来查看您的应用程序。
编写第一个组件
让我们开始编写一个简单的组件来显示“Hello World！”。首先，在 app 目录下创建一个名为 hello-world 的新组件：
ng generate component hello-world
运行此命令后，Angular CLI 将为您创建一个新的组件，并自动将其添加到您的应用程序中。接下来，您需要在 hello-world.component.ts 文件中编写组件代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------------
--------- -
--------- -----------
--
--
------ ----- ------------------- --此代码将创建一个名为 HelloWorldComponent 的新组件，该组件将在 HTML 中呈现 "Hello World!"。
现在，您需要在 app.component.html 文件中添加 app-hello-world 标记来使用此组件：
<app-hello-world></app-hello-world>
当您重新加载应用时，您将在页面上看到 "Hello World!"。
使用属性和事件
组件不仅可以显示静态文本，还可以使用属性和事件来呈现动态内容和响应用户输入。
在这里，我们将修改 hello-world 组件以使用属性来呈现动态文本，并使用事件来响应用户输入。在 hello-world.component.ts 文件中，我们将添加一个名为 name 的属性和一个名为 onButtonClick 的事件处理程序：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------------
--------- -
--------- -- ---- --------
------- ------------------------------- -----------
--
--
------ ----- ------------------- -
---- - --------
--------------- -
------------------- -----------
-
-此代码将添加一个名为 name 的属性，该属性包含要呈现的动态文本。我们将在模板中使用插值表达式 {{ name }} 将其呈现为静态文本的一部分。此代码还将添加一个名为 onButtonClick 的事件处理程序，该处理程序将在用户单击按钮时调用。我们将在此处理程序中将消息记录到控制台中。
现在，我们需要在 app.component.html 文件中添加 app-hello-world 标记，并为 name 属性和 onButtonClick 事件绑定适当的值：
<app-hello-world [name]="name" (onButtonClick)="onButtonClick()"></app-hello-world>
此代码将向 app-hello-world 组件传递 name 属性，并在 onButtonClick 事件被触发时调用 onButtonClick() 方法。
使用服务
在 Angular 中，服务是一些可重复使用的代码，用于执行特定的任务。服务可以用来管理数据、执行身份验证、发出 HTTP 请求等。
在这里，我们将创建一个简单的服务，用于从外部 API 中获取数据。首先，在 app 目录下创建一个名为 data 的新服务：
ng generate service data
运行此命令后，Angular CLI 将为您创建一个新的服务，并自动将其添加到您的应用程序中。接下来，在 data.service.ts 文件中编写以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
-------------
------ ----- ----------- -
------------------- ----- ----------- --
--------- -
------ ------------------------------------------------------------
-
-此代码将创建一个名为 DataService 的新服务，该服务将使用 HttpClient 类从远程 API 获取数据。我们将在 app.component.ts 文件中使用此服务。
现在，我们将在 app.component.ts 文件中的 AppComponent 类中注入 DataService 服务，并在应用程序启动时调用 getData() 方法：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- --------- ---------- -------
-----
--
--
------ ----- ------------ ---------- ------ -
------ ----- - ---
------------------- ------------ ------------ --
---------- -
------------------------------------------- ------ -- -
---------- - -----
---
-
-此代码将向 AppComponent 类注入 DataService 服务，并在 ngOnInit() 生命周期钩子中调用 getData() 方法。我们将使用 *ngFor 指令循环遍历 posts 数组，并使用插值表达式 {{ post.title }} 将每个帖子的标题呈现为静态文本的一部分。
结论
TypeScript 是一个优秀的编程语言，并提供了许多类型和其他强类型特性，以帮助您编写更好、更健壮的代码。Angular 是一个基于 TypeScript 构建的 Web 应用程序框架，使开发者可以更快地开发高质量的应用程序。使用 TypeScript 编写 Angular 应用程序，可以帮助您更好地管理代码，提高可读性和模块化，并提供更好的可维护性、可扩展性和可重复使用性。在本文中，我们学习了如何使用 TypeScript 编写 Angular 应用程序，并创建了一个简单的组件、使用属性和事件、使用服务获取数据。
希望此文可帮助您掌握 TypeScript 和 Angular，并快速构建出高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672dc3f2eedcc8a97c85dd31