TypeScript全栈开发

978-7-115-60557-3
作者: 赵卓
译者:
编辑: 谢晓芳

图书目录:

详情

本书旨在介绍TypeScript的语法和应用。本书首先介绍TypeScript的基本语法,以帮助读者编写基本的应用程序;然后讲述TypeScript的进阶语法,这些语法可以满足复杂项目中的编程要求;接着讨论如何将TypeScript代码编译为JavaScript代码,如何快速地编写与调试TypeScript代码,如何通过工具自动检查代码的正确性;最后阐述如何在TypeScript项目中使用JavaScript,如何使用TypeScript开发前端项目与后端项目。

图书摘要

版权信息

书名:TypeScript全栈开发

ISBN:978-7-115-60557-3

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。

著    赵 卓

责任编辑 谢晓芳

人民邮电出版社出版发行  北京市丰台区成寿寺路11号

邮编 100164  电子邮件 315@ptpress.com.cn

网址 http://www.ptpress.com.cn

读者服务热线:(010)81055410

反盗版热线:(010)81055315

读者服务:

微信扫码关注【异步社区】微信公众号,回复“e60557”获取本书配套资源以及异步社区15天VIP会员卡,近千本电子书免费畅读。

内 容 提 要

本书旨在介绍TypeScript的语法和应用。本书首先介绍TypeScript的基本语法,以帮助读者编写基本的应用程序;然后讲述TypeScript的进阶语法,这些语法可以满足复杂项目中的编程要求;接着讨论如何将TypeScript代码编译为JavaScript代码,如何快速地编写与调试TypeScript代码,如何通过工具自动检查代码的正确性;最后阐述如何在TypeScript项目中使用JavaScript,如何使用TypeScript开发前端项目与后端项目。

本书适合前端开发工程师、后端开发工程师以及对TypeScript感兴趣的读者阅读。

作 者 简 介

赵卓,新蛋科技有限公司电子商务研发团队项目经理,从事过多年测试工作和开发工作,精通各类开发和测试技术。编写过的图书有《Kubernetes从入门到实践》《Selenium自动化测试完全指南:基于Python》,翻译过的图书有《精通Selenium WebDriver 3.0(第2版)》等。

前  言

Ajax的诞生使JavaScript能够提供复杂的前端网页交互功能,Node.js的诞生使JavaScript代码能够在服务器端运行,React的诞生使JavaScript可以用于手机APP的开发。近年来,JavaScript蓬勃发展,应用领域越来越广,开始用于中大型项目的开发和维护。

然而,JavaScript语言自身具有较大的局限性,它有很多设计上的缺陷,难以胜任中大型项目的开发和维护。JavaScript的致命缺陷在于它是一种弱类型的动态语言,所有的问题都无法在代码刚写完时就发现,只能在运行、测试等环节发现。最坏的情况就是问题已经存在了很久,却依旧未发现,最终给企业带来了巨大的维护成本。

2012年,由Delphi和.NET之父Anders Hejlsberg设计的开源和跨平台语言—TypeScript诞生了。TypeScript专为中大型项目设计,它在JavaScript的基础上添加了静态类型定义和基于接口与类的面向对象编程等特性,彻底打破了JavaScript的局限性,弥补了JavaScript的设计缺陷。因此,TypeScript逐渐演变为中大型项目的“刚需”,且越来越多的JavaScript框架(如Vue.js、React、AngularJS)可以使用TypeScript进行重构。

虽然TypeScript是一门新兴的编程语言,但是它已经具有非常重要的地位,它不仅能满足项目开发的需要,而且对个人职业生涯的发展至关重要。

本书将循序渐进地介绍TypeScript的语法、编译与调试和应用场景。不管是刚入门的读者,还是想要进一步提高编程能力的读者,都能从本书中有所收获。

读者对象

本书适合前端开发工程师、后端开发工程师,以及对TypeScript感兴趣的读者阅读。即使读者不具备任何JavaScript和TypeScript基础知识,也可以阅读本书。

如何阅读本书

本书共23章,分为4部分,由浅入深介绍各个知识点。

