前言

本书介绍的是TypeScript，你从书名中其实已经知道了这一点。不过，本书不仅介绍TypeScript，还将介绍如何使用TypeScript完成一些比较复杂的项目。因此，本书介绍的主题比你之前学习过的TypeScript相关主题可能稍微难一些。

所以，我们也许可以把开场白改为这样：本书介绍的是TypeScript，以及如何用有趣的方式使用TypeScript和一些高级技术来创建有趣的项目。

必须说明，本书不介绍如何使用Angular、React、Vue或ASP.NET Core进行编程。这些都是庞大的主题，应该用整本书的篇幅进行解释（事实上，在每章末尾，我尽量推荐一些资源，它们能够帮助你更深入地了解相关主题）。对于Angular和React，我将每章介绍的新功能的相关概念限制在5个以内。当使用的技术（如Bootstrap）具有针对其他技术的具体实现时，我们将使用最合适的库，例如为React使用reactstrap。之所以如此，是因为这些库是针对相应用户界面（User Interface，UI）框架设计的。

在为本书做最初调查时，有个问题一再浮现：现在的热点技术是什么？人们在使用什么新的、令人兴奋的新技术？本书旨在介绍一些这样的技术，包括GraphQL、微服务和机器学习。同样，本书无法介绍相关技术的所有信息。所以，本书只是简单介绍这些技术，并展示在使用这些技术进行开发时，TypeScript的强大功能可以让开发工作变得简单许多。

在阅读本书的过程中，你会发现我非常关注使用面向对象编程（Object-Oriented Programming，OOP）。我们将构建大量的类。这么做有许多原因，但最主要的是前面章节中编写的代码将能够在后面的章节中重用。而且，我希望编写出的代码能让你直接添加到自己的代码库中。在TypeScript中，基于类的开发让实现这些目的变得简单多了。另外，即使使用了比较高级的技术，这也使我们能够介绍一些让代码变得更加简单的方法，所以我们讨论了一些原则，例如让类具有单一职责（称为单一职责模式），以及基于模式的开发，即通过对复杂问题应用众所周知的软件开发模式，让解决方案变得更加简单。

除了TypeScript，我们还将在大部分章节中使用Bootstrap设计UI。在介绍Angular的两章中，我们则介绍如何使用Angular Material布局界面，因为Material和Angular非常搭配，如果你要开发商业Angular应用程序，则很有可能会使用Material。

第1章介绍了你以前可能没有使用过的功能，例如REST属性和展开，所以我们将比较深入地介绍它们。在后面的章节中，我们将很自然地使用它们，而不会打断代码讲解来指出特定的TypeScript功能。另外，在学习本书的过程中，你会发现后面的章节常常会再次使用前面章节中的功能，所以我们不是简单地做一次开发，然后就把那些功能抛之脑后。

本书面向的读者

本书的读者应该至少已经熟悉TypeScript的基础知识。如果你知道如何使用TypeScript编译器tsc来构建配置文件和编译代码，也知道TypeScript中的类型安全、函数和类等基础知识，那将大有裨益。

即使你对TypeScript有比较深入的了解，本书中也会介绍一些你以前可能没有使用过的技术，你应该会对这些资料感兴趣。

本书内容

第1章介绍你之前可能没有接触过的TypeScript功能，例如使用联合和交叉类型，创建自己的类型声明，以及使用装饰器来启用面向切面编程等。通过学习该章，你将熟悉专业开发人员每天都会用到的各种TypeScript技术。

第2章将编写第一个实用的项目：一个简单的markdown编辑器。我们将创建一个简单的解析器，在Web页面内将其绑定到一个文本块，用来识别用户何时输入一个markdown标签，并在预览区域反映出效果。在编写该章的代码时，我们将介绍如何在TypeScript中使用设计模式来构建更加健壮的解决方案。

第3章将使用流行的React库构建一个联系人管理器。在编写这个应用程序时，我们将看到React如何使用特殊的TSX文件来混合TypeScript及HTML，最终生成用户组件。我们还将看到如何在React中使用绑定和状态，在用户改变值时自动更新数据模型。这里的最终目的是创建一个UI，允许用户输入数据，并使用浏览器自己的IndexedDB数据库来保存和检索信息，以及了解如何对组件应用验证来确保输入有效。

