深入理解TypeScript(txt+pdf+epub+mobi电子书下载)


发布时间:2021-03-04 10:42:00

点击下载

作者:郭文超,等

出版社:电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

深入理解TypeScript

深入理解TypeScript试读:

前言

TypeScript是一种由微软开发的、开源的编程语言,自2012年10月发布首个公开版本以来,它已得到了人们的广泛认可。

TypeScript发展至今,已经成为很多大型项目的标配,其提供的静态类型系统,大大增强了代码的可读性及可维护性;同时,它提供最新的和不断发展的JavaScript特性,能让我们构建更健壮的组件。

相信随着前端项目的日益庞大,TypeScript将会被越来越多的开发者使用。

主要内容

本书是TypeScript Deep Dive的中文版,下面是每个章节的内容概要。

第1章:本章主要介绍学习 TypeScript之前需要具备的一些知识,以及为什么要使用TypeScript。从中你可以学到TypeScript与JavaScript的不同之处。

第2章:本章主要介绍与JavaScript有关的一些基础知识。熟练使用TypeScript的一个重要前提是要了解JavaScript。

第3章:本章主要介绍与ES6+有关的知识点,与之相关的功能已经可以在TypeScript中使用了。

注:ES6是ECMAScript 6.0的简称,ECMAScript可以被理解为JavaScript的标准。本书约定,ES6+指的是ECMAScript 6.0及以上的版本。

第4章:本章将会介绍 TypeScript 项目中的编译上下文、声明空间、模块、命名空间和动态导入表达式。

第5章:本章将教会你如何快速创建一个TypeScript项目。

第6章:本章将介绍TypeScript的类型系统,通过本章的学习,读者将能够理解并灵活运用类型注解。这将为读者进一步了解类型系统做好铺垫。

第7章:本章将介绍在React JSX(JSX即JavaScript XML,是一种JavaScript和XML混写的语法,是对JavaScript的扩展)中如何使用TypeScript。

第8章:本章将介绍编译选项,会着重介绍noImpliciAny和strictNullChecks。

第9章:本章将介绍在TypeScript中常见错误的原因及错误的处理办法。

第10章:本章将介绍TypeScript开发与测试中常用的一些工具,如npm、Jest、Prettier、Husky、ESlint、Changelog等。

第11章:本章将介绍在真实项目中使用TypeScript时的一些小技巧和一些好的建议。

第12章:本章将推荐一些TypeScript的代码风格。

第13章:本章将介绍TypeScript的编译原理,让读者知其然,并知其所以然。

读者须知

为了更好地掌握本书内容,你需要具备一定的 JavaScript 知识,但这并不是必需的,因为在本书的第1、2、3章,我们将会一起学习JavaScript。

参考资料说明

本书提供了大量的参考资料以方便读者更好地了解书中提到的相关技术及工具。为了保证参考资料相关链接能够实时更新,特将“参考资料”文档放于博文视点官方网站,读者可在http://www.broadview.com.cn/37651页面进行下载。第1章 为什么要使用TypeScript

本章主要介绍如何开始使用TypeScript,以及为什么使用TypeScript。1.1 开始使用TypeScript

TypeScript代码会被编译成JavaScript代码,JavaScript代码才是实际被执行的代码。在开始之前,你需要准备好以下工具。

● TypeScript编译器。它是OSS(Open Source Software,开源软件),在源代码和npm(Node.js包管理工具)上可以找到。

● TypeScript编辑器。如果愿意,你可以使用Notepad,但是我更推荐使用Visual Studio Code(以下简称VS Code)和我所写的扩展工具。当然还有其他许多IDE(Integrated Development Environment,集成开发环境)也支持TypeScript。

1.TypeScript版本

本书将介绍许多与版本无关的内容,但我通常建议人们使用稳定的版本,因为随着时间的推移,不断更新的编译器的测试用例将会捕获越来越多的Bug。

在安装TypeScript之前,需要先安装npm(具体见第10章)。然后可以使用命令行来安装TypeScript,如下所示。

现在,局部安装的TypeScript将是最新版本,而且各种IDE也支持它。例如,你可以让VS Code通过创建.vscode/settings.json来使用这个版本,如下所示。

2.获取源代码

此书的源代码可以在Basarat的GitHub个人主页上找到,地址详见参考资料[1],大多数代码示例都可以直接复制到VS Code中运行。1.2 选择TypeScript的理由

微软推出TypeScript主要是为了实现两个目标。

● 为JavaScript提供可选的类型系统。

● 兼容当前及未来的JavaScript的特性。

下面将对这两个目标进行详尽的解析。

1.TypeScript的类型系统

读者可能会问,为什么要给JavaScript加上类型?

类型系统能够提高代码的质量和可维护性。大型团队(如 Google、Microsoft、Facebook等)经过不断实践后得出一些结论,以下两点尤其值得注意。