第一部分(第1~12章)主要介绍TypeScript的基本知识,包括TypeScript支持的数据类型,如何通过运算符连接数据,如何对表达式进行操作和运算,如何根据条件控制程序流程。已经具有JavaScript开发经验的读者可以直接跳过第4章和第5章,只阅读介绍各种TypeScript数据类型的其余各章。

第二部分(第13~17章)主要介绍TypeScript的进阶知识。这些知识将应用于复杂项目中的特定场景,以满足更高的编程要求。其中包括如何用模块或命名空间组织文件和代码,如何捕获错误和处理错误,如何使用内置引用对象,如何实现异步编程以及多线程编程等。除第13章与TypeScript高度相关之外,其余各章对JavaScript也适用,因此JavaScript开发经验较丰富、已了解这些知识点的读者可以跳过第14~17章。

第三部分(第18~20章)主要介绍如何将TypeScript代码按需编译为指定的JavaScript代码,如何高效地编写与调试TypeScript代码,以及如何引入扩展工具来自动检查代码及程序是否正确。

第四部分(第21~23章)主要介绍在实际中如何使用TypeScript开发前端项目与后端项目,以及如何在TypeScript项目中使用JavaScript。

读者可以根据需求选择阅读,但最好按照顺序阅读,这有助于读者循序渐进地提高,并从整体上对TypeScript有深入而系统的认识。

第一部分 基础语法

TypeScript是微软公司开发的一种新兴的开源编程语言,它在JavaScript的基础上添加了静态类型定义,既保持了JavaScript的灵活性,又解决了JavaScript的痛点。

要学习TypeScript,需要从最基本的语法开始。这些语法通常是一组规则,这些规则决定了可以使用的数据类型、如何通过各式各样的符号来连接数据组成表达式并进行操作和运算,以及如何根据不同的数据条件来控制程序流程。

本书第一部分将详细介绍TypeScript的基本语法。只有了解了这些基本语法后,才能够顺利编写出最基本的应用程序。

第1章 TypeScript简介

TypeScript是什么?它有哪些作用?在TypeScript官网上,其定义如下。

TypeScript是适用于任何规模应用的JavaScript。它具有以下特点。

TypeScript扩展了JavaScript,为它添加了类型支持。

TypeScript可以在运行代码之前找到错误并提供修复方案,从而改善开发体验。

TypeScript可用于任何浏览器、任何操作系统、任何运行JavaScript的地方,且完全开源。

简而言之,TypeScript是一种开源的编程语言,是通过在JavaScript的基础上添加静态类型定义构建而成的。TypeScript代码可以通过TypeScript编译器或Babel转译为JavaScript代码,然后在浏览器、Node.js或其他应用中运行。TypeScript是JavaScript的升级版,既保持了JavaScript的灵活,又解决了JavaScript的痛点。

为了使读者全方位了解TypeScript,在本章中,我们将先回顾TypeScript的发展史,了解它出现的意义及作用,然后搭建TypeScript开发环境,编写第一个TypeScript应用程序。

1.1 TypeScript的发展史

在介绍TypeScript时,始终会提到JavaScript。TypeScript和JavaScript究竟有怎样的关系?TypeScript究竟有哪些优势?这里就不得不从JavaScript的兴起开始说起。

1.1.1 JavaScript的兴起

1990年,欧洲粒子物理实验室的Tim Berners-Lee制定了超文本传输协议(HyperText Transfer Protocol,HTTP)、超文本标记语言(Hyper Text Markup Language,HTML)、统一资源标识符(Uniform Resource Identifier,URI)等技术规范,并制作了第一款Web浏览器和服务器,以及第一批网页。这些网页原本只在实验室内部交流使用,但在1991年,首个对外开放的网页上线,这标志着万维网正式诞生。1993年,欧洲粒子物理实验室宣布万维网对所有人免费开放,万维网的开始普及。

然而,早期万维网的网页只是完全静态的HTML页面。1994年,网景公司发布了面向普通用户的新一代浏览器Netscape Navigator 1.0版,其市场份额一度超过90%。虽然这是历史上首个成熟的浏览器,但是只能用来浏览静态HTML页面,无法与用户进行即时交互,所有的事情只能交给服务器去处理。

