前端开发中，Angular 是一个非常流行的框架，它可以帮助开发者构建复杂的 Web 应用程序。而结合 TypeScript 开发，可以大大提高代码的可读性和可维护性。本文将介绍如何使用 TypeScript-Angular 开发一个简单的 Hello Angular 应用程序。
安装环境
首先，需要安装 Node.js 和 Angular CLI。Node.js 是 JavaScript 的运行环境，而 Angular CLI 是一个命令行工具，用于创建和管理 Angular 项目。
安装 Node.js 的方法非常简单，只需要到官网下载对应系统的安装包即可。安装完成后，打开终端并输入以下命令来检查 Node.js 是否成功安装：
node -v
如果输出了 Node.js 的版本号，则表示安装成功。
接着，安装 Angular CLI。同样，打开终端并输入以下命令：
npm install -g @angular/cli
这个命令将会全局安装 Angular CLI，安装完成后，可以输入以下命令来检查 Angular CLI 是否成功安装：
ng version如果输出了 Angular CLI 的版本号，则表示安装成功。
创建项目
安装好环境后，就可以创建一个新的 Angular 项目了。首先，在命令行中进入项目要存储的目录，然后输入以下命令：
ng new hello-angular
这个命令将会创建一个名为 "hello-angular" 的新项目，并自动下载所需的依赖包。这个过程可能需要一些时间，取决于网络速度。
创建完成后，进入项目目录：
cd hello-angular
现在，可以输入以下命令来启动项目并在浏览器中显示：
ng serve --open
这个命令将会编译项目，并在浏览器中自动打开一个新的标签页，显示 Angular 的欢迎页面。
创建组件
现在已经成功创建了一个 Angular 项目，接下来需要创建一个组件来显示 "Hello Angular"。在 Angular 中，组件是应用程序的基本构建块，用于组织应用程序的 UI。
首先，创建一个名为 "hello" 的组件：
ng generate component hello这个命令将会在项目的 "src/app" 目录下创建一个名为 "hello" 的新组件，同时还会自动修改其他文件，以便使应用程序能够使用新组件。
接下来，在 "hello" 组件的 HTML 文件中添加以下代码：
<p> Hello Angular! </p>
这个代码将会在页面中显示 "Hello Angular!" 的文本。
然后，在 "app.component.html" 文件中，将原有的代码替换为以下代码：
<app-hello></app-hello>这个代码将会在页面上显示 "hello" 组件。
集成 TypeScript
在创建组件之后，接下来需要将 TypeScript 集成到项目中。在 Angular 项目中，TypeScript 是默认的开发语言。
首先，在命令行中输入以下命令，安装 TypeScript：
npm install --save-dev typescript
这个命令将会在项目中添加 TypeScript 的开发依赖。
接着，在 "tsconfig.json" 文件中添加以下代码：
{ "compilerOptions": { "strict": true, "esModuleInterop": true } }
这个代码将会启用 TypeScript 的严格模式，并让 TypeScript 与 JavaScript 的模块格式兼容，以便正确运行项目。
现在，可以在项目中创建一个名为 "hello" 的 TypeScript 文件。在 "hello.component.ts" 文件中添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------ ------------ ------------------------- ---------- ------------------------- -- ------ ----- -------------- - ------- - ------ ---------- -展开代码
这个代码将会定义一个名为 "HelloComponent" 的组件，并在组件中定义了一个名为 "message" 的属性，用于存储要在页面上显示的文本。
然后，在 "hello.component.html" 文件中，将原有的代码替换为以下代码：
<p> {{ message }} </p>
这个代码将会在页面上显示 "Hello Angular!" 的文本。
总结
至此，已经成功使用 TypeScript-Angular 开发了一个简单的 Hello Angular 应用程序。在这个过程中，介绍了如何创建项目、创建组件以及如何集成 TypeScript。相信读者已经对 TypeScript-Angular 开发有了更深的理解，并且能够运用到自己的开发中。
完整的示例代码已经上传至 GitHub，欢迎大家查看：typescript-angular-hello-world。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645df5ce968c7c53b0050981