● 类型有利于代码的重构,它有利于编译器在编译时而不是运行时捕获错误。

● 类型是出色的文档形式之一,函数签名是一个定理,而函数体是具体的实现。

然而,类型总是有一些不必要的复杂的存在方式,而TypeScript在这方面尽可能地降低了入门门槛。它是通过以下方式做到的。

1)JavaScript即TypeScript

TypeScript为JavaScript代码提供了编译时的类型安全。由TypeScript的名字就可以看出,这种做法并不奇怪。最棒的是这些类型是完全可选的。写在.js文件里的JavaScript代码,可以被重新命名为.ts文件,TypeScript仍然会返回与原始JavaScript文件相同的.js文件。被设计成JavaScript的“超集”,并且带有可选的类型系统,TypeScript是经过慎重考虑并有意这样做的。

2)类型可以是隐式的

TypeScript 将尽可能多地去推断类型信息,以便在代码开发过程中以极小的成本为你提供类型安全。例如,在下面的代码里,TypeScript会知道 foo的类型是number,并在第2行显示把字符串赋值给它是错误的。

这种类型推断是很有必要的。如果你做一些类似上面例子里的事情,那么,在接下来的代码里,你就不能很确定 foo 是 number 类型的还是 string 类型的。这类问题经常出现在大型、多文件的代码库中。稍后我们将会深入探讨类型推断的规则。

3)类型可以是显式的

正如之前所提到的,TypeScript 会尽可能安全地推断类型。然而,你可以使用类型注解来做下面的事情。

● 帮助编译器,更重要的是为下一个必须阅读代码的开发人员记录内容。

● 强制编译器编译你认为它应该去编译的内容,这可以让编译器对代码所做的算法分析与你对代码的理解相匹配。

在后面的章节中,我们将讨论TypeScript支持的所有注解语法的细节。

4)类型是结构化的

在一些语言(尤其是带有名义上的类型系统的语言)里,静态类型会导致一些不必要的方式的存在,因为即使知道代码可以正常工作,语言的语义也会迫使你复制周围的一些东西。这就跟AutoMapper这样的东西对C#来说非常重要是一个道理。在TypeScript中,我们真的希望类型对JavaScript初学者来说是非常简单的,因此,TypeScript的类型是结构化的。这意味着鸭子类型是一流的语言结构。在下面的例子中,函数iTakePoint2D 将会接受包含它所期望的事物(x和y)的所有内容。

5)类型错误不会阻止JavaScript的正常运行

为了方便把JavaScript代码迁移到TypeScript,即使存在编译错误,在默认情况下,TypeScript代码也会尽可能地被编译为JavaScript代码,例如下面的示例。

将会编译成下面这样。

因此,你可以将JavaScript代码逐步迁移至TypeScript,这与其他语言编译器的工作方式有很大不同,而这也正是TypeScript被青睐的另一个原因。

6)类型可以由环境来定义

TypeScript 的主要目标之一是让人们能够安全、轻松地在 TypeScript 中使用现有的JavaScript库。它可以通过声明来做到这一点。TypeScript提供了一个浮动的标准来衡量你希望在声明中投入多少努力;投入的越多,你获得的类型安全和代码智能提示就越多。请注意,大多数流行的 JavaScript 库的声明定义已经由 DefinitedTyped 社区编写过了,因此,在大多数情况下,声明文件已经存在;或者,至少已经拥有了大量经过深思熟虑的可用的TypeScript声明模板。

可以把jQuery作为一个编写声明文件的简单示例。在默认情况下,TypeScript要求(正如良好的 JavaScript代码所要求的一样)在使用变量(即在某处使用 var)之前先进行声明。

一个快速的修复方法是,你可以告诉TypeScript,这里确实存在被叫作$的变量。

如果你愿意,可以基于此基础来定义结构,并提供更多信息以保护你免受错误的影响。

当你了解了更多关于TypeScript的信息(如interface、any等)后,我们将会详细讨论如何为现有的JavaScript创建TypeScript的类型声明。

2.支持未来的JavaScript所具有的功能

TypeScript为当前的JavaScript引擎(只支持ES5,ES5全称为ECMAScript 5.0)提供了许多计划在ES6中使用的功能。TypeScript团队正在积极添加这些功能,这些功能会随着时间的推移而越来越多,例如下面这个类。

又如箭头函数。1.3 总结

本章讨论了TypeScript的设计目的及目标。探讨了这些之后,读者就可以深入了解TypeScript的实现细节了。第2章 JavaScript常见语法

关于JavaScript和TypeScript的关系,下面将从三个方面进行简单介绍。

1.JavaScript即TypeScript

在编译成JavaScript的语言中,存在着TypeScript的众多竞争对手。TypeScript不同于它们,因为JavaScript就是TypeScript,如下图所示。