此时网景公司希望引入一种网页脚本语言,以便动态处理网页内容。公司高层当时进行了多种尝试,却依然没有找到完全适用的方案。由于当时Java火热且网景公司正在与Sun公司合作,因此在1995年网景公司做出决策,打算开发一种新的网页脚本语言,它必须既像Java,又要比Java简单,以便非专业的网页作者也能快速上手。

在这样的情形下,JavaScript应运而生。虽然JavaScript的名称包含Java,但是其实两者一点关系都没有。JavaScript只在名字上蹭了Java的热度,却由网景公司和Sun公司联袂推广。

当时负责设计JavaScript的Brendan Eich为了快速完成任务,只花了10天时间就设计出了JavaScript。虽然时间过于仓促,但至少达到了设计的初衷。

网景开发了JavaScript并搭载在最新版本的浏览器上,当时处于竞争关系的微软便模仿JavaScript开发了JScript,并于1996年搭载在IE3.0上。在竞争中,网景和微软各自的脚本语言中都拥有不同的语法和特性,网页变得难以兼容。

1996年年底,网景公司将JavaScript提交给欧洲计算机制造商协会(European Computer Manufacturers Association,ECMA)并进行标准化。1997年,在ECMA的协调下,由网景、Sun、微软、Borland组成的工作组确定统一脚本语言标准——ECMA-262。ECMA-262标准定义了ECMAScript语言规范,约定Navigator搭载的JavaScript、IE搭载的JScript、CEnvi搭载的ScriptEase或其他浏览器搭载的脚本语言都必须遵循统一的ECMAScript语言规范。

此后,ECMAScript作为统一标准,其语法和特性的每次升级、更新均由ECMA起草与制定,而由各个浏览器厂商将这些语法和特性实现到各自的浏览器上。

1998年,ECMAScript 2.0版发布。1999年,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。

虽然脚本语言已经标准化,但竞争仍在继续。2000年,网景败阵下来,Navigator浏览器开始衰落,直至销声匿迹。此后我们所称呼的JavaScript只是历史惯用名称,不再指原先Navigator浏览器中的JavaScript,而是指各个浏览器中已经实现的ECMAScript标准。

此后,由于缺少竞争,因此ECMAScript标准在很多年时间里没有任何更新和升级。JavaScript开始的热度不高,直到发生以下几个事件,JavaScript才真正开始兴起。

JavaScript原本只在浏览器中实现一些简单的动态效果。2005年,Ajax诞生,局势发生了变化。Ajax(Asynchronous Javascript and XML,异步JavaScript和XML)是指一种快速创建交互式、动态网页应用的开发技术。在无须重新加载整个网页的情况下,使用Ajax能够更新部分网页。从此,浏览器中的网页开始能为用户提供复杂的交互。jQuery等JavaScript框架的兴起使HTML文档的遍历、事件处理、动画等变得更加简单。

JavaScript原本只能在浏览器端使用,应用面有限,要实现服务器端功能,我们必须换一种语言。2009年,Ryan Dahl基于Chrome的JavaScript来源引擎(V8引擎)开发并发布了Node.js运行环境,使JavaScript能够在服务器端运行。于是,JavaScript也成为一门服务器端语言,就如PHP、Python、Perl、Ruby 等服务器端语言一样。从此,JavaScript能够同时应用于浏览器端及服务器端。

2013年,基于JavaScript的React开源,它引入了一种颠覆性的方式来处理浏览器DOM(Document Object Model,文档对象模型),具备很强的可维护性,越来越多的人开始使用。随着React项目越来越火热,衍生出React Native项目,并于2015年开源,开发人员从此可以使用JavaScript来同时开发iOS和Android的App。

这些事件都促使JavaScript蓬勃发展,ECMAScript标准的发展也随之推动起来,从ECMAScript 6.0版(ECMAScript 2015)开始,ECMAScript技术委员会TC39决定将ECMAScript标准改为每年都更新一次(今后的版本号为ECMAScript+年份,如ECMAScript 2016、ECMAScript 2017等),以满足日益增长的技术发展需要。

1.1.2 JavaScript的缺陷

