使用TypeScript命令行工具 tsc CLI
李俊才(jcLee95)的个人博客
已入驻阿里云
邮箱 :291148484@163.com
本文地址:
- https://developer.aliyun.com/article/
- https://blog.csdn.net/qq_28550263/article/details/123474209
相关文章推荐:
目 录
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 2015 Update 3 和 Visual Studio 2017 以上版本默认包含 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
进一步编译成兼容各种浏览器环境的代码,这里不做进一步讨论),因此 tsc
CLI 应运而生。
2.2 小例子:执行tsc
编译命令
使用 tsc
CLI 工具,我们可以将一个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 命令
标志 | 类型 | 描述 |
--all |
boolean | 显示所有编译器选项。 |
--generateTrace |
string | 生成事件跟踪和类型列表。 |
--help |
boolean | 提供本地信息以获取有关 CLI 的帮助。 |
--init |
boolean | 初始化一个 TypeScript 项目并创建一个 tsconfig.json 文件。 |
--listFilesOnly |
boolean | 打印作为编译一部分的文件的名称,然后停止处理。 |
--locale |
string | 从 TypeScript 设置消息传递的语言。这不影响发射。 |
--project |
string | 在给定配置文件的路径或带有“tsconfig.json”的文件夹的情况下编译项目。 |
--showConfig |
boolean | 打印最终配置而不是构建。 |
--version |
boolean | 打印编译器的版本。 |
3.2 构建选项
标志 | 类型 | 描述 |
--build |
boolean | 构建一个或多个项目及其依赖项(如果已过期) |
--clean |
boolean | 删除所有项目的输出。 |
--dry |
boolean | 显示将构建的内容(或删除,如果使用“–clean”指定) |
--force |
boolean | 构建所有项目,包括那些看起来是最新的 |
--verbose |
boolean | 启用详细日志记录。 |
3.3 监听选项
标志 | 类型 | 描述 |
--excludeDirectories |
list | 从监视进程中删除目录列表 |
--excludeFiles |
list | 从监视模式的处理中删除文件列表 |
--fallbackPolling |
fixedinterval, priorityinterval, dynamicpriority , 或 fixedchunksize |
指定当系统用完本机文件观察程序时观察程序应使用的方法 |
--synchronousWatchDirectory |
boolean | 在本机不支持递归观察的平台上同步调用回调并更新目录观察者的状态 |
--watch |
boolean | 观看输入文件 |
--watchDirectory |
usefsevents, fixedpollinginterval, dynamicprioritypolling, 或 fixedchunksizepolling |
指定如何在缺少递归文件监视功能的系统上监视目录 |
--watchFile |
fixedpollinginterval, prioritypollinginterval, dynamicprioritypolling , fixedchunksizepolling , usefsevents, 或 usefseventsonparentdirectory |
指定 TypeScript 监视模式的工作方式 |
3.4 编译器标志
标志 | 类型 | 默认值 | 描述 |
--allowJs |
boolean | false |
允许 JavaScript 文件成为程序的一部分使用该checkJS 选项从这些文件中获取错误 |
--allowSyntheticDefaultImports |
boolean | true 如果module 是system , 或esModuleInterop 并且module 不是es6 /es2015 或esnext ,false 否则 |
当模块没有默认导出时,允许“从 y 导入 x” |
--allowUmdGlobalAccess |
boolean | false |
允许从模块访问 UMD 全局变量 |
--allowUnreachableCode |
boolean | 禁用无法访问代码的错误报告 | |
--allowUnusedLabels |
boolean | 禁用未使用标签的错误报告 | |
--alwaysStrict |
boolean | true 如果strict ,false 否则 |
确保始终生成"use strict" |
--assumeChangesOnlyAffectDirectDependencies |
boolean | false |
|
incremental 在使用和模式的项目中重新编译watch 假定文件中的更改只会影响直接依赖于它的文件 |
|||
--baseUrl |
string | 指定基目录以解析非相对模块名称 | |
--charset |
string | utf8 |
不再支持在早期版本中,手动设置读取文件的文本编码 |
--checkJs |
boolean | false |
在类型检查的 JavaScript 文件中启用错误报告 |
--composite |
boolean | false |
启用允许 TypeScript 项目与项目引用一起使用的约束 |
--declaration |
boolean | true 如果composite ,false 否则 |
从项目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件 |
--declarationDir |
string | 指定生成的声明文件的输出目录 | |
--declarationMap |
boolean | false |
为 d.ts 文件创建源映射 |
--diagnostics |
boolean | false |
构建后输出编译器性能信息 |
--disableReferencedProjectLoad |
boolean | false |
减少 TypeScript 自动加载的项目数量 |
--disableSizeLimit |
boolean | false |
取消 TypeScript 语言服务器中 JavaScript 文件总源代码大小的 20mb 上限 |
--disableSolutionSearching |
boolean | false |
编辑时选择项目退出多项目参考检查 |
--disableSourceOfProjectReferenceRedirect |
boolean | false |
引用复合项目时禁用首选源文件而不是声明文件 |
--downlevelIteration |
boolean | false |
为迭代生成更合规但冗长且性能更低的 JavaScript |
--emitBOM |
boolean | false |
在输出文件的开头生成一个 UTF-8 字节顺序标记 (BOM) |
--emitDeclarationOnly |
boolean | false |
只输出 d.ts 文件,不输出 JavaScript 文件 |
--emitDecoratorMetadata |
boolean | false |
为源文件中的修饰声明生成设计类型元数据 |
--esModuleInterop |
boolean | false |
生成额外的 JavaScript 以简化对导入 CommonJS 模块的支持这实现allowSyntheticDefaultImports 了类型兼容性 |
--exactOptionalPropertyTypes |
boolean | false |
将可选属性类型解释为书面形式,而不是添加undefined . |
--experimentalDecorators |
boolean | false |
启用对 TC39 第 2 阶段草稿装饰器的实验性支持 |
--explainFiles |
boolean | false |
打印在编译期间读取的文件,包括包含它的原因 |
--extendedDiagnostics |
boolean | false |
构建后输出更详细的编译器性能信息 |
--forceConsistentCasingInFileNames |
boolean | false |
确保进口中的大小写正确 |
--generateCpuProfile |
string | profile.cpuprofile |
生成编译器运行的 v8 CPU 配置文件以进行调试 |
--importHelpers |
boolean | false |
允许每个项目从 tslib 导入帮助函数一次,而不是在每个文件中包含它们 |
--importsNotUsedAsValues |
remove , preserve , 或error |
remove |
为仅用于类型的导入指定生成/检查行为 |
--incremental |
boolean | true 如果composite ,false 否则 |
保存 .tsbuildinfo 文件以允许增量编译项目 |
--inlineSourceMap |
boolean | false |
在生成的 JavaScript 中包含 sourcemap 文件 |
--inlineSources |
boolean | false |
在生成的 JavaScript 内的源映射中包含源代码 |
--isolatedModules |
boolean | false |
确保每个文件都可以安全地转译,而无需依赖其他导入 |
--jsx |
preserve , react , react-native , react-jsx , 或react-jsxdev |
指定生成的 JSX 代码 | |
--jsxFactory |
string | React.createElement |
指定针对 React JSX 发射时使用的 JSX 工厂函数,例如“React.createElement”或“h” |
--jsxFragmentFactory |
string | 在针对 React JSX 生成时指定用于片段的 JSX 片段引用,例如“React.Fragment”或“Fragment” | |
--jsxImportSource |
string | react |
指定用于在使用时导入 JSX 工厂函数的模块说明符jsx: react-jsx* |
--keyofStringsOnly |
boolean | false |
使 keyof 只返回字符串而不是字符串、数字或符号旧版选项 |
--lib |
list | 指定一组描述目标运行时环境的捆绑库声明文件 | |
--listEmittedFiles |
boolean | false |
编译后打印生成文件的名称 |
--listFiles |
boolean | false |
打印编译期间读取的所有文件 |
--mapRoot |
string | 指定调试器应该定位映射文件而不是生成的位置的位置 | |
--maxNodeModuleJsDepth |
number | 0 |
指定用于检查 JavaScript 文件的最大文件夹深度node_modules 仅适用于allowJs |
--module |
none , commonjs , amd , umd , system , es6 / es2015 , es2020 , es2022 , esnext , node12 , 或nodenext |
CommonJS 如果target 是ES3 或ES5 ,ES6 /ES2015 否则 |
指定生成什么模块代码 |
--moduleResolution |
classic , node , node12 , 或nodenext |
Classic 如果module 是AMD , UMD ,System 或ES6 / ES2015 ,匹配 if module is node12 or nodenext ,Node 否则 |
指定 TypeScript 如何从给定的模块说明符中查找文件 |
--newLine |
crlf 要么lf |
特定于平台 | 设置用于生成文件的换行符 |
--noEmit |
boolean | false |
禁用从编译中生成文件 |
--noEmitHelpers |
boolean | false |
禁用生成自定义帮助函数__extends ,如编译输出 |
--noEmitOnError |
boolean | false |
如果报告任何类型检查错误,则禁用生成文件 |
--noErrorTruncation |
boolean | false |
禁用错误消息中的截断类型 |
--noFallthroughCasesInSwitch |
boolean | false |
在 switch 语句中启用失败案例的错误报告 |
--noImplicitAny |
boolean | true 如果strict ,false 否则 |
为具有隐含any 类型的表达式和声明启用错误报告 |
--noImplicitOverride |
boolean | false |
确保派生类中的覆盖成员使用覆盖修饰符进行标记 |
--noImplicitReturns |
boolean | false |
为未在函数中显式返回的代码路径启用错误报告 |
--noImplicitThis |
boolean | true 如果strict ,false 否则 |
|
this 给定 type时启用错误报告any |
|||
--noImplicitUseStrict |
boolean | false |
禁用在生成的 JavaScript 文件中添加“use strict”指令 |
--noLib |
boolean | false |
禁用包含任何库文件,包括默认的 lib.d.ts |
--noPropertyAccessFromIndexSignature |
boolean | false |
对使用索引类型声明的键强制使用索引访问器 |
--noResolve |
boolean | false |
禁止import 、require 或<reference> 的扩展 TypeScript 应添加到项目中的文件数量 |
--noStrictGenericChecks |
boolean | false |
禁用对函数类型中的泛型签名的严格检查 |
--noUncheckedIndexedAccess |
boolean | false |
undefined 使用索引访问时添加到类型 |
--noUnusedLocals |
boolean | false |
未读取局部变量时启用错误报告 |
--noUnusedParameters |
boolean | false |
未读取函数参数时引发错误 |
--out |
string | 已弃用的设置改为使用outFile |
|
--outDir |
string | 为所有生成的文件指定一个输出文件夹 | |
--outFile |
string | 指定将所有输出捆绑到一个 JavaScript 文件中的文件如果declaration 为真,还指定一个捆绑所有 .d.ts 输出的文件 |
|
--paths |
object | 指定一组将导入重新映射到其他查找位置的条目 | |
--plugins |
list | 指定要包含的语言服务插件列表 | |
--preserveConstEnums |
boolean | true 如果isolatedModules ,false 否则 |
在生成的代码中禁用擦除const enum 声明 |
--preserveSymlinks |
boolean | false |
禁用解析符号链接到他们的真实路径这与节点中的相同标志相关 |
--preserveValueImports |
boolean | false |
在 JavaScript 输出中保留未使用的导入值,否则这些值将被删除 |
--preserveWatchOutput |
boolean | false |
在手表模式下禁用擦除控制台 |
--pretty |
boolean | true |
在 TypeScript 的输出中启用颜色和格式,以使编译器错误更易于阅读 |
--reactNamespace |
string | React |
指定为 调用的对象createElement 这仅适用于以react JSX 发射为目标的情况 |
--removeComments |
boolean | false |
禁用生成评论 |
--resolveJsonModule |
boolean | false |
启用导入 .json 文件 |
--rootDir |
string | 根据输入文件列表计算 | 在源文件中指定根文件夹 |
--rootDirs |
list | 根据输入文件列表计算 | 解析模块时允许将多个文件夹视为一个 |
--skipDefaultLibCheck |
boolean | false |
跳过 TypeScript 中包含的类型检查 .d.ts 文件 |
--skipLibCheck |
boolean | false |
跳过类型检查所有 .d.ts 文件 |
--sourceMap |
boolean | false |
为生成的 JavaScript 文件创建源映射文件 |
--sourceRoot |
string | 指定调试器查找参考源代码的根路径 | |
--strict |
boolean | false |
启用所有严格的类型检查选项 |
--strictBindCallApply |
boolean | true 如果strict ,false 否则 |
检查 、 和 方法的参数是否bind 与call 原始apply 函数匹配 |
--strictFunctionTypes |
boolean | true 如果strict ,false 否则 |
分配函数时,检查以确保参数和返回值是子类型兼容的 |
--strictNullChecks |
boolean | true 如果strict ,false 否则 |
类型检查时,请考虑null 和undefined |
--strictPropertyInitialization |
boolean | true 如果strict ,false 否则 |
检查已声明但未在构造函数中设置的类属性 |
--stripInternal |
boolean | false |
禁用生成@internal 在其 JSDoc 注释中的声明 |
--suppressExcessPropertyErrors |
boolean | false |
在创建对象文字期间禁用过多属性错误的报告 |
--suppressImplicitAnyIndexErrors |
boolean | false |
|
noImplicitAny |
boolean | true如果strict,否则为false。 | 在索引缺少索引签名的对象时抑制错误 |
--target |
es3 , es5 , es6 / es2015 , es2016 , es2017 , es2018 , es2019 , es2020 , es2021 , es2022 , 或esnext |
ES3 |
为生成的 JavaScript 设置 JavaScript 语言版本并包含兼容的库声明 |
--traceResolution |
boolean | false |
过程中使用的日志路径moduleResolution |
--tsBuildInfoFile |
string | .tsbuildinfo |
指定 .tsbuildinfo 增量编译文件的文件夹 |
--typeRoots |
list | 指定多个文件夹,其行为类似于./node_modules/@types |
|
--types |
list | 指定要包含的类型包名称,而不在源文件中引用 | |
--useDefineForClassFields |
boolean | true 如果target 是ES2022 或更高,包括ESNext ,false 否则 |
生成符合 ECMAScript 标准的类字段 |
--useUnknownInCatchVariables |
boolean | true 如果strict ,false 否则 |
默认的 catch 子句变量,unknown 而不是any |
– 👍如果觉得本文对你有帮助,记得点赞收藏加关注哦👍 –