下载掌阅APP，畅读海量书库
立即打开
TypeScript是由微软（Microsoft）公司研发的一款开源的编程语言，是一款面向对象的编程语言，它与JavaScript语言有着显著的区别。因此，对前端开发人员来讲有必要系统地学习一下TypeScript语言。
本章主要涉及的知识点如下。
●为什么要学TypeScript语言。
●Typescript语言与JavaScript语言的区别。
●TypeScript编译器。
●TypeScript语言的思维方式。
●搭建TypeScript开发环境。
为什么要学习TypeScript语言呢？既然JavaScript语言已经非常强大了，学习TypeScript语言的必要性何在呢？本节将从多个角度进行分析，为读者解读前端开发人员学习TypeScript语言的意义。
TypeScript是由微软公司研发的一款开源的编程语言，主要是在JavaScript语言和ECMAScript标准规范的基础上添加静态类型定义构建而成的，解决了JavaScript语言的一些不足之处。
TypeScript代码主要通过TypeScript编译器（或Babel编译工具）转化为JavaScript代码，而JavaScript代码可以运行在任何浏览器和任何操作系统中，也就是常说的满足跨平台特性。
设计开发TypeScript语言的首席架构师就是大名鼎鼎的安德斯·海尔斯伯格（Anders Hejlsberg），相信绝大多数开发人员对其大名是“耳熟能详”的，Delphi和C＃（.Net Framework）编程语言就是此人的杰作。
在TypeScript语言出现之前，JavaScript语言就已经是一款发展迅猛、功能强大、应用广泛的开发语言了，也是业内所公认的Web前端脚本语言标准了。既然如此，微软公司为何还大费周章地开发TypeScript语言呢？
一切都源自微软公司在使用JavaScript语言开发大型项目时，受到JavaScript语言自身的局限性，难以很好地完成大型项目的开发与维护工作。于是，微软公司推陈出新，在优化JavaScript语言的基础上推出了TypeScript语言。微软公司自2012年10月发布首个TypeScript语言预览版本，在经历不断改进与完善后，目前已经更新到了TypeScript 4.X版本。
TypeScript语言实现了很多JavaScript语言不具备的新特性，包括添加了可选的静态类型支持、实现了基于类的面向对象编程（OOP）、融合并发展了ECMAScript标准规范等。微软公司已经将TypeScript语言设计为一个JavaScript语言的超集，目标是取代JavaScript语言。
有没有学习TypeScript语言的必要性呢？编著者认为是十分有必要的。TypeScript语言因具有与生俱来的支持静态类型与面向对象的特性，这样能最大程度地降低开发过程中出现未知错误的可能性，同时使得代码具有很好的可维护性。
因此，目前已经有越来越多的前端开发人员开始学习和掌握TypeScript语言，并将其作为未来主流的前端技术来定位了。这一切其实也源自TypeScript语言在自身技术上的先进性，其整体在改善编程体验、优化代码规范，以及提升项目质量等方面的优势不言而喻。
既然TypeScript语言是基于JavaScript语言和ECMAScript标准规范优化改进而来的，这里有必要介绍一下JavaScript语言和ECMAScript标准规范，以及TypeScript语言与JavaScript语言和ECMAScript标准规范的区别。
JavaScript（JS）是一种直译式的脚本语言，也是内置支持动态类型、弱类型、基于原型的编程语言。JavaScript是通过解释器来编译执行的，这个解释器被称为JavaScript引擎（如著名的Google V8引擎）。
JavaScript引擎在执行程序时负责将JavaScript程序代码解释成机器语言，并交由计算机操作系统运行，通常是在Web浏览器中实现的。JavaScript引擎本质上是一种计算机程序，也是运行JavaScript语言程序的宿主。
现在JavaScript引擎已经全部被内置在Web浏览器内核中了，虽然不同Web浏览器在实现上略有差异，但必须是基于ECMAScript标准规范来开发的（保证最大程度的兼容性）。刚刚提到的Google V8引擎，就是Google Chrome浏览器Blink内核中所内置的JavaScript引擎。
Google V8引擎是完全开源的，且其优异的性能已经得到了业内的认可。目前，绝大多数的主流Web浏览器均采用了Google Chrome浏览器Blink内核，其JavaScript解释器自然也就是V8引擎了。而且，微软公司在自己最新版的Edge浏览器中，也抛弃了原来的EdgeHTML内核，投入Google的怀抱。
JavaScript语言在发展最初并没有一个统一的标准，各大软件厂商都在一个基本的框架下自行开发。但是，鉴于JavaScript语言的大受欢迎及迅猛的发展速度，1997年ECMA（欧洲计算机制造商协会）协调Netscape、Sun、微软、Borland等大厂商组成了工作组，确定了统一的JavaScript标准规范，也就是大家所熟知的ECMAScript标准规范。
图1.1 JavaScript语言与ECMAScript标准规范的关系
目前，ECMAScript标准规范就是JavaScript语言的设计标准，各大浏览器厂商在实现JavaScript功能时，必须遵循该标准。TypeScript代码既然最终要转译为JavaScript代码，自然是要遵循ECMAScript标准规范的。
JavaScript语言与ECMAScript标准规范之间是相互依存的关系，JavaScript语言包含3部分（见图1.1）：ECMAScript标准规范，文档对象模型（DOM），浏览器对象模型（BOM）。
ECMAScript标准规范、文档对象模型和浏览器对象模型的介绍说明如下。
●ECMAScript标准规范描述JavaScript语言的语法和基本对象。
●文档对象模型描述JavaScript语言处理网页内容的方法和接口。
●浏览器对象模型描述JavaScript语言与浏览器进行交互的方法和接口。
ECMAScript标准规范自诞生至今，已经经历了多次重大的版本更新，最新的一个版本就是ECMAScript 6（以下简称ES6），即ECMA于2015年6月17日正式发布的ECMAScript标准规范第6版，也被称为ECMAScript 2015。
TypeScript语言是一款开源的、跨平台的编程语言。
TypeScript代码需要通过TypeScript编译器进行转译，而生产的目标代码就是标准的JavaScript代码。
TypeScript语言为JavaScript语言添加了很多实用的语法扩展。TypeScript语言的主要特性介绍如下。
●可选的静态类型。
●类型批注和编译时的类型检查。
●基于类的面向对象编程。
●接口设计。
●模块设计。
●支持命名空间。
●装饰器。
TypeScript语言是作为JavaScript语言的一个“超集”来设计实现的，TypeScript语言支持JavaScript语言（严格地讲是ECMAScript标准规范）中定义的绝大部分的语法。下面介绍TypeScript语言与JavaScript语言的区别。
●TypeScript语言在核心语法方面提供了可选的静态类型和基于类的面向对象编程的支持，并对JavaScript对象模型进行扩展。在这方面，JavaScript语言中是没有类的概念的。
●TypeScript语言使用类型和接口的概念来描述数据，支持开发人员快速检测错误和调试应用程序。
●TypeScript语言通过类型注解提供编译时的静态类型检查功能。
●在TypeScript语言中定义对象（变量）必须指定明确的对象类型，而在JavaScript语言中是不需要的。
●TypeScript语言中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
●TypeScript语言为函数提供了默认参数值。
●TypeScript代码通过编译器可以转换为JavaScript代码。
●TypeScript代码支持即时编译，简单地讲就是编写一行TypeScript代码即可得到转译的JavaScript代码。
●JavaScript代码可以在不需要任何修改的情况下与TypeScript代码协同工作。
本节主要介绍TypeScript编译器方面的知识，包括TypeScript编译器的原理及流程。
如前文中的描述，TypeScript代码是通过编译器转换为JavaScript代码的，这个编译器就是TypeScript编译器。TypeScript编译器的功能十分强大，是由多个功能模块组成的，并配置了非常完善的编译选项。
TypeScript编译器（编译部分）位于TypeScript源码的目录src/compiler下，具体如图1.2所示。
图1.2 TypeScript编译器的目录
TypeScript编译器主要分为以下几个关键部分。
●Binder绑定器（binder.ts）。
●Checker检查器（checker.ts）。
●Emitter发射器（emitter.ts）。
●Parser解析器（parser.ts）。
●Scanner扫描器（scanner.ts）。
其中，Scanner扫描器负责对TypeScript源码进行扫描预处理，将源码转译为Token数据流。Parser解析器负责进行语法分析，将Token数据流生成为抽象语法树（AST）。Binder绑定器使用一个Symbol符号将相同结构的声明联合在一起，帮助类型系统推导出具体的声明。Checker检查器负责类型检查工作，是必不可少的功能。Emitter发射器实现JavaScript（.js）转义代码、声明（.d.ts）或source maps（.js.map）文件的生成。
以上内容是TypeScript编译器几个主要部分的基本介绍，下面将详细地介绍TypeScript源码的编译流程。
TypeScript编译器中所包括的Scanner扫描器、Parser解析器、Binder绑定器、Checker检查器和Emitter发射器，在TypeScript源码的编译流程中起到了非常关键的作用。TypeScript编译流程示意图如图1.3所示。
图1.3 TypeScript编译流程示意图
图1.3详细地展示了TypeScript源码的编译流程中的几个主要流程，具体内容说明如下。
1.流程：TypeScript源码→AST
从TypeScript源码到AST的解析流程主要包括先将TypeScript源码经过Scanner扫描器解析为Token数据流，再由Parser解析器将Token数据流解析为AST，具体如图1.4所示。
2.流程：AST→Symbol符号
从AST到Symbol符号的解析流程主要包括将AST经过Binder绑定器解析为Symbol符号，具体如图1.5所示。
图1.4 TypeScript源码→AST流程图
图1.5 AST→Symbol符号流程图
3.流程：AST+Symbol符号→类型检查功能
从AST+Symbol符号到类型检查功能的解析流程主要包括将AST+Symbol符号经过Checker检查器实现类型检查的功能，具体如图1.6所示。
4.流程：AST+Checker检查器→JavaScript代码
从AST+Checker检查器到JavaScript代码的解析流程，主要包括将AST+Checker检查器经过Emitter发射器解析为最终的JavaScript转译代码，具体如图1.7所示。
图1.6 AST+Symbol符号→类型检查功能流程图
图1.7 AST+Checker检查器→JavaScript转译代码流程图
TypeScript编译器的主要架构如图1.8所示。该架构图参考了TypeScript语言官方GitHub仓库中描述的内容。
1.核心TypeScript编译器
TypeScript编译器架构的底层是核心TypeScript编译器（Core TypeScript Compiler），包括Scanner扫描器、Parser解析器、Binder绑定器、Checker检查器和Emitter发射器核心部件。
在图1.8中，核心TypeScript编译器中列举了几个关键的代码文件，这些代码文件的具体功能介绍如下。
图1.8 TypeScript编译器的主要架构
●core.ts代码文件：定义了TypeScript语法的核心概念、常量描述，以及主要的工具函数等。
●scanner.ts和parser.ts代码文件：scanner.ts文件是扫描器，parser.ts文件是解析器，二者共同将源码转换生成AST。
●binder.ts代码文件：绑定器，用于进行作用域分析，并根据AST创建Symbol符号表。
●checker.ts代码文件：检查器，通过解析构造类型、检查语义操作，并根据需要生成诊断，最终实现类型检查功能。
●transformer.ts和emitter.ts代码文件：transformer.ts文件用于代码转换，emitter.ts文件是发射器，二者共同实现JavaScript代码、声明（.d.ts）或source maps（.js.map）文件的生成。
2.语言服务
语言服务（Language Service）围绕核心TypeScript编译器公开了一个附加层，适用于类似于代码编辑器的应用程序。
语言服务支持一组典型的代码编辑器操作，如语句完成、签名帮助、代码格式化、代码大纲、代码着色、基本重构（如重命名）、调试接口助手（如验证断点），以及TypeScript语言特定功能（如支持增量编译）等。
设计语言服务的目的在于代码文件在长期编辑的过程中，能够有效处理上下文内容随时变化的情况。
3.tsserver
tsserver（server.ts）包装了编译器和服务层，并通过JSON协议进行公开。
4.VS Shim
VS Shim（shims.ts）是一个库，用于将TypeScript标准的API引入Visual Studio Code开发工具环境。
5.VS Managed Language Service
VS Managed Language Service表示Visual Studio Code开发工具托管的语言服务。
6.Editors
Editors表示Visual Studio Code开发工具。Visual Studio Code开发工具默认支持TypeScript语言语法与源码编译。
7.独立TS编译器
独立TS编译器（Standalone TS Compiler）是使用tsc.ts源码文件进行批处理编译的CLI。CLI的英文全称是Command Line Interface，也就是TypeScript语言命令行终端交互界面。
本节重点介绍TypeScript语言的思维方式，其与JavaScript语言的思维方式是有显著区别的。
对于大多数的前端开发人员，JavaScript语言已经强大到几乎无所不能了。对于前端的任何设计需求，JavaScript语言都可以很好地完成。同时，JavaScript语言所独有的弱类型与动态语言特性，决定了其在使用上的灵活性与易用性。稍微有一定编程基础的开发人员，都能很快掌握JavaScript语言的使用方法，这也正是该语言大受欢迎的主要原因。
但是，上述JavaScript语言的优点，也恰恰是造成其出现问题的根本原因，而且有些问题往往是灾难性的。最主要的问题就是JavaScript语言是弱类型的，弱类型的表示类型是缺乏约束的，也就意味着存在着未知的安全隐患。再加上JavaScript恰恰又是动态语言，许多问题需要在运行期间才会显现。如果这个问题是一个严重错误，则Web浏览器可能会出现程序崩溃的情况。
有痛点自然就要解决痛点，为了尽可能弥补JavaScript语言的不足之处，ECMA标准协会定义了其语法规范——ECMAScript标准规范。ECMAScript标准规范经过几代的更新完善，到ES6版本已经基本完善了JavaScript语言的诸多缺陷。但是，由于JavaScript语言的历史原因，其在类型监测方面的问题仍旧没有得到彻底解决，这也是让人非常遗憾的。
前面讲到JavaScript是弱类型的动态语言，那么与其相对应的语言就是强类型的静态语言。下面针对弱类型与强类型、静态语言与动态语言之间的区别，做一个详细的介绍。
在弱类型语言中，变量可以被赋予不同的数据类型，而在强类型语言中，变量或对象一旦定义完成，就不允许改变其数据类型（除非进行强制类型转换）。另外，当调用函数传递参数时，其数据类型必须与被调用函数中声明的类型相兼容。例如，JavaScript是典型的弱类型语言，而TypeScript则是强类型语言。
对于静态语言，需要在编译阶段确定所有变量的类型；对于动态语言，需要在执行阶段确定所有变量的类型。例如，JavaScript是动态语言，而TypeScript则是静态语言。
在了解了弱类型与强类型、静态语言与动态语言的定义后，就可以分析一下弱类型的JavaScript语言会有哪些先天不足了。假设，你打算使用一个第三方的JavaScript库，而恰好该JavaScript库的开发人员很不严谨，有些变量没有描述定义，有些函数方法既没有参数类型描述，也没有写清楚函数逻辑，那么你需要逐一地判断这些变量和函数的定义，搞清楚之后才能使用这个第三方的JavaScript库。相信这一定会让你感到异常的沮丧和崩溃。
归根结底是因为弱类型的JavaScript语言所具有的先天特性，会让开发人员长期在没有类型约束的环境下进行开发，进而造成了开发人员类型思维的缺乏，养成了不太友好的编程习惯。
TypeScript语言的出现，弥补了JavaScript语言的这些先天不足。TypeScript被设计为强类型的静态语言，对类型的要求非常严格。同时，TypeScript语言加入了接口与类的定义，这对于开发大型项目是必要的。
当然，我们不能直接就否定JavaScript语言，该语言发展至今为前端开发带来了翻天覆地的变化，而且其在不断地更新，巩固了其在业界的领导地位。TypeScript语言是一个新兴力量，我们认为该语言的出现不是为了替代JavaScript语言，而是对JavaScript语言的补充与完善。
TypeScript语言被设计为拥有“类型”定义的JavaScript语言超集，可以编译为单纯的、干净的、功能完整的JavaScript代码。概括来讲，TypeScript语言可以被理解为加强版的JavaScript语言。
TypeScript语言支持全部的JavaScript语言特性，而且其是严格基于ECMAScript标准规范进行开发的，同步支持ES6、ES7和ES8版本的最新语法标准。最为重要的是，TypeScript语言增加了对类型的约束。
TypeScript语言在类型约束这方面，不仅定义了数字类型（整型和浮点型）、布尔类型、字符串类型和数组类型等，还定义了枚举类型、元组类型和任意（Any）类型等，同时明确了Null（空）类型和Undefined（未定义）类型的定义，完全符合现代编程语言的规范要求。
TypeScript语言不仅增加了类型约束，还增加了基于面向对象编程的语法扩展，包括类和接口的功能。这是ECMAScript标准规范所提出，但又没有完整实现的，TypeScript语言完整地实现了对面向对象编程的支持。
TypeScript是一款功能强大的、完整的现代化编程语言，具备类型约束和面向对象特性，使其成为开发大型Web项目的技术保证（这是JavaScript语言的痛点之一）。TypeScript代码可以“无障碍”地编译出干净、简洁和高效的JavaScript代码，确保了与绝大多数主流浏览器的最佳兼容性，使其成为替代JavaScript语言的最好选择之一。
目前，三大主流前端开发框架（Angular、React和Vue.js）均提供了对TypeScript语言的支持，甚至在进行基于TypeScript语言的重构工作。这进一步证明了业界对TypeScript语言的支持与认可，也增强了前端开发人员学习TypeScript语言的信心。
总之，TypeScript语言在开发大型Web项目上所具有的先天优势，会让越来越多的前端开发人员将其作为一项必备技能进而学习和掌握。
本节将详细介绍如何搭建TypeScript开发环境，具体包括npm模块方式、Visual Studio Code开发工具方式和NuGet模块方式。
TypeScript是由微软公司开发的编程工具，如图1.9所示。
图1.9 TypeScript语言官方网站
如图1.9所示，TypeScript语言官方网站首页中演示了一个简单的TypeScript代码示例，同时给出了TypeScript的安装介绍链接。
直接单击TypeScript的安装介绍链接，进入获取TypeScript方式的介绍界面，如图1.10所示。
图1.10 获取TypeScript方式的介绍界面
如图1.10所示，获取TypeScript的方式主要包括通过浏览器和通过本地计算机两种方式。
这里直接选择通过本地计算机方式，单击该获取方式，进入TypeScript的下载界面，如图1.11所示。
如图1.11所示，下载界面中给出了通过npm模块和通过Visual Studio Code这两种安装方式。后面将详细介绍这两种安装方式。
图1.11 TypeScript的下载界面
另外，微软公司还将TypeScript的源码发布到了GitHub仓库。
TypeScript开发环境主要通过两种方式进行安装：npm模块方式和Visual Studio Code开发工具方式。
1.npm模块方式
相信熟悉Node.js框架的前端开发人员，对npm模块并不陌生。简单来讲，npm就是Node.js框架的包管理工具，可以用来安装各种Node.js扩展模块。TypeScript已经被注册在npm模块包系统中了，模块名称是全部小写的“typescript”。
在通过npm模块安装TypeScript开发环境之前，需要在系统中完整安装Node.js框架的开发环境（不了解的读者需要先学习和掌握Node.js开发的知识）。这里之所以需要完整安装Node.js框架，是因为最新的npm模块已经是Node.js框架的核心部分，完整安装好Node.js框架后，会自带npm模块的全部功能。
读者如果想检测当前系统是否已经安装好Node.js框架开发环境，则可以在命令行终端中使用下述命令。
执行上述命令可以查询Node.js和npm的版本号，如果查询成功，则表明已经安装好Node.js框架开发环境及npm模块功能，具体如图1.12所示。
图1.12 查询版本号
安装好npm模块功能之后，就可以通过npm模块安装TypeScript开发环境了，可以在命令行终端中使用下述命令。
在上述命令中，参数install表示安装模块，参数-g表示在系统中以全局方式进行安装，typescript指定了安装的模块名称。安装TypeScript开发环境如图1.13所示。
图1.13 安装TypeScript开发环境
安装好TypeScript开发环境之后，可以执行“tsc”命令（TypeScript代码编译命令）查看当前系统中的TypeScript编译器的版本号，并验证TypeScript开发环境是否安装成功，可以在命令行终端中使用下述命令。
执行上述命令后，具体如图1.14所示。
图1.14 查看TypeScript编译器的版本号
如图1.14所示，在命令行终端中查询到了TypeScript编译器的版本号，表示TypeScript开发环境已经安装成功。
2.Visual Studio Code开发工具方式
Visual Studio Code（VS Code）是微软公司推出的轻量级开发工具，也是一款主要针对编写现代Web应用的跨平台源代码编辑器，强大的可扩展插件功能深受广大开发人员的青睐。
安装Visual Studio Code开发工具的方法非常简单，先在其官方网站下载相匹配的安装包到本地，再直接在操作系统中进行安装即可。
Visual Studio Code开发工具的运行界面如图1.15所示。
图1.15 Visual Studio Code开发工具的运行界面
按快捷键“Ctrl+`”可以切换至命令行终端，具体如图1.16所示。
图1.16 Visual Studio Code开发工具的命令行终端窗口
如图1.16所示，现在Visual Studio Code开发工具已经打开了内置的命令行终端，直接通过该终端完成TypeScript开发环境的安装，具体如图1.17所示。
图1.17 通过Visual Studio Code开发工具的命令行终端安装TypeScript开发环境
单击左侧工具栏中的“扩展”图标（高亮显示）打开搜索扩展界面，查找TypeScript的扩展插件，具体如图1.18所示。
单击“设置”图标可以打开TypeScript的扩展插件的配置界面，具体如图1.19所示。
图1.18 TypeScript的扩展插件
图1.19 TypeScript的扩展插件的配置界面
如图1.19所示，在配置界面中可以执行切换启用/禁用TypeScript的扩展的操作。至此，通过Visual Studio Code开发工具安装TypeScript开发环境和TypeScript扩展插件的操作就完成了。
安装好TypeScript开发环境后，就可以编写简单的TypeScript应用了。这里主要通过Visual Studio Code开发工具和命令行终端编译的方式，向读者介绍如何编写TypeScript代码及通过“tsc”命令将TypeScript代码编译为JavaScript代码。
本书使用Visual Studio Code开发工具编写TypeScript代码，读者可以使用EditPlus编辑器这类轻量级的代码工具，但还是强烈建议读者使用Visual Studio Code开发工具。使用Visual Studio Code开发工具的好处很多（在1.5.2节已经介绍）。该工具不仅强大，还是微软公司的产品，针对TypeScript语言进行了很多优化工作。因此，使用Visual Studio Code开发工具开发TypeScript程序已经是业内默认的事实了。
下面编写一个TypeScript代码——TypeScript版本的“HelloWorld”应用。
【例1.1】 TypeScript版本的“HelloWorld”应用。
该应用实现向命令行终端中输出日志信息的功能，其源代码如下。
在上述代码中，第2行代码通过方法console.log（）完成了向命令行终端输出一行日志信息的操作。
首先，在命令行终端中通过“tsc”命令将TypeScript代码编译为JavaScript代码，具体如图1.20所示。
如图1.20所示，通过“tsc”命令成功将helloworld.ts文件编译生成为helloworld.js文件。然后，在命令行终端中通过“node”命令执行生成的JavaScript代码，具体如图1.21所示。
图1.20 通过“tsc”命令编译TypeScript代码
图1.21 通过“node”命令执行JavaScript代码
如图1.21所示，通过“node”命令执行编译生成的JavaScript代码，输出了指定的日志信息。
上述TypeScript编写方式是通过在命令行终端中执行“tsc”命令将TypeScript代码编译为JavaScript代码，并通过“node”命令执行生成的JavaScript代码。上述操作在每次更新TypeScript代码后，都需要编译和执行一次，确实太过烦琐了。好在有强大的Visual Studio Code开发工具，其具有自动编译（tsconfig配置文件）TypeScript代码的功能，下面具体介绍一下自动编译的操作方法。
首先，打开Visual Studio Code开发工具，在命令行终端中通过“mkdir”命令新建一个工作目录（helloworld-tsconfig），具体如图1.22所示。
图1.22 新建工作目录
新建好工作目录（helloworld-tsconfig）后，进入该目录，执行“tsc--init”命令初始化一个tsconfig配置文件，用于实现TypeScript代码自动编译功能，具体如图1.23所示。
图1.23 初始化tsconfig配置文件
如图1.23所示，执行“tsc--init”命令成功新建了一个tsconfig配置文件（下文会详细介绍该配置文件）。
然后，编写一个TypeScript代码——TypeScript增强版本的“HelloWorld”应用。
【例1.2】 TypeScript增强版本的“HelloWorld”应用。
该应用实现向命令行终端中输出日志信息的功能，其源代码如下。
在上述代码中，第2～4行代码定义了一个函数sayHello，通过方法console.log（）完成了向命令行终端中输出一行日志信息的操作。
最后，通过tsconfig配置文件可以进行自动编译的操作。具体方法是按快捷键“Ctrl+Shift+B”，打开Visual Studio Code开发工具的运行构建任务（Run Build Task）窗口，如图1.24所示。
图1.24 运行构建任务窗口
如图1.24所示，通过“tsc构建”任务调用tsconfig配置文件，进行TypeScript代码的自动编译操作。完成后，Visual Studio Code开发工具会自动创建编译成功的JavaScript脚本文件，如图1.25所示。
图1.25 编译成功的JavaScript脚本文件
如图1.25所示，TypeScript代码已经成功转译为标准的JavaScript代码了，通过Visual Studio Code开发工具自带的Run Code命令（在js文件上右击查看）可以执行该JavaScript脚本文件，如图1.26所示。
图1.26 编译成功的JavaScript脚本文件
如图1.26所示，命令行终端输出了指定的日志信息。以上就是通过Visual Studio Code开发工具自动编译TypeScript代码的基本操作流程。
以上内容介绍了如何编写一个基本的TypeScript应用，以及通过命令行终端或Visual Studio Code开发工具实现编译和运行TypeScript代码。如果读者想了解如何开发TypeScript工程类的大型项目，请继续阅读后续章节中的内容。
本章主要介绍了TypeScript语言的基础知识，包括TypeScript语言与JavaScript语言的关系、TypeScript编译器的原理、TypeScript语言的思维方式，以及搭建TypeScript开发环境等。