前文已经提到,JavaScript一开始只希望在浏览器中增加一些简单的动态效果,根本没有打算应用于大型项目,而负责设计JavaScript的Brendan Eich只花了10天时间就把这门语言设计出来了。由于早期设计时间太短,因此语言细节考虑得不够严谨,甚至混乱不堪。

在一些比较小的项目中,这些问题并不明显。但随着JavaScript的兴起,JavaScript的应用领域越来越广,越来越多的中大型项目也开始使用JavaScript,JavaScript的缺陷变得越来越明显,给企业带来了巨大的维护成本。

其中核心的问题便是JavaScript是一种动态语言。不经历编译过程,所有的问题(如变量类型有误,属性为空等)都无法在代码刚完时就发现,只能在运行、调试甚至测试环节才能发现。而最坏的情况就是问题已经存在了很久,却依旧无人发现。

前几年,专注于提升研发体验、提供异常监控解决方案的平台Rollbar统计了在1000多个JavaScript项目中最常出现的十大错误类型,如图1-1所示。

可以看出,在这些错误中,有7类类型错误,一类引用错误,一类数组越界错误。由于这些错误无法在事前发现,只能在运行时才能发现,大大增加了项目的维护成本,为企业带来巨大损失。

除以上问题之外,JavaScript还有很多的设计上的缺陷,这些问题及缺陷都导致JavaScript天然地不适合开发中大型项目。

另外,JavaScript依赖各个浏览器厂商、平台厂商对最新ECMAScript标准的支持,但各个厂商的支持情况参差不齐,在一个浏览器或平台上的可用的JavaScript语法和特性在另一个浏览器或平台可能就无法使用。

图1-1 1000多个JavaScript项目中最常出现的十大错误类型

业界急需一种新的语言,它既能解决JavaScript的核心问题,又能兼容现在的ECMAScript标准,还能在各个支持ECMAScript标准的浏览器、平台上使用全部的语法和特性。在这种背景下,TypeScript诞生了。

1.1.3 TypeScript的诞生


2012年,由“Delphi和.NET之父”Anders Hejlsberg设计的开源和跨平台语言——TypeScript诞生了。TypeScript专为中大型项目设计,它是JavaScript类型的超集。TypeScript与JavaScript的关系如图1-2所示,TypeScript在JavaScript的基础上添加了静态类型定义和基于类的面向对象编程等特性,彻底弥补了JavaScript的设计缺陷。

图1-2 TypeScript与JavaScript的关系

前面已经提到JavaScript是一门动态语言,不经过编译,所有的问题都无法在代码刚写下时就发现,由此会引发各种错误,这是它的核心问题。而使用TypeScript能从根本上杜绝这类问题。对于前面提到的JavaScript项目中最常出现的十大错误类型,如果换作TypeScript,通过静态类型检查,90%的问题在代码刚写下时就可以发现,根本无须等到运行环节。

这不仅大幅降低了维护成本,而且大幅提高了开发效率。TypeScript需要编写类型定义代码,因此提高了代码的可读性,它还可以在集成开发环境(Integrated Development Environment,IDE)下进行智能提示,并能随时通知可能产生的Bug。

另外,JavaScript不利于组织中大型项目的代码,而TypeScript中加入了面向对象编程的设计,可以使用命名空间、接口、类、装饰器等语法和特性,使代码更易于组织。

TypeScript支持最新的ECMAScript标准,其代码通过TypeScript编译器或Babel可以转译为JavaScript代码,可以在任何支持JavaScript的浏览器和平台中运行。在编译时,我们可以选择ECMAScript标准的版本,即使在尚未支持最新ECMAScript标准的浏览器和平台上也可以运行所有的TypeScript语法和特性。

TypeScript具备的优秀特性使它渐渐演变为中大型项目的“刚需”,而且越来越多的JavaScript框架可以使用TypeScript进行重构。TypeScript不仅能满足项目开发的需要,而且对个人职业生涯的发展至关重要。

1.2 搭建TypeScript开发环境

要使用TypeScript进行编程,需要先搭建TypeScript开发环境。搭建工作并不复杂,接下来将详细介绍。