这意味着你需要学习 JavaScript (好消息是你只需要学习 JavaScript 即可)。TypeScript只是将你提供的JavaScript里所有的方法标准化了,对这句话可以做如下解读。TypeScript 只是提供一种新的语法,并不会帮助你解决 Bug(与 CoffeeScript一样,CoffeeScript 是一门可以编译成JavaScript的编程语言)。TypeScript是一种新的语言,它使你远离运行时(与Dart一样)。

可以说,TypeScript只是带有文档的JavaScript。

2.TypeScript让JavaScript更美好

TypeScript将试图保护你免受无意义的JavaScript代码的影响(所以你不需要记住这些东西)。

实际上,TypeScript只是JavaScript的一个编译器,与其他没有类型系统的编译器相比,TypeScript在类型系统方面做得更好。

3.学习JavaScript仍然是必要的

关于 JavaScript 的一些知识,你仍然需要去学习,以免不知所措。接下来我们将讨论它们。

注意:TypeScript是JavaScript的“超集”,只是编译器或IDE实际可以使用的文档。

下面我们将会讲解使用JavaScript时需要注意的一些东西。2.1 相等

在 JavaScript 中需要注意的一点是==与===的区别。在使用==比较两个变量时,会发生隐式类型转换,例如,自动将字符串类型转换为数字类型。因此,为了避免隐式类型转换带来的问题,可以使用===进行比较。

在 JavaScript 自动进行隐式类型转换时,它的选择并不总是理想的。例如,在下面的例子中,对"" 和 "0"进行比较,无论用==,还是用===,结果都是 false。因为""和"0"都是字符串类型的,并且显然是不相等的。但是对比0 和""时,0和""都是逻辑的false。因此,在使用==时,结果是true;而在使用===时,结果则是false。

注意:在TypeScript中,string类型的数据==number类型的数据,以及string类型的数据===number 类型的数据,都会在编译时报错。因此,你完全不必担心因隐式类型转换而引发的问题。

与==和===类似,!=和!==也存在同样的问题。因此,除了空检查,推荐使用===和!==,接下来我们将会讲解它们。

严格的相等

如果需要比较两个对象是否相等,仅仅使用==或===是不够的,示例如下。

为了做这种检查,我们需要使用deep-equal(详见参考资料[2])的npm包(安装命令为npm install deep-equal),如下所示。

但是,通常你不需要做这种深度的检查,你真正需要做的是检查一些id,示例如下。2.2 引用

除字面量外,JavaScript 中的任何对象(包括函数、数组、正则表达式等)都是一个引用。这意味着这些对象一旦发生变化,这种变化将会贯穿整个引用;并且在将它们赋值给一个新变量后,它们的引用也是相等的,示例如下。

1.变化将会贯穿整个引用

2.引用相等2.3 null和undefined

关于null和undefined,有一个免费的视频可供学习,详见参考资料[3]。在JavaScript以及它的扩展TypeScript中,null和undefined表示不同的意思。

● 变量没有初始化:undefined。

● 变量不可用:null。

1.检查是否相等

事实上,两者都需要检查。有趣的是,在 JavaScript 中,用==进行比较时,null和undefined相等,如下所示。

推荐使用==null来检查undefined和null,因为你通常并不希望区分它们。

注意:你也可以执行==undefined,但==null更常用。

有一种例外情况,即我们接下来将要讨论的在根级别上的undefined。

2.检查根级别上的undefined

在上文中,我们建议使用==null来检查是否相等,但是不要把它用于根级别的检查。在严格模式下,如果使用foo,并且foo为undefined,那么你将会得到一个ReferenceError的异常,且整个调用堆栈都会展开。

提示:你应该使用严格模式。事实上,如果你使用模块模式,TypeScript 的编译器将会自动插入与严格模式相关的代码。本书后面的章节将会提及此,你不必担心它。

因此,为了检查一个变量是否已经被定义,或者是否在全局作用域上,通常会使用typeof。

3.限制显式地使用undefined

因为TypeScript可以让你把结构与值分开记录,而不是像下面这样。

因此,你应该使用一个类型注解。

4.Node风格的回调函数

在Node风格的回调函数,如(err,somethingElse)=>{/*something*/}中,如果不存在任何错误,通常会把err设置为null。不管怎样,你通常只需要使用truthy进行检查即可。

当创建你自己的API(Application Programming Interface,应用程序编程接口)时,你可以使用 null 让它们保持一致。对于你自己的 API,你应该关注它是否支持Promise。如果支持的话,你就不必因为缺少相应处理而烦恼了,因为你可以使用.then和.catch处理它们。

5.不要把undefined作为有效的表示方式

例如,使用undefined可能会让一个函数变得比较可怕。

而将它改写成如下这样,则会好很多。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载