TypeScript项目开发实战

本书是一本TypeScript进阶实践指南，通过9个实用项目，详细讲解如何使用TypeScript 3.0和不同的JavaScript框架开发高质量的应用程序。书中不仅介绍TypeScript的核心概念与技术，还涵盖Angular和React的一些新功能，以及GraphQL、微服务和机器学习等相关的新技术。

全书共10章：

第1章介绍你之前可能没有接触过的TypeScript功能，

第2章将编写第一个实用的项目——一个简单的markdown编辑器，

第3章将使用流行的React库构建一个联系人管理器，

第4章介绍MEAN栈，

第5章介绍如何使用GraphQL和Apollo创建Angular待办事项应用程序，

第6章介绍如何使用Socket.IO构建一个聊天室应用程序，

第7章介绍如何使用必应地图和Firebase创建基于云的Angular地图应用程序，

第8章介绍如何使用一个等效的基于React的栈，

第9章介绍如何使用TensorFlow.js在Web浏览器中托管机器学习，

第10章介绍如何使用ASP.NET Core和免费的Discogs音乐API来编写一个音乐库应用程序。

【通过阅读本书，你将学到】：

●使用TypeScript和常用模式编写代码。

●在TypeScript中使用流行的框架和库。

●使用TypeScript来利用服务器和客户端的功能。

●应用令人兴奋的新范式，如GraphQL和TensorFlow。

●使用流行的、基于云的身份验证服务。

●结合TypeScript和C#来创建ASP.NET Core应用程序。

彼得·欧汉龙（Peter O’Hanlon）

有30多年的职业开发经验。他开发过各种类型和规模的桌面及Web应用程序。在过去18年左右的时间中，他专注于C#、WPF、JavaScript及TypeScript。多年来，他多次成为Code Project MVP，是Intel创新者计划的成员，并参加了Intel Ultimate Coder 2挑战赛。他始终热情拥抱新的技术和语言，他积极参与到增强和混合现实、计算机视觉、人工智能及手势识别等技术中。

适读人群 ：本书是一本TypeScript进阶实践指南。读者应预先熟悉TypeScript的基础知识。

在本书中，你将探索核心概念，并学习构建一系列网站和TypeScript应用程序。

本书首先介绍常常被其他图书忽视的一些TypeScript功能，然后讲解如何创建一个简单的markdown解析器。接着介绍React，并创建一个客户端联系人管理器。之后介绍Angular框架，并使用MEAN栈创建一个相册。接下来将帮助你创建一个GraphQL Angular待办事项应用程序，并编写一个Socket.IO聊天室，开发一个地图应用程序。之后回到React，介绍如何使用Docker和微服务。接着讲解如何使用TensorFlow和机器学习来创建一个图像分类应用程序。最后，本书介绍如何把TypeScript和C#结合起来，创建一个基于ASP.NET Core的音乐库应用程序。

学习完本书后，你将能够自信地使用TypeScript 3.0和不同的JavaScript框架来开发高质量的应用程序。

本书介绍的是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将恢复这些包。

本书的代码示例在GitHub上提供，

地址为https://github.com/PacktPublishing/Advanced-TypeScript-3-Programming-Projects。如果代码有更新，将更新到GitHub存储库中。

●第1章　TypeScript的高级特性 1

1.1　技术需求 2

1.2　使用tsconfig构建面向未来的TypeScript 2

1.3　TypeScript高级特性简介 3

1.3.1　借助联合类型使用不同的类型 3

1.3.2　使用交叉类型组合类型 5

1.3.3　使用类型别名简化类型声明 7

1.3.4　使用对象展开赋值属性 8

1.3.5　使用REST属性解构对象 10

1.3.6　使用REST处理可变数量的参数11

1.3.7　使用装饰器进行AOP 13

1.3.8　使用混入（mixin）组成类型 17

1.3.9　使用泛型，将相同的代码用于不同的类型20

1.3.10　使用映射来映射值24

1.3.11　使用Promise和async/await创建异步代码25

1.3.12　使用Bootstrap创建UI27

1.4　小结 30

习题 31

　

●第2章　使用TypeScript创建一个markdown编辑器 32

2.1　技术需求33

2.2　项目概述33

2.3　开始创建一个简单的HTML项目34

2.4　编写一个简单的markdown解析器34

2.4.1　创建Bootstrap UI 35

2.4.2　将markdown标签类型映射到HTML标签类型38

2.4.3　使用MarkdownDocument类表示转换后的markdown标记 41

2.4.4　使用访问者更新markdown文档 42

2.4.5　通过使用责任链模式决定应用哪个标签 44

2.4.6　综合运用 48

2.5　小结 49

延伸阅读50

　

●第3章　React Bootstrap联系人管理器 51

3.1　技术需求 51

3.2　项目概述 52

3.3　开始使用组件 52

3.4　创建一个支持TypeScript的React Bootstrap项目 53

3.5　创建模拟布局 53

3.5.1　创建应用程序 54

3.5.2　使用tslint设置代码的格式 55

3.5.3　添加Bootstrap支持 56

3.6　在React中使用tsx组件 57

3.6.1　React如何使用虚拟DOM来提高响应性 57