1.2.1 安装Node.js

TypeScript的安装需要使用npm工具,而npm运行在Node.js上,因此需要先安装Node.js。

前面已经提到,JavaScript原本只能在浏览器端使用,应用面有限。要实现服务器端的功能,我们必须换一种语言。2009年,Ryan Dahl基于Chrome的JavaScript开源引擎(V8引擎),开发并发布了Node.js运行环境,使JavaScript能够在服务端运行。

打开Node.js官网,选择Node.js版本,如图1-3所示。官网通常提供两个版本。长期维护版是稳定版本,官方会为其提供长达两年的技术支持、文档更新等服务,因此建议优先下载该版本。下载最新尝鲜版之后,你可以体验Node.js的最新特性,但可能会存在一些稳定性问题,读者可根据自己的需要下载。

图1-3 选择Node.js版本

下载后双击安装文件即可安装,安装过程非常简单,只需要选好安装路径并持续单击“下一步”按钮,直到出现Custom Setup界面,如图1-4所示。注意,应至少选择Node.js runtime(Node.js运行环境)、npm package manager(npm包管理工具)、Add to PATH(将Node.js安装目录配置到系统变量PATH中)这3项。

图1-4 Custom Setup界面

安装完成后,打开命令行窗口,输入以下命令查看Node.js运行环境以及npm包管理工具是否安装成功。

$ node --version
$ npm --version

命令运行结果如图1-5所示。如果显示了Node.js和npm的当前版本,则表示安装成功。

图1-5 命令运行结果

1.2.2 安装TypeScript

接下来,使用npm工具安装TypeScript。

npm(node package manager)是Node.js平台默认的包管理工具,也是世界上最大的JavaScript软件仓库之一,使用它可以轻松安装及发布各类基于Node.js运行的JavaScript软件。

打开命令行窗口,执行以下命令即可安装TypeScript。

$ npm install -g typescript

提示:由于npm库默认使用国外的仓库地址,因此若下载速度过于缓慢,可以设置成国内的镜像仓库地址,命令如下。

$ npm config set registry http://registry.npm.taobao.org/

要切换回默认的仓库地址,执行以下命令即可。

$ npm config set registry https://registry.npmjs.org/

安装完成后,使用tsc命令来执行TypeScript的相关代码。执行以下命令可验证安装结果,并查看tsc命令的使用方法。

$ tsc

tsc命令的执行结果如图1-6所示。

图1-6 tsc命令的执行结果

TypeScript的安装过程到此结束,为了高效地编写TypeScript代码,还需要安装一款合适的IDE。

1.2.3 安装Visual Studio Code

目前很多主流IDE(如WebStorm、Sublime Text 2、Eclipse和Visual Studio Code等)支持TypeScript,读者可以自行选择适合自己的IDE。

本书推荐使用Visual Studio Code,因为它与TypeScript同是微软公司推出的免费的开源产品,对TypeScript友好,支持智能提示,并能随时通知可能产生的Bug。

打开Visual Studio Code官网,根据操作系统下载对应的安装包,如图1-7所示。

图1-7 根据操作系统下载对应的安装包

安装过程非常简单,没有需要特别注意的设置。打开安装包后,选择安装路径,持续单击“下一步”按钮即可。Visual Studio Code安装后默认为英文界面,如需中文界面,可通过以下3个步骤。切换到Visual Studio Code中文界面,如图1-8所示。

(1)打开Visual Studio Code,单击“扩展”图标。

(2)输入关键字chinese。

(3)单击“中文(简体)”版本后面的Install按钮。

图1-8 切换到Visual Studio Code中文界面

之后重启Visual Studio Code,就可以看到中文界面了。图1-9所示为Visual Studio Code的中文界面。

图1-9 Visual Studio Code的中文界面

1.3 编写第一个TypeScript程序:Hello World

搭建好TypeScript开发环境后,你就开始编写第一个TypeScript程序。本节将演示如何用TypeScript编写程序并进行静态检查。

1.3.1 编写并运行TypeScript程序

首先,创建一个名为HelloWorld.ts的文件,代码如下。

