Angular2 是目前最受欢迎的前端框架之一，它可以帮助开发者构建高效、灵活、可维护的 Web 应用程序。而 Typescript 则是一种由微软开发的程序语言，它为 Javascript 带来了更好的类型检查和面向对象的特性。本文将介绍如何使用 Typescript 构建 Angular2 应用。
环境搭建
在开始之前，我们需要先搭建好开发环境。首先，你需要安装 Node.js 和 npm（Node.js 的包管理器）。安装完成后，运行以下命令安装 Angular2 的 CLI 工具：
npm install -g @angular/cli
安装完成后，你就可以使用 ng 命令创建一个新的 Angular2 应用了：
ng new my-app
这个命令会创建一个名为 my-app 的新项目，并自动安装所有必要的依赖包。
创建组件
在 Angular2 中，组件是构建 Web 应用的基本单位。我们可以使用 ng generate component 命令来创建一个新的组件：
ng generate component my-component
这个命令会在 src/app 目录下创建一个名为 my-component 的新组件，并自动创建相关的文件和代码。
使用 Typescript
在默认情况下，Angular2 使用 Javascript 作为开发语言。但是，我们可以使用 Typescript 来编写我们的应用程序。要使用 Typescript，我们需要在项目中添加一个 tsconfig.json 文件。在项目根目录下创建一个名为 tsconfig.json 的文件，并添加以下内容：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
------------------- -------
------------ -----
------------------------ -----
------------------------- -----
------ -
---------
-----
-
-
-这个文件指定了编译器的选项，包括目标语言版本、模块化方式、源映射、装饰器支持等等。我们还需要在 tsconfig.json 文件中添加一个 exclude 属性，用于指定哪些文件不应该被编译：
{
"exclude": [
"node_modules",
"dist"
]
}现在，我们可以开始使用 Typescript 编写代码了。在 src/app 目录下创建一个名为 my-component.component.ts 的文件，并添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- -------------------------------- -- ------ ----- -------------------- - ----- - ------- ----------- -
这个代码使用了 Typescript 的类和装饰器语法，定义了一个名为 MyComponentComponent 的组件，并将其与一个 HTML 模板和 CSS 样式表关联起来。我们还定义了一个名为 title 的属性，并将其初始化为一个字符串。
编译和运行
现在，我们可以使用 ng serve 命令编译和运行我们的应用程序了：
ng serve
这个命令会启动一个本地服务器，并在默认端口（4200）上运行我们的应用程序。打开浏览器，访问 http://localhost:4200，你应该能够看到一个显示了 "Hello, Angular2!" 的页面。
总结
本文介绍了如何使用 Typescript 构建 Angular2 应用。我们学习了如何创建一个新的组件，并使用 Typescript 编写组件代码。同时，我们还学习了如何使用 Angular2 的 CLI 工具来快速搭建开发环境和创建新项目。希望本文对你有所帮助，让你更加了解 Angular2 和 Typescript。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66266cb5c9431a720c2e0b34