3.6.2　React应用程序的组件 58

3.7　显示个人信息界面59

3.8　验证用户输入及验证器的使用 65

3.8.1　验证地址66

3.8.2　验证姓名68

3.8.3　验证电话号码68

3.9　在React组件中应用验证70

3.10　创建数据并把数据发送给IndexedDB数据库71

3.10.1　在状态中添加对记录状态的支持 74

3.10.2　从PersonalDetails访问数据库79

3.11　增强代码83

3.12　小结83

习题84

延伸阅读84

　

●第4章　MEAN栈——构建一个相册 85

4.1　技术需求86

4.2　MEAN栈86

4.3　项目概述87

4.4　准备工作88

4.5　使用MEAN栈创建Angular相册 88

4.5.1　Angular简介 88

4.5.2　创建应用程序 90

4.5.3　使用Angular Material创建UI 91

4.5.4　使用Material添加导航 92

4.5.5　创建第一个组件——FileUpload组件 94

4.5.6　在应用程序中引入对Express的支持100

4.5.7　提供路由支持 102

4.5.8　显示图片107

4.5.9 　显示对话框114

4.6　小结 115

习题 116

延伸阅读 116

　

●第5章　使用GraphQL和Apollo创建Angular待办事项应用程序 117

5.1　技术需求118

5.2　理解GraphQL与REST的关系118

5.3　项目概述119

5.4　准备工作120

5.5　使用GraphQL和Angular创建待办事项应用程序120

5.5.1　创建应用程序121

5.5.2　创建GraphQL架构 126

5.5.3　创建GraphQL解析器 129

5.5.4　使用Apollo Server作为服务器 133

5.5.5　GraphQL Angular客户端 135

5.5.6　向页面组件添加内容 139

5.6　小结 149

习题 150

延伸阅读150

　

●第6章　使用Socket.IO构建一个聊天室应用程序 151

6.1　技术需求152

6.2　使用Socket.IO建立客户端/服务器之间的长时间通信 152

6.3　项目概述152

6.4　开始使用Socket.IO和Angular 153

6.5　使用Socket.IO、Angular和Auth0创建一个聊天室应用程序155

6.5.1　创建应用程序 156

6.5.2　为服务器添加Socket.IO支持 158

6.5.3　创建聊天室客户端 160

6.5.4　使用Auth0授权和验证用户 162

6.5.5　使用安全路由165

6.5.6　添加客户端聊天功能166

6.5.7　使用GeneralchatComponent完成我们的应用程序170

6.6　小结172

习题172

延伸阅读172

　

●第7章　使用必应地图和Firebase创建基于云的Angular地图应用程序 173

7.1　技术需求174

7.2　现代应用程序及使用云服务的趋势 174

7.3　项目概述174

7.4　在Angular中使用必应地图175

7.4.1　注册必应地图 176

7.4.2　注册Firebase 178

7.5　使用Angular和Firebase创建必应地图应用程序181

7.5.1　添加地图组件181

7.5.2　兴趣点182

7.5.3　表示地图图钉184

7.5.4　使用地图搜索做一些有趣的操作 186

7.5.5　将必应地图添加到屏幕上188

7.5.6　地图事件和图钉的设置190

7.5.7　保护数据库194

7.6　小结195

习题196

　

●第8章　使用React和微服务来构建一个CRM 197

8.1　技术需求197

8.2　理解Docker和微服务198

8.2.1　Docker术语 198

8.2.2　微服务 199

8.2.3　使用Swagger设计REST API 200

8.3　使用Docker创建一个微服务应用程序 203

8.3.1　开始使用Docker创建一个微服务应用程序 204

8.3.2　添加服务器端路由支持 209

8.3.3　使用Docker运行服务 212

8.3.4　创建React UI 215

8.3.5　添加导航 223

8.4　小结 224

习题 225

延伸阅读 225

　

●第9章　使用Vue.js和TensorFlow.js进行图像识别 226

9.1　技术需求226

9.2　机器学习及TensorFlow简介227

9.2.1　什么是机器学习228

9.2.2　TensorFlow及其与机器学习的关系228

9.3　项目概述229

9.4　开始在Vue中使用TensorFlow 229

9.4.1　创建基于Vue的应用程序230

9.4.2　使用Vue模板显示主页232

9.4.3　修改HelloWorld组件来支持图像分类236

9.4.4　Vue应用程序的入口点 239

9.4.5　添加姿势检测功能243

9.4.6　完成姿势检测组件250

9.5　小结 253

习题254

延伸阅读254

　

●第10章　构建ASP.NET Core音乐库255

10.1　技术需求255

10.2　ASP.NET Core MVC简介256

10.3　项目概述258

10.4　开始使用ASP.NET Core、C#和TypeScript创建一个音乐库259

10.4.1　使用Visual Studio创建ASP.NET Core应用程序260

10.4.2　理解应用程序结构263

10.4.3　创建一个Discogs模型269

10.4.4　关联控制器275

10.4.5　添加Index视图276

10.4.6　向应用程序添加TypeScript 279

10.4.7　从ASP.NET调用TypeScript功能 283

10.5　小结 285

习题 285

延伸阅读 285

习题答案 287