let greeting:string = "Hello World!";
console.log(greeting);

这段代码第一眼看上去和JavaScript差不多,但仔细一看,它比JavaScript多了“:string”语句,表示将变量greeting定义为string类型。

TypeScript代码需要先通过TypeScript编译器编译成JavaScript代码,然后才能在各个浏览器或平台上运行。TypeScript代码的编译过程如图1-10所示。

图1-10 TypeScript代码的编译过程

接下来,执行以下命令,编译示例代码。

$ tsc d:\TSProject\HelloWorld.ts

执行命令后,在HelloWorld.ts所在文件夹中找到编译好的JavaScript文件HelloWorld.js,打开该文件,文件内容如下。

var greeting = "Hello World!";
console.log(greeting);

接下来,将这段JavaScript代码通过<script>标签嵌入HTML,以便在浏览器中运行;你也可以通过Node.js命令直接运行。在本例中,使用Node.js命令直接运行,命令如下。

$ node d:\TSProject\HelloWorld.js

执行结果如下。

> Hello World!

1.3.2 静态检查和智能提示

通过刚才的示例,我们已经了解了编写TypeScript程序的基本过程,但这并不足以体现TypeScript的优势。

接下来,修改HelloWorld.ts文件,修改后的文件内容如下。

let greeting:string = "Hello World!";
greeting = 123
console.log(greeting)

在本例中,我们将值123赋给了刚刚定义的string类型的变量greeting。

由于开发人员忘记了greeting是string类型的变量,因此误用了变量,改变了原来的变量类型。如果使用的是JavaScript,JavaScript并不会阻止这样的用法,代码依然可以运行,至于是否有错,需要人为判断。因此,这个问题很可能潜伏很久才被发现。

但如果使用TypeScript,在代码刚写下的一瞬间,Visual Studio Code就会检测出这个问题,并显示在问题窗口中,如图1-11所示。

图1-11 错误提示

当然,有时候并没有使用Visual Studio Code,但TypeScript在运行前会经历编译环节,因此也能在运行前检测出该问题。此时,执行如下tsc命令。

$ tsc D:\TSProject\HelloWorld.ts

命令执行结果如图1-12所示,提示编译错误。

图1-12 提示编译错误

这个例子虽然简单,但想必读者从中已经能看出TypeScript的巨大优势了。

由于TypeScript需要指定变量类型,因此当变量类型确定时,也能够确定针对该变量类型的所有操作,这为智能提示打下了基础。如果使用Visual Studio Code作为IDE,每次在变量后键入句号时,都会加载出所有针对该变量的操作以供选择,如图1-13所示,这将大幅提高开发效率。

图1-13 智能提示

第一个TypeScript程序示例到这里就结束了,后面将会详细介绍TypeScript的语法和特性。

读者服务:

微信扫码关注【异步社区】微信公众号,回复“e60557”获取本书配套资源以及异步社区15天VIP会员卡,近千本电子书免费畅读。

第2章 语法结构与类型结构

学过外语的人都知道,要学习任何一门外语,都需要从这门语言最基本的结构开始。这个道理对于学习编程语言来说同样适用。对于学习TypeScript的读者来说,首先需要了解的是它的语法结构和类型结构。

语法结构是编程语言的一系列基础性规则,涉及变量如何命名、类型如何定义、代码块如何组织、如何注释等,我们需要遵循这些规则才能编写应用程序。

在TypeScript中定义了多种类型,由于所有的操作都是对不同类型的数据进行操作,因此我们也需要了解TypeScript的类型结构,了解不同类型之间的联系。

本章将讲解TypeScript最基本的语法结构,并梳理TypeScript的类型结构。

2.1 语法结构

我们先看一段简单的代码,通过该案例了解TypeScript的语法结构。

let testScore:number = 100;
// 判断分数是否达到通过标准
if (testScore >= 60)
{
    console.log("考试通过!");
}

对于已经掌握一门编程语言的读者来说,这段代码十分简单。接下来,我们拆分这段代码的各个元素,讲解不同的组成部分。图2-1展示了示例代码的组成部分。

图2-1 示例代码的组成部分

2.1.1 声明变量

