零、前言

这是一本关于 TypeScript 的书; 但话又说回来,你从标题就知道了。 但它不仅仅是一本关于 TypeScript 的书。 这是一本关于如何在基本示例之外使用 TypeScript 的书。 这意味着这是一本关于主题的书,比你第一次接触 TypeScript 时可能已经学过的稍微难一点。

所以,我们可以把这句话改成“这是一本关于 TypeScript 的书,教你如何用一些有趣又酷的方法来使用 TypeScript,这些方法比我以前使用过的那些更先进”。

首先,我要说的是,这本书不是关于如何用 Angular、React、Vue 或 ASP 编程的。 净的核心。 这些都是重要的主题,值得单独写一本书(事实上,在每一章的结尾,我都尽力为您提供其他资源,这些资源将帮助您更深入地了解这些技术,而不是我们将介绍的简短章节)。 相反,对于 Angular 和 React,我尽量将新特性的引入限制在每章不超过 5 个新概念。 当我们使用一种技术,如 Bootstrap,它有一个技术特定的实现,我们将使用最合适的库,如reactstrap的 React。 我们这样做是因为这些库被设计为与所讨论的用户界面(UI)框架一起工作。

当我们为这本书做最初的研究时,不断出现的一个问题是,“现在什么是热门?” 人们用的是什么新鲜刺激的东西?” 本书旨在介绍其中一些技术,包括 GraphQL、微服务和机器学习。 再说一遍,这本书不可能传授相关技术的所有知识。 它所做的只是介绍了这项技术,并展示了我们如何利用 TypeScript 的强大功能,在使用它进行开发时让我们的生活变得更加轻松。

我们会发现,当我们浏览这本书的时候,我倾向于把重点放在面向对象编程(OOP)上。 我们将构建很多类。 这样做的原因有很多,但最主要的原因是在前面的章节中,我们将编写在后面章节中使用的代码。 我还想写一些代码,如果你想的话,你可以直接放到你自己的代码库中。 有了 TypeScript,基于类的开发让这变得简单多了。 这也让我们有机会讨论一些技术,我们可以应用这些技术使代码变得更简单,甚至在使用更高级的技术时也是如此,因此我们讨论了一些原则,比如类具有单一职责(称为单一职责模式),以及基于模式的开发, 我们将众所周知的软件工程模式应用于复杂的问题,使解决方案变得简单。

除了 TypeScript,我们还将在大部分章节中研究如何在 UI 中使用 Bootstrap。 在有关 Angular 的几章中,我们确实考虑了如何使用 Angular Material 而不是 Bootstrap 来布局接口,因为 Material 和 Angular 是密切相关的,如果你最终要开发 Angular 的商业应用,那么你很有可能会使用 Material。

第一章介绍了我们以前可能没有使用过的功能,如休息和扩展,所以我们将在这里更深入地介绍它们。 在后面的章节中,我们将以一种自然的方式使用这些特性,因此,我们将倾向于以一种自然的方式使用这些特性,而不是通过调用特定的项来扰乱代码的流程。 另一方面,随着我们阅读这本书,我们会发现前面章节的特点通常会再次被提及,所以我们不会只做一次就忘记它。

这本书是给谁的

这本书是为至少熟悉 TypeScript 基础知识的人准备的。 如果你知道如何使用 TypeScript 编译器 tsc 来构建配置文件和编译代码,以及 TypeScript 中的类型安全、函数和类等基本知识,那么你应该能够从这本书中获得一些东西。

如果你对 TypeScript 有更深入的了解,那么你应该会对大量你从未使用过的技术感兴趣的材料感兴趣。

这本书的内容

第一章,高级 TypeScript 特性,介绍了我们 TypeScript 的特点,我们可能没有遇到之前,比如使用联盟和交叉口类型,创建自己的类型声明,并使用修饰符,使面向方面编程等功能。 通过这一章,我们将熟悉各种 TypeScript 技术,作为专业程序员,我们将在日常工作中使用这些技术。

