使用TypeScript命令行工具 tsc CLI

您所在的位置:网站首页 typescript声明文件 使用TypeScript命令行工具 tsc CLI

使用TypeScript命令行工具 tsc CLI

2023-11-05 22:10| 来源: 网络整理| 查看: 265

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

@types

这样,当你通过TypeScript调用这些JavaScript内容时,TypeScript就会自动地寻找@types目录下对应的声明模块了。

2.3.2 使用tsc工具生成TypeScript声明文件

现在我们使用tsc CLI工具对 2.2 小节例子中的TypeScript文件自动地生成相应地类型声明文件,只需在该项目文件夹下执行以下命令:

tsc --declaration --emitDeclarationOnly .\linkedlist.ts

可以看到目录中自动地生成了一个linkedlist.d.ts: ![在这里插入图片描述](img-blog.csdnimg.cn/c4a1a5060a9… =86%x) 该文件地内容如下:

/**结点类,结点是构成链表的基础单元。*/ 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 命令 标志类型描述--allboolean显示所有编译器选项。--generateTracestring生成事件跟踪和类型列表。--helpboolean提供本地信息以获取有关 CLI 的帮助。--initboolean初始化一个 TypeScript 项目并创建一个 tsconfig.json 文件。--listFilesOnlyboolean打印作为编译一部分的文件的名称,然后停止处理。--localestring从 TypeScript 设置消息传递的语言。这不影响发射。--projectstring在给定配置文件的路径或带有“tsconfig.json”的文件夹的情况下编译项目。--showConfigboolean打印最终配置而不是构建。--versionboolean打印编译器的版本。 3.2 构建选项 标志类型描述--buildboolean构建一个或多个项目及其依赖项(如果已过期)--cleanboolean删除所有项目的输出。--dryboolean显示将构建的内容(或删除,如果使用“--clean”指定)--forceboolean构建所有项目,包括那些看起来是最新的--verboseboolean启用详细日志记录。 3.3 监听选项 标志类型描述--excludeDirectorieslist从监视进程中删除目录列表--excludeFileslist从监视模式的处理中删除文件列表--fallbackPollingfixedinterval, priorityinterval, dynamicpriority, 或fixedchunksize指定当系统用完本机文件观察程序时观察程序应使用的方法--synchronousWatchDirectoryboolean在本机不支持递归观察的平台上同步调用回调并更新目录观察者的状态--watchboolean观看输入文件--watchDirectoryusefsevents, fixedpollinginterval, dynamicprioritypolling, 或fixedchunksizepolling指定如何在缺少递归文件监视功能的系统上监视目录--watchFilefixedpollinginterval, prioritypollinginterval, dynamicprioritypolling, fixedchunksizepolling, usefsevents, 或usefseventsonparentdirectory指定 TypeScript 监视模式的工作方式 3.4 编译器标志 标志类型默认值描述--allowJsbooleanfalse允许 JavaScript 文件成为程序的一部分使用该checkJS选项从这些文件中获取错误--allowSyntheticDefaultImportsbooleantrue如果module是system, 或esModuleInterop并且module不是es6/es2015或esnext,false否则当模块没有默认导出时,允许“从 y 导入 x”--allowUmdGlobalAccessbooleanfalse允许从模块访问 UMD 全局变量--allowUnreachableCodeboolean禁用无法访问代码的错误报告--allowUnusedLabelsboolean禁用未使用标签的错误报告--alwaysStrictbooleantrue如果strict,false否则确保始终生成"use strict"--assumeChangesOnlyAffectDirectDependenciesbooleanfalseincremental在使用和模式的项目中重新编译watch假定文件中的更改只会影响直接依赖于它的文件--baseUrlstring指定基目录以解析非相对模块名称--charsetstringutf8不再支持在早期版本中,手动设置读取文件的文本编码--checkJsbooleanfalse在类型检查的 JavaScript 文件中启用错误报告--compositebooleanfalse启用允许 TypeScript 项目与项目引用一起使用的约束--declarationbooleantrue如果composite,false否则从项目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件--declarationDirstring指定生成的声明文件的输出目录--declarationMapbooleanfalse为 d.ts 文件创建源映射--diagnosticsbooleanfalse构建后输出编译器性能信息--disableReferencedProjectLoadbooleanfalse减少 TypeScript 自动加载的项目数量--disableSizeLimitbooleanfalse取消 TypeScript 语言服务器中 JavaScript 文件总源代码大小的 20mb 上限--disableSolutionSearchingbooleanfalse编辑时选择项目退出多项目参考检查--disableSourceOfProjectReferenceRedirectbooleanfalse引用复合项目时禁用首选源文件而不是声明文件--downlevelIterationbooleanfalse为迭代生成更合规但冗长且性能更低的 JavaScript--emitBOMbooleanfalse在输出文件的开头生成一个 UTF-8 字节顺序标记 (BOM)--emitDeclarationOnlybooleanfalse只输出 d.ts 文件,不输出 JavaScript 文件--emitDecoratorMetadatabooleanfalse为源文件中的修饰声明生成设计类型元数据--esModuleInteropbooleanfalse生成额外的 JavaScript 以简化对导入 CommonJS 模块的支持这实现allowSyntheticDefaultImports了类型兼容性--exactOptionalPropertyTypesbooleanfalse将可选属性类型解释为书面形式,而不是添加undefined.--experimentalDecoratorsbooleanfalse启用对 TC39 第 2 阶段草稿装饰器的实验性支持--explainFilesbooleanfalse打印在编译期间读取的文件,包括包含它的原因--extendedDiagnosticsbooleanfalse构建后输出更详细的编译器性能信息--forceConsistentCasingInFileNamesbooleanfalse确保进口中的大小写正确--generateCpuProfilestringprofile.cpuprofile生成编译器运行的 v8 CPU 配置文件以进行调试--importHelpersbooleanfalse允许每个项目从 tslib 导入帮助函数一次,而不是在每个文件中包含它们--importsNotUsedAsValuesremove, preserve, 或errorremove为仅用于类型的导入指定生成/检查行为--incrementalbooleantrue如果composite,false否则保存 .tsbuildinfo 文件以允许增量编译项目--inlineSourceMapbooleanfalse在生成的 JavaScript 中包含 sourcemap 文件--inlineSourcesbooleanfalse在生成的 JavaScript 内的源映射中包含源代码--isolatedModulesbooleanfalse确保每个文件都可以安全地转译,而无需依赖其他导入--jsxpreserve, react, react-native, react-jsx, 或react-jsxdev指定生成的 JSX 代码--jsxFactorystringReact.createElement指定针对 React JSX 发射时使用的 JSX 工厂函数,例如“React.createElement”或“h”--jsxFragmentFactorystring在针对 React JSX 生成时指定用于片段的 JSX 片段引用,例如“React.Fragment”或“Fragment”--jsxImportSourcestringreact指定用于在使用时导入 JSX 工厂函数的模块说明符jsx: react-jsx*--keyofStringsOnlybooleanfalse使 keyof 只返回字符串而不是字符串、数字或符号旧版选项--liblist指定一组描述目标运行时环境的捆绑库声明文件--listEmittedFilesbooleanfalse编译后打印生成文件的名称--listFilesbooleanfalse打印编译期间读取的所有文件--mapRootstring指定调试器应该定位映射文件而不是生成的位置的位置--maxNodeModuleJsDepthnumber0指定用于检查 JavaScript 文件的最大文件夹深度node_modules仅适用于allowJs--modulenone, commonjs, amd, umd, system, es6/ es2015, es2020, es2022, esnext, node12, 或nodenextCommonJS如果target是ES3或ES5,ES6/ES2015否则指定生成什么模块代码--moduleResolutionclassic, node, node12, 或nodenextClassic如果module是AMD, UMD,System或ES6/ ES2015,匹配 if moduleis node12or nodenext,Node否则指定 TypeScript 如何从给定的模块说明符中查找文件--newLinecrlf要么lf特定于平台设置用于生成文件的换行符--noEmitbooleanfalse禁用从编译中生成文件--noEmitHelpersbooleanfalse禁用生成自定义帮助函数__extends,如编译输出--noEmitOnErrorbooleanfalse如果报告任何类型检查错误,则禁用生成文件--noErrorTruncationbooleanfalse禁用错误消息中的截断类型--noFallthroughCasesInSwitchbooleanfalse在 switch 语句中启用失败案例的错误报告--noImplicitAnybooleantrue如果strict,false否则为具有隐含any类型的表达式和声明启用错误报告--noImplicitOverridebooleanfalse确保派生类中的覆盖成员使用覆盖修饰符进行标记--noImplicitReturnsbooleanfalse为未在函数中显式返回的代码路径启用错误报告--noImplicitThisbooleantrue如果strict,false否则this给定 type时启用错误报告any--noImplicitUseStrictbooleanfalse禁用在生成的 JavaScript 文件中添加“use strict”指令--noLibbooleanfalse禁用包含任何库文件,包括默认的 lib.d.ts--noPropertyAccessFromIndexSignaturebooleanfalse对使用索引类型声明的键强制使用索引访问器--noResolvebooleanfalse禁止import、require 或 的扩展 TypeScript 应添加到项目中的文件数量--noStrictGenericChecksbooleanfalse禁用对函数类型中的泛型签名的严格检查--noUncheckedIndexedAccessbooleanfalseundefined使用索引访问时添加到类型--noUnusedLocalsbooleanfalse未读取局部变量时启用错误报告--noUnusedParametersbooleanfalse未读取函数参数时引发错误--outstring已弃用的设置改为使用outFile--outDirstring为所有生成的文件指定一个输出文件夹--outFilestring指定将所有输出捆绑到一个 JavaScript 文件中的文件如果declaration为真,还指定一个捆绑所有 .d.ts 输出的文件--pathsobject指定一组将导入重新映射到其他查找位置的条目--pluginslist指定要包含的语言服务插件列表--preserveConstEnumsbooleantrue如果isolatedModules,false否则在生成的代码中禁用擦除const enum声明--preserveSymlinksbooleanfalse禁用解析符号链接到他们的真实路径这与节点中的相同标志相关--preserveValueImportsbooleanfalse在 JavaScript 输出中保留未使用的导入值,否则这些值将被删除--preserveWatchOutputbooleanfalse在手表模式下禁用擦除控制台--prettybooleantrue在 TypeScript 的输出中启用颜色和格式,以使编译器错误更易于阅读--reactNamespacestringReact指定为 调用的对象createElement这仅适用于以reactJSX 发射为目标的情况--removeCommentsbooleanfalse禁用生成评论--resolveJsonModulebooleanfalse启用导入 .json 文件--rootDirstring根据输入文件列表计算在源文件中指定根文件夹--rootDirslist根据输入文件列表计算解析模块时允许将多个文件夹视为一个--skipDefaultLibCheckbooleanfalse跳过 TypeScript 中包含的类型检查 .d.ts 文件--skipLibCheckbooleanfalse跳过类型检查所有 .d.ts 文件--sourceMapbooleanfalse为生成的 JavaScript 文件创建源映射文件--sourceRootstring指定调试器查找参考源代码的根路径--strictbooleanfalse启用所有严格的类型检查选项--strictBindCallApplybooleantrue如果strict,false否则检查 、 和 方法的参数是否bind与call原始apply函数匹配--strictFunctionTypesbooleantrue如果strict,false否则分配函数时,检查以确保参数和返回值是子类型兼容的--strictNullChecksbooleantrue如果strict,false否则类型检查时,请考虑null和undefined--strictPropertyInitializationbooleantrue如果strict,false否则检查已声明但未在构造函数中设置的类属性--stripInternalbooleanfalse禁用生成@internal在其 JSDoc 注释中的声明--suppressExcessPropertyErrorsbooleanfalse在创建对象文字期间禁用过多属性错误的报告--suppressImplicitAnyIndexErrorsbooleanfalsenoImplicitAnybooleantrue如果strict,否则为false。在索引缺少索引签名的对象时抑制错误--targetes3, es5, es6/ es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, 或esnextES3为生成的 JavaScript 设置 JavaScript 语言版本并包含兼容的库声明--traceResolutionbooleanfalse过程中使用的日志路径moduleResolution--tsBuildInfoFilestring.tsbuildinfo指定 .tsbuildinfo 增量编译文件的文件夹--typeRootslist指定多个文件夹,其行为类似于./node_modules/@types--typeslist指定要包含的类型包名称,而不在源文件中引用--useDefineForClassFieldsbooleantrue如果target是ES2022或更高,包括ESNext,false否则生成符合 ECMAScript 标准的类字段--useUnknownInCatchVariablesbooleantrue如果strict,false否则默认的 catch 子句变量,unknown而不是any

-- 👍如果觉得本文对你有帮助,记得点赞收藏加关注哦👍 --



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3