第4章介绍MEAN栈，这是我们第一次接触MEAN。MEAN栈指的是一组相互协作的技术，用来构建能够在客户端和服务器运行的应用程序。我们使用MEAN栈来编写一个相册应用程序，使用Angular创建UI，使用MongoDB存储用户上传的图片。在创建这个应用程序时，我们将使用Angular来创建服务和组件。同时，我们将看到如何使用Angular Material来创建有吸引力的UI。

第5章告诉我们，并非只能使用REST在客户端与服务器之间进行通信。现在很热门的一个主题是使用GraphQL创建应用程序，让这种应用程序使用GraphQL服务器和客户端来使用和更新来自多个源的数据。该章编写的Angular应用程序将为用户管理一个待办事项列表，并进一步演示Angular的功能，例如使用模板在只读功能和可编辑功能之间进行切换，另外还将介绍Angular为验证用户输入提供的功能。

第6章进一步探索不依赖REST通信的思想。我们将介绍如何在Angular中创建一个长时间运行的客户端/服务器应用程序，让客户端和服务器连接，从而能够在客户端和服务器之间来回发送消息。我们将使用Socket.IO编写一个聊天室应用程序。为了进一步增强代码，我们将使用一个外部身份验证提供商来帮助我们专业地保护应用程序，从而避免一些令人尴尬的身份验证问题，例如用明文存储密码。

第7章将说明我们已经无法忽视云服务的发展。该章将创建的应用程序是最后一个Angular应用程序，它使用了两个不同的、基于云的服务。第一个云服务是必应地图，我们在这里展示了如何注册一个第三方的云地图服务，并把它集成到自己的应用程序中。我们将介绍该服务对不同使用规模的收费情况。我们将显示一个地图来让用户保存兴趣点，并通过使用Google的Firebase云平台，把这些数据存储到一个单独的云数据库中。

第8章利用前面使用React和MEAN栈的经验，介绍如何使用一个等效的基于React的栈。我们第一次接触MEAN时，使用REST来与一个应用程序端点通信。而在该章的应用程序中，我们将与多个微服务通信，创建一个简化的基于React的CRM系统。我们将讨论什么是微服务，什么时候使用微服务，以及如何使用Swagger来设计REST API及创建其文档。该章将重点介绍Docker，展示如何在不同的容器中运行不同的服务。容器是目前在开发人员中最热门的主题之一，因为它们能够简化推出应用程序的过程，并且使用起来不那么困难。

第9章介绍如何使用TensorFlow.js在Web浏览器中托管机器学习。我们将使用流行的Vue.js框架编写一个应用程序，使用预训练的图像模型来识别图像。之后将介绍如何创建一个姿势检测应用程序，识别图像中人的姿势。可以扩展这个应用程序，使用摄像头来跟踪姿势，从而方便体育教练执教。

第10章偏离了之前的主题。前面已经编写了多个应用程序，使用TypeScript作为主要编程语言来构建UI。该章将使用ASP.NET Core和免费的Discogs音乐API来编写一个音乐库应用程序，允许用户输入艺术家的姓名并搜索其音乐作品的详细信息。我们将结合使用C#和TypeScript来查询Discogs并构建UI。

如何使用本书

·在阅读本书前，你应该了解TypeScript的基础知识。对HTML和Web页面的了解也会很有用。

·当下载代码使用包管理器（如npm）时，你需要知道如何恢复包，因为我们没有在代码存储库中包含这些包。要恢复包，可以在package.json所在的目录中使用npm install。

·在最后一章中，你不需要自己下载缺少的包。当生成项目时，Visual Studio将恢复这些包。

下载示例代码及彩色图像

本书的示例源码及所有截图和样图，可以从http://www.packtpub.com通过个人账号下载，也可以访问华章图书官网http://www.hzbook.com，通过注册并登录个人账号下载。

本书的代码示例也在GitHub上提供，地址为https://github.com/PacktPublishing/Advanced-TypeScript-3-Programming-Projects。如果代码有更新，将更新到GitHub存储库中。

Packt出版社还在https://github.com/PacktPublishing/提供了其他众多图书和视频的代码文件。欢迎浏览查看！

本书采用的约定

代码块的格式如下所示：

当我们希望你注意代码块的某个部分时，将加粗显示相应的代码：

命令行输入或输出的格式如下所示：

表示警告或者需要重点注意的信息。

表示提示和小技巧。