本例使用声明符let来声明变量。以下代码用于声明一个名为testScore、类型为数值(number)的变量,并将数值20赋给它。

let testScore:number = 20; 

TypeScript使用let语句声明变量,语法如下。

let 变量名称:数据类型 = 初始值;

let是在ECMAScript 6标准中新增的变量声明语句。在TypeScript中,let的使用方式与ECMAScript 6标准中的完全相同。在本书中推荐使用let来声明变量,不推荐使用落后的var来声明变量。var声明可能会导致各种意想不到的问题,感兴趣的读者可以自行在网上搜索这些问题。

2.1.2 标识符名称

在本例中,变量的名称为testScore。

变量是标识符的一种,在TypeScript中,标识符指变量、函数、参数、类、属性等的名字。标识符的命名必须遵循两条规则。

首先,标识符的名称可以由字母、下画线“_”、$符号或数字组成,但首个字符不能是数字。

以下是符合规则的命名。

a
_bc
$$de
fg123

以下是不符合规则的命名。

1a
,we.?

其次,标识符的名称不能是TypeScript本身已经占用的名称(示例代码中的let、number、if等都是已经被TypeScript占用的名称)。

同时还需注意,TypeScript中的一切名称都区分大小写。例如,testScore和TestScore分别表示两个不同的变量。同样地,let是TypeScript中的关键字,无法用它来作为变量或函数的名称,但LET可以。

2.1.3 数据类型

在本例中,变量的数据类型是数值(number)。

与JavaScript不同,TypeScript拥有完善的类型机制来处理相应的数据。在TypeScript中,基本类型包括原始类型(本例中的数值类型属于原始类型之一)和对象类型,进阶类型包括联合类型、交叉类型和泛型等,这些类型将在后面详细介绍。

TypeScript在声明变量时就可以指定数据类型,这也是TypeScript的核心优势之一。TypeScript编译器能基于数据类型进行静态检查,提前发现代码中的问题。

在赋值表达式中,数据类型并不是必需的,TypeScript会根据实际的初始赋值自动推导出变量的数据类型,并将该类型作为操作和检查的依据,示例代码如下。

let a = 1;  //实际等同于let a:number = 1

此时,变量a的值为字符串值,示例代码如下。

a = "hello";

即使没有明确指出变量a的类型,TypeScript也能推导出它是数值类型,如果赋给它其他类型的值,问题窗口中将提示错误消息,如图2-2所示。

图2-2 错误消息

虽然数据类型可以省略,但为了保持代码的可读性,建议在任何时候都保留数据类型的定义。

2.1.4 运算符

使用运算符可将一个或多个值连接起来,形成表达式并进行计算,得到一个结果值。

在本例中,使用了两个运算符。

赋值运算符“=”,表示将运算符“=”右边的值赋给左边的变量。

比较运算符“>=”,表示判断运算符左侧的值是否大于或等于右侧的值,得出比较结果——是(true)或否(false)。

在TypeScript中,常用的运算符包括赋值运算符、算术运算符(加减乘除等计算)、比较运算符(比大小)、逻辑运算符(判断与、或者、非等逻辑)和条件运算符(根据不同情况得出不同结果)等。

大多数运算符(如“+”和“−”等)是用符号表示的。少部分运算符(如is、as和typeof等)是由关键字表示的。

后面会详细介绍各种运算符。

2.1.5 字面量

在前面的示例中,字面量为数字100、60和字符串“考试通过!”

字面量即代码中直接使用的明文数据值,例如,以下数据值都是字面量。

123        //整数
12.3       //小数
"hello"    //字符串
true       //布尔值
null       //空
{a:1,b:2}  //对象
[1,2,3,4]  //数组

2.1.6 分号与断句

TypeScript使用分号“;”作为一句话的结尾,将这句话与其他语句分隔开。在本例中,使用分号作为赋值语句的结尾。

let testScore:number = 100;

分号并不是必需的,如果每条语句都不在同一行上,也可以省略句末的分号,示例代码如下。

let testScore:number = 100

如果多条语句写到同一行上,则必须以分号结尾,分隔多条语句,示例代码如下。

let a:number=10; let b:number=20

