使用TypeScript命令行工具 tsc CLI
李俊才的个人博客
邮箱 ：291148484@
CSDN 主页：/qq_28550263?spm=1001.2101.3001.5343
本文地址：/qq_28550263/article/details/123474209
目 录相关文章推荐：
TypeScript的编译器文件
1. 安装TypeScript
2. tsc CLI 概述
2.1 什么是 tsc CLI2.2 小例子：执行tsc编译命令2.3 小例子：使用 tsc -d 生成 TypeScript 声明文件 2.3.1 什么是TypeScript 声明文件2.3.2 使用tsc工具生成TypeScript声明文件2.3.3 小节
3. tsc CLI 使用详解
3.1 CLI 命令3.2 构建选项3.3 监听选项3.4 编译器标志
1. 安装TypeScript
tsc是TypeScript为我们提供的一个命令行工具（CLI），使用前需要全局安装，这里假定你已经完成了NodeJS的安装并且配置好了系统的path环境变量：
使用 npm 安装TypeScript：
npm install -g typescript
使用yarn安装TypeScript：
yarn global add typescript
安装完成后，在NodeJS的脚本目录中会多出一个tsc.cmd，这就是tsc-CLI的可执行文件（Windows上的cmd、bat、exe统称可执行文件）。有了它我们就可以使用tsc命令完成相应的工作了。
注意：
Visual Studio Update 3和Visual Studio 以上版本默认包含 TypeScript 语言支持，但不包含 TypeScript 编译器`tsc。如果你使用的是Visual Stdio，可以使用下面的方式来安装：
“管理 NuGet 包”窗口（您可以通过右键单击项目节点来访问该窗口）Nuget 包管理器控制台（在工具 > NuGet 包管理器 > 包管理器控制台中找到）然后运行：
Install-Package Microsoft.TypeScript.MSBuild不支持 Nuget 的项目类型，也可以使用TypeScript Visual Studio 扩展。在 Visual Studio 中使用安装扩展：
Extensions > Manage Extensions
2. tsc CLI 概述
2.1 什么是 tsc CLI
我们知道目前浏览器是不能直接运行TypeScript的，但是随着JavaScript技术的发展，类型系统给我们代码开发和维护带来了巨大方便，这时很多人开始使用TypeScript进行前后端，甚至其它方向如深度学习等领域的开发。虽然使用TypeScript进行开发写起来“很爽”，但终究我们的项目需要在生产环境中进行使用，比如在浏览器中。为了让运行时环境能够编译和执行我们的代码，就需要将其编译为JavaScript（准确来说是ECSA Script，不过不同的环境对ECMA的各个版本兼容性又不太一样，往往还需要借助某些工具如babel进一步编译成兼容各种浏览器环境的代码，这里不做进一步讨论），因此tscCLI应运而生。
2.2 小例子：执行tsc编译命令
使用tscCLI工具，我们可以将一个TypeScript文件编译成某一个指定版本的ECMA Script文件。
【例如】在目录tsctool下有一个使用TypeScript写好的文件linkedlist.ts：
文件中的内容都是TypeScript代码：
// 一个 TypeScript 文件 linkedlist.ts/**结点类，结点是构成链表的基础单元。*/class Lnode{public next: Lnode | null; public data: any;public empty: boolean;constructor();constructor(data: undefined);constructor(data?:any){// 非空结点if(data!=undefined){this.data = data;this.next = null;this.empty = false}// 空结点，即值构建结点对象但实际上不存在结点else{this.data = null;this.next = null;this.empty = true;}}}/**单链表类*/class LinkList{head: Lnode;length: number;constructor();constructor(datas:any[]);constructor(datas?:any[]){this.head = new Lnode();if(datas==undefined){(this.head as Lnode).next = null;this.length = 0;}else{for(let i=0; i<datas.length; i++){this.append(datas[i]);}this.length = datas.length;}};/**判断是否为空链表 */public is_empty(): boolean{if(this.head.next == null){return true;}else{return false;}};/**尾部插入 */public append(elm: any):void{if(this.head.next == null){this.head.next = new Lnode(elm);this.length = this.length + 1;}else{let pointer = this.head.next;while(pointer.next != null){pointer = pointer.next;};pointer.next = new Lnode(elm);}}}
上面的图中有一个tsconfig.json文件，是我们在该目录下手动创建的。如果你有使用过命令行的经历，那么能够理解，在输入一个命令中使用太多复杂的选项，这样是很麻烦的。因此我们可以将选项内容写在该配置文件中，tsc命令能够识别目录中的tsconfig.json配置文件中的内容，这本质上和我们直接使用tsc -xxx的待选项命令没有区别。这个文件我们如下配置的（这里不做讲解）：
{"compilerOptions": {"target": "esnext","useDefineForClassFields": true,"module": "esnext","moduleResolution": "node","strict": true,"jsx": "preserve","sourceMap": false,"resolveJsonModule": true,"esModuleInterop": true,"lib": ["esnext", "dom"],"baseUrl": ".","paths": {"/@/*": ["src/*"],"/$/*": ["jcadmin/*"],"/BASEDIR/*": ["*"]},},"files": ["linkedlist.ts"]}
在该目录中执行命令tsc：
tsc
可以看到生成了对应的js文件：
打开该js文件，可以看到编译后的内容：
"use strict";/**结点类，结点是构成链表的基础单元。*/class Lnode {next;data;empty;constructor(data) {// 非空结点if (data != undefined) {this.data = data;this.next = null;this.empty = false;}// 空结点，即值构建结点对象但实际上不存在结点else {this.data = null;this.next = null;this.empty = true;}}}/**单链表类*/class LinkList {head;length;constructor(datas) {this.head = new Lnode();if (datas == undefined) {this.head.next = null;this.length = 0;}else {for (let i = 0; i < datas.length; i++) {this.append(datas[i]);}this.length = datas.length;}};/**判断是否为空链表 */is_empty() {if (this.head.next == null) {return true;}else {return false;}};/**尾部插入 */append(elm) {if (this.head.next == null) {this.head.next = new Lnode(elm);this.length = this.length + 1;}else {let pointer = this.head.next;while (pointer.next != null) {pointer = pointer.next;};pointer.next = new Lnode(elm);}}}
2.3 小例子：使用 tsc -d 生成 TypeScript 声明文件
2.3.1 什么是TypeScript 声明文件
除了在cmd中将TypeScript文件编译成JavaScript文件外，tsc CLI还有其它的功能，比如从一个JavaScript文件中提取出声明文件，即xx.d.ts文件。声明文件用于声明JavaScript文件对应的TypeScript类型，有了声明文件，很多传统的JavaScript项目（旧项目）可以快速地迁移到TypeScript中来，只需要安装与该项目对应的声明模块。比如你想使用JQuery：
当你在一个基于TypeScript的项目中添加Jquery时，你会执行这样的命令：
npm install jquery
或者使用yarn：
yarn add jquery
我们可以初始化一个package.json文件（目录下执行npm init -y就可以生成该文件）然后安装试试，如图：：
目录下的node_modules中可以看到安装的jquery模块，这时一个典型的传统JavaScript项目，不论你打开那个目录都只有JavaScript代码而没有对应的TypeScript类型声明：
很庆幸的是，像Jquery等超过九成顶级JavaScript项目当前的版本都有对应的声明模块，你只需要单独安装他们，这种方法很简单，只需要在原模块名前添加@types/前缀，如：
npm install @types/jquery
或者使用yarn：
yarn add @types/jquery
这样，当你通过TypeScript调用这些JavaScript内容时，TypeScript就会自动地寻找@types目录下对应的声明模块了。
2.3.2 使用tsc工具生成TypeScript声明文件
现在我们使用tsc CLI工具对 2.2 小节例子中的TypeScript文件自动地生成相应地类型声明文件，只需在该项目文件夹下执行以下命令：
tsc --declaration --emitDeclarationOnly .\linkedlist.ts
可以看到目录中自动地生成了一个linkedlist.d.ts：
该文件地内容如下：
/**结点类，结点是构成链表的基础单元。*/declare class Lnode {next: Lnode | null;data: any;empty: boolean;constructor();constructor(data: undefined);}/**单链表类*/declare class LinkList {head: Lnode;length: number;constructor();constructor(datas: any[]);/**判断是否为空链表 */is_empty(): boolean;/**尾部插入 */append(elm: any): void;}
可以看到，两个类的调用接口自动地生成了。如果你在原TypeScript文件中，使用declare type、interface等定义的类型也会被抽取出来。事实上，当你使用Visual Stidio Code写JavaScript的很多自动类型提示也来源于声明文件，他们包含于VSCode的TypeScript相关插件之中。
2.3.3 小节
tsc命令行工具主要用来将TypeScript编译成运行环境可执行的JavaScript文件以及从TypeScript中分离相应的TypeScript类型文件.d.ts。从运行的角度来看，浏览器以及其它的运行环境中执行的是编译后的JavaScript脚本；从开发的角度看，使用基于TypeScript的现代开发方式但只需要为原JavaScript项目添加一个对应的类型声明文件就可以，而一个TypeScript文件在多数情况下也可以看成由两部分构成，一部分是类型声明，另外一部分是JavaScript脚本。
当我们自己写了一个模块想要上传到npm时，为了能使传统的JavaScript开发者和现代的TypeScript开发者都能使用我们的模块，往往也是分类类型声明和JavaScript脚本上传的，这时不仅要使用tsc CLI工具将.ts文件编译成.js文件，同时要使用tsc CLI工具从.ts文件中分离出样式为对应的.d.ts文件。
3. tsc CLI 编译器选项详解
这些选项无需刻意记忆，在需要使用的时候再过来查询即可。如上文所说，其中很多的选项同样可以通过配置ts.config.json实现。
3.1 CLI 命令
3.2 构建选项
3.3 监听选项
3.4 编译器标志
– 👍如果觉得本文对你有帮助，记得点赞收藏加关注哦👍 –