第二章用 TypeScript 创建一个 Markdown 编辑器,这是我们写的第一个实际项目——一个简单的 Markdown 编辑器。 我们将创建一个简单的解析器,我们将在一个网页内,连接到一个文本块,并使用它来识别用户何时输入了 Markdown 标签,并在预览区反映这一点。 在编写这段代码时,我们将看到如何使用 TypeScript 的设计模式来构建更健壮的解决方案。

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

第四章The MEAN Stack - Building a Photo Gallery是我们第一次遇到 MEAN Stack。 MEAN 堆栈描述了用于构建在客户机和服务器上运行的应用的特定数量的协作技术。 我们使用这个堆栈来编写一个照片库应用,使用 Angular 作为我们的 UI,使用 MongoDB 来存储用户上传的图片。 在创建应用时,我们将使用 Angular 的强大功能来创建服务和组件。 同时,我们将看到如何使用 Angular Material 来创建吸引人的 ui。

第 5 章Angular ToDo App with GraphQL and Apollo,向我们介绍了这样一个理念:我们不只是需要使用 REST 在客户端和服务器之间进行通信。 当前的热门话题之一是使用 GraphQL 创建应用,这些应用可以使用 GraphQL 服务器和客户机从多个点消费和更新数据。 我们在本章中编写的 Angular 应用将为用户管理一个待办事项列表,并进一步演示 Angular 的特性,比如使用模板在只读和可编辑特性之间切换,以及看看 Angular 提供了哪些开箱即用的功能来验证用户输入。

第六章使用 Socket 建立聊天室应用 IO,进一步探讨了我们不需要依赖 REST 通信的想法。 我们将看看如何在 Angular 中建立长时间运行的客户端/服务器应用,客户端和服务器之间的连接看起来是永久打开的,以便消息可以来回传递。 使用插座电源。 我们要写一个聊天室应用。 为了进一步增强我们的代码,我们将使用一个外部身份验证提供者来帮助我们专业地保护我们的应用,从而避免尴尬的身份验证失败,比如以明文方式存储密码。

第 7 章Angular 基于云的映射与 Firebase,云服务的增长已经不可忽视。 在这最后一个 Angular 应用中,我们将使用两个独立的云服务。 我们将要使用的第一个工具是必应地图,它将向我们展示如何注册第三方云地图服务,并将其集成到我们的应用中。 我们将讨论规模对这项服务成本的影响。 我们将显示一个地图,用户可以在其中保存感兴趣的点,使用谷歌的 Firebase 云平台将数据存储在一个独立的基于云的数据库中。

第 8 章使用 React 和 Microservices 构建 CRM基于 React 和 MEAN 堆栈的经验,介绍我们使用等效的基于 React 的堆栈。 当我们第一次遇到 MEAN 时,我们使用 REST 与单个应用端点通信。 在这个应用中,我们将与多个微服务对话,以创建一个简化的基于反应的 CRM 系统。 我们将讨论什么是微服务,何时使用它们,以及如何使用 Swagger 设计和记录 REST api。 本章的主要收获是,我们介绍 Docker 来展示如何在服务自己的容器中运行服务; 容器目前是开发人员在开发应用时最喜欢讨论的话题之一,因为它们简化了应用的推出,而且它们并不难使用。

第 9 章Image Recognition with Vue.js and TensorFlow.js介绍了如何使用我们的 web 浏览器来使用 TensorFlow.js 进行机器学习。 我们将使用流行的 Vue.js 框架编写一个应用,使用预先训练好的图像模型来识别图像。 我们将扩展这一点,看看如何创建姿势检测应用,识别哪个姿势你是在,可以扩展到跟踪您的姿势使用网络摄像机的目的体育教练。

第 10 章NET Core Music Library,对我们来说是一个很大的不同。 现在,我们已经编写了许多应用,其中 TypeScript 代表了我们用来构建 ui 的主要编码语言。 ASP。 NET Core,我们将编写一个音乐库应用,在这个程序中,我们可以输入一个艺术家的名字,并使用免费的 Discogs 音乐 API 搜索他们的音乐细节。 我们将结合使用 c#和 TypeScript 来运行对 Discog 的查询并构建我们的 UI。