如果一条语句写到多行上,并且语句包含运算符,则情况又将不同。由于运算符会连接其左右的值,因此即使分开写到多行上,也会被解析成一行,示例代码如下。

let a:number = 
1
+
2

以上代码等同于以下代码。

let a:number = 1 + 2;

除非遇到特殊情况,否则所有代码都建议使用分号分隔,并且一行只写一条语句,以提升代码的可读性和整洁性。

2.1.7 注释

在本例中,注释为以下语句。

// 判断分数是否达到通过标准

注释中的句子将会忽略,不会执行。

注释通常用于给代码添加说明,在TypeScript中,注释可分为单行注释和多行注释。

单行注释以两条斜杠开头,注释文字需要和斜杠保持在同一行中,示例代码如下。

// 单行注释

多行注释以一条斜杠和一个星号“/*”开头,以一个星号和一条斜杠“*/”结尾,注释文字放在注释开始符与注释结束符之间,示例代码如下。

/*多
   行
   注
   释
*/

2.1.8 表达式

表达式由两部分——运算符及其所连接的数据组成。每一个表达式都会产生一个结果值。

在本例中,表达式为testScore >= 60。使用比较运算符“>=”连接其左右两侧的数据,形成表达式,该表达式将产生一个布尔类型的值。当testScore的值大于或等于60时,返回true;否则,返回false。

表达式产生的值可以赋给其他变量,或用于流程语句的判断。

2.1.9 流程控制

通过流程控制语句,决定接下来的代码是否执行或怎样执行,改变代码的执行顺序。

默认情况下,所有的代码都是按照从上到下、从左到右的顺序依次执行的。图2-3所示为默认执行流程。

图2-3 默认执行流程

使用两种语句——选择语句或循环语句改变原有的执行顺序。

选择语句根据条件判断接下来该执行哪些代码,图2-4所示为选择流程。常见的选择语句有if、if…else、if…else if及switch等。

图2-4 选择流程

在本例中,使用选择语句来实现流程控制。

if (testScore >= 60)

如果变量testScore的值大于或等于60,则执行if后的语句;否则;不执行。

循环语句根据条件判断是否反复执行某一段代码。图2-5所示为循环流程。常见的循环语句有for、while、do…while等。

图2-5 循环流程

后面将一一介绍这些流程控制语句。

2.1.10 代码块

本例中的代码块如下,在代码块中有一行语句,它表示在命令行或控制台中输出“考试通过!”。

{
    console.log("考试通过!");
}

在TypeScript中,以左花括号“{”开头,以右花括号“}”结尾,形成代码块,将多条语句组合到一个代码块中,将其视作一个整体来组织、管理和运行,示例代码如下。

if (a > 20)
{
    let b:number = 30;
    c = a + b;
    console.log(c);
}

代码块将决定变量的作用域,决定其使用范围究竟是整个TypeScript程序、某个类还是某个局部代码块,后面将详细介绍代码块的知识。

通常来说,在使用函数或类等声明语句时,都必须使用代码块,并将函数或类的所有相关代码放置其中。当使用流程控制语句时,只需在执行多条语句的情况下使用代码块,但推荐都使用代码块,以提升代码的可读性。

2.2 类型结构

在TypeScript中定义了多种数据类型,全书第一部分将围绕这些数据类型的定义及操作进行讲解。这些数据类型的结构如图2-6所示。

图2-6 数据类型的结构

第3章将从原始类型开始,详细介绍数据类型及其用法。

读者服务:

微信扫码关注【异步社区】微信公众号,回复“e60557”获取本书配套资源以及异步社区15天VIP会员卡,近千本电子书免费畅读。

相关图书

Java EE企业级应用开发实战(Spring Boot+Vue+Element)
Java EE企业级应用开发实战(Spring Boot+Vue+Element)
Vue.js全平台前端实战
Vue.js全平台前端实战
Flutter内核源码剖析
Flutter内核源码剖析
智能前端技术与实践
智能前端技术与实践
从0到1:ES6快速上手
从0到1:ES6快速上手
Angular开发入门与实战
Angular开发入门与实战

相关文章

相关课程