TS编译设置和配置文件属性解读

简介: TS编译设置和配置文件属性解读
  1. 编译选项
    1.1 自动编译文件
    编译文件时,使用-w指令后,TS编译器会自动监视文件的变化,并在文件发生变化时重新编译。

示例

tsc xxx.ts -w
1.2 自动编译整个项目
如果直接使用tsc指令,就可以自动将当前项目下的所有ts文件编译为js文件

但直接使用tsc指令的前提是,要在项目根目录下创建一个ts的配置文件 tsconfig.json

tsc --init
如果直接执行 tsc命令,只是一次性生成 所有的js文件

如果直接执行 tsc -w 命令,它会生成所有的js文件,并且还会去监视,只有对应的文件发生变化,就会自动去重新编译生成

1.3 tsconfig.json文件
它是ts编译器的配置文件,可以根据它的信息,对代码进行编译。

1.3.1 外层属性
include:用于指定哪些ts文件需要进行编译

:任意目录
*:任意文件
include:[
"./src/
/*"
]
以上表示根目录下的src目录下的任意目录的任意文件,需要进行编译
exclude:用于指定哪些ts文件不需要进行编译

默认值:["node_modules","bower_components",‘jspm_packages“]
"exclude": ["./src/hello/*"],
extends

定义被继承的配置文件

"extends":"./configs/base"
上述示例中,当前配置文件中会自动包含config目录下base.json中的所有配置信息。

files:设置文件,设置哪些文件需要被编译

files:[
"xxx.ts"
]
compilerOptions:是ts编译器的选项

1.3.2 compilerOptions属性
target:用来指定ts被编译成ES的版本

默认是es3

可选值

'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020',
module:指定哪种版本的模块化

'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
给一个错误的值,就可以看到可以支持哪些版本的模块化

lib :用来指定项目中使用的库

"lib": ["DOM"],
比如上面的DOM,如果没有指定,则不会使用Dom的相关方法【也就是document的相关方法和属性】,也不会有任何的提示。

给定一个错误的值,可以看到可以使用哪些库

outDir:用于指定编译后js文件的所在目录

"outDir": "js",
输出到根目录下的js目录下【没有这个目录,会自动创建】
outFile:将所有的全局作用域中的代码合并懂同一个文件中

Only 'amd' and 'system' modules are supported alongside --outFile.
allowJs:是否对js文件进行编译,默认为false

checkJs:是否检查js代码是否符合语法规范

removeComments:是否移除注释

noEmit:是否不生成编译后的文件

noEmitOnError:当有错误时不生成编译后的文件

alwaysStrict:用来设置编译后的文件是否使用严格模式,默认为false

当有模块化代码的时候,默认就有严格模式了。

noImplicitAny:不允许隐式any

noImplicitThis:不允许不明确类型的this,【默认为true】

strictNullChecks:严格检查空值

strict:所有严格模式的总开关

目录
打赏
0
2
2
1
99
分享
相关文章
|
9月前
Vue3 中使用 Event Bus
【10月更文挑战第16天】Event Bus 是 Vue3 中一种简单而实用的通信方式,在一些简单的场景中可以发挥重要作用。但在实际应用中,要根据项目的具体需求和复杂度,选择合适的通信方式,以实现最佳的性能和可维护性。同时,要遵循最佳实践,合理使用 Event Bus,避免出现问题。
970 60
利用AI提升代码审查效率
本文探讨了如何利用AI技术提升代码审查效率,包括AI在静态代码分析、代码补全和模式识别等方面的作用,以及使用AI驱动工具、集成CI/CD流程、定制化规则等技巧,旨在帮助开发者优化代码审查流程,提高代码质量和开发效率。
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
643 0
 ECharts 雷达图案例001-自定义节点动画
|
11月前
var和let的区别
var和let的区别
阶跃星辰开源GOT-OCR2.0:统一端到端模型,魔搭一站式推理微调最佳实践来啦!
GOT来促进OCR-2.0的到来。该模型具有580百万参数,是一个统一、优雅和端到端的模型,由高压缩编码器和长上下文解码器组成。
阶跃星辰开源GOT-OCR2.0:统一端到端模型,魔搭一站式推理微调最佳实践来啦!
|
11月前
Vue3时间轴(Timeline)
这是一个基于 Vue2 的时间轴(Timeline)组件,支持多种自定义属性,包括时间轴内容数组 `timelineData`、总宽度 `width`、线条样式 `lineStyle`、模式 `mode` 和位置 `position`。时间轴内容数组包含描述 `desc` 和圆圈颜色 `color`。组件提供了丰富的样式选项,如虚线、居中显示等,并支持内容交替展现。适用于多种场景下的时间轴展示需求。
706 1
Vue3时间轴(Timeline)
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
349 0
三种获取苹果设备UID的方式
三种获取苹果设备UID的方式
2966 0
.ts 文件编译成 .js 文件,以及 VSCode 自动编译配置
.ts 文件编译成 .js 文件,以及 VSCode 自动编译配置
1266 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问