才能充分利用这本书

  • 为了使用本书的内容,你应该对 TypeScript 有一个基本的了解。 HTML 和网页的知识也会很有用。
  • 在下载代码使用包管理器(如npm)的地方,您需要知道如何恢复包,因为我们没有将它们包含在存储库中。 要恢复它们,您可以在package.json所在的目录下使用npm install,这将恢复包。
  • 在最后一章中,您不必明确地下载丢失的包。 当您构建项目时,Visual Studio 将恢复这些包。

下载示例代码文件

你可以从你的账户www.packt.com下载这本书的示例代码文件。 如果您在其他地方购买了这本书,您可以访问www.packt.com/support并注册,直接通过电子邮件将文件发送给您。

您可以按照以下步骤下载代码文件:

  1. 登录或注册:www.packt.com
  2. 选择 SUPPORT 选项卡。
  3. 点击代码下载和勘误表。
  4. 在搜索框中输入图书名称,并按照屏幕上的说明操作。

文件下载后,请确保使用最新版本的:

  • 解压缩的软件/ 7 - zip 窗口
  • Zipeg / iZip UnRarX Mac
  • 7 - zip / PeaZip Linux

本书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Advanced-TypeScript-3-Programming-Projects。 如果有对代码的更新,它将在现有的 GitHub 存储库中更新。

我们也有其他代码包从我们丰富的图书和视频目录,可在https://github.com/PacktPublishing/。 检查出来!

下载彩色图像

我们还提供了一个 PDF 文件,里面有本书中使用的屏幕截图/图表的彩色图像。 下载地址:https://static.packt-cdn.com/downloads/9781789133042_ColorImages.pdf

约定使用

本书中有许多文本约定。

CodeInText:文本码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 url、用户输入、Twitter 句柄。 下面是一个例子:“The followingtsconfig.jsonfile is used”。

代码块的设置如下:

{
  "compilerOptions": {
    "target": "ES2015", 
    "module": "commonjs", 
    "sourceMap": true, 
    "outDir": "./script", 
  }
}

当我们希望您注意代码块的特定部分时,相关的行或项以粗体显示:

{
  "compilerOptions": {
    "target": "ES2015", 
    "module": "commonjs", 
    "sourceMap": true, 
    "outDir": "./script", 
  }
}

命令行输入或输出如下所示:

npx create-react-app chapter03 --scripts-version=react-scripts-ts

加粗:表示新术语、重要单词或屏幕上看到的单词。 例如,菜单或对话框中的单词会像这样出现在文本中。 这里有一个例子:“通常,Angular 被用来创建单页应用(spa),这样客户端就会更新一小部分,而不必在导航事件发生时重新加载整个页面。”

Warnings or important notes appear like this. Tips and tricks appear like this.

取得联系

我们欢迎读者的反馈。

:如果你对这本书的任何方面有疑问,在你的信息的主题中提到书名,并在customercare@packtpub.com给我们发邮件。

勘误表:虽然我们已经采取了每一个小心,以确保我们的内容的准确性,错误确实发生了。 如果您在本书中发现了错误,请向我们报告,我们将不胜感激。 请访问www.packt.com/submit-errata,选择您的书,点击勘误表提交表格链接,并输入详细信息。

:如果您在互联网上发现任何形式的我们的作品的非法拷贝,请您提供我们的地址或网址,我们将不胜感激。 请通过copyright@packt.com与我们联系,并提供材料链接。

:如果你有兴趣成为一名作家,如果你对某一话题有专长,或者你有兴趣写一本书,请访问authors.packtpub.com

评论

请留下评论。 一旦你阅读并使用了这本书,为什么不在你购买它的网站上留下评论呢? 潜在的读者可以看到并使用您的公正的意见来做出购买决定,我们在 Packt 可以了解您对我们产品的看法,我们的作者可以看到您对他们的书的反馈。 谢谢你!

如需了解更多信息,请访问packt.com