前言
TypeScript 是 Microsoft 推出的一种新型编程语言，它是 JavaScript 的超集，在保留 JavaScript 的特性的基础上增加了类型的支持，使得代码更加清晰、稳定和易于维护。而 Angular 是一个基于 TypeScript 的前端框架，它提供了很多功能去快速构建 web 应用程序。在学习 TypeScript 和 Angular 之前，我们先来学习一下如何使用这两个工具来创建一个最简单的 Hello,world 应用程序。
环境准备
在开始 Angular 的开发之前，我们首先需要安装以下前置依赖：
- Node.js 和 npm（Node.js 的包管理器）
- Typescript
- Angular 的命令行工具
打开终端，运行以下命令安装环境依赖：
brew install node npm install -g typescript npm install -g @angular/cli
创建一个新的 Angular 应用程序
打开终端，并执行如下命令：
ng new helloworld
执行完毕后，你会得到一个名为 "helloworld" 的文件夹。这就是 Angular 应用程序的根文件夹。
运行 Angular 应用程序
进入 "helloworld" 文件夹，并执行如下命令：
cd helloworld
ng serve执行完毕后，在浏览器中访问 http://localhost:4200，你会看到欢迎信息。
编写 Hello,world 程序
在 "src/app" 文件夹下，打开 "app.component.ts" 文件，在类声明前，添加以下代码段：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- ----------- ------------- ---------- ----------------------- -- ------ ----- ------------ - -展开代码
这里我们通过 @Component 装饰器来定义一个组件 AppComponent。其中的 selector 属性指定如何在 HTML 中使用该组件，template 属性则定义了组件的模板，用于呈现 HTML 内容，这里我们只是简单地输出了一个 "Hello, world!" 的字符串。
在终端运行 ng serve 重新启动应用程序，并访问 http://localhost:4200，你将看到一个 "Hello, world!" 的信息。
总结
通过这篇学习笔记，你了解了 TypeScript 和 Angular 的基本概念和使用方法，并成功地创建了一个最简单的 Hello,world 应用程序。在实际项目中，Angular 可以帮助我们更加高效地开发和维护 web 应用程序，让开发变得更加有趣和简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f3ab5968c7c53b014be07
