TypeScript 编译配置

TypeScript的编译配置:

对单独一个ts文件进行监听编译 可使用tsc demo.ts -w

如果想对所有ts文件进行监听编译,监听到变化就自己编译,可以直接创建一个tsconfig.json文件。内容空着也OK:{},执行 tsctsc -w

如果有相应的需求,可以在根目录下创建一个文件

tsconfig.json,在此文件中进行配置:

typescript 复制代码
{
	/*
	* tsconfig.json 是ts编译器的配置文件,ts编译器可以根据它的信息对代码进行编译
	* "include" 用来指定哪些ts文件需要被编译 
	* 	路径:** 表示任意目录
	* 		   * 表示任意文件
	* "exclude" 不需要被编译的文件目录
	* 	默认值:["node_modules","bower_components","jspm_packages"] 
	* "extends" 定义被继承的配置文件 
	* "files" 指定被编译文件的列表 需要编译的文件少时可使用此选项
	* "compilerOptions" 编译器的选项
	* 	=======compilerOptions常用的配置项=======
	* 	"target" 用来指定ts被编译为ES的版本 具体值如下所示:
	* 	 es3,es5,es6,es2015,es2016,es2017,es2018,es2019,es2020,esnext
	* 	"module" 指定要使用的模块化的规范 值为以下所示:
	* 	none,commonjs,amd,syste,umd,es6,es2015,es2020,esnext
	* 	"lib" 用来指定项目中要使用的库 
	* 		如在node环境下,使用documen,可配置 一般不需要配置
	* 		(一般在浏览器运行,不需要处理) 可选值居多,dom,es6...
	* 	"outDir" 用来指定编译后文件所在的目录
	* 	"outFile" 将代码合并为一个文件  后期交给打包工具即可,只做了解
	* 		设置outFile后,所有全局作用域中的代码会合并到同一个文件中
	* 		注意:在想合并两个模块时,module要选择system/amd,否则会报错 
	* 		"module":"system" 
	* 	"allowJs" 是否对js文件进行编译 默认为false
	* 	"checkJs" 是否检查js代码是否符合语法规范 默认为false
	* 	"removeComments" 是否移除注释 默认为false
	* 	"noEmit" 不生成编译后的文件 默认为false 
	* 		若只想简单看下语法是否正确,不要编译后文件可写 noEmit:true
	* 	"noEmitOnError" 当有错误时不生成编译后的文件 
	* 		可避免有错误的代码编译到dist下文件中
	* 	=========compilerOptions 语法检查配置项===========
	* 	"strict" 所有严格检查的总开关
	* 	"alwaysStrict" 用来设置编译后的文件是否使用严格模式 默认为false	
	* 	"noImplicitAny" 不允许隐式的any类型 
	* 		如果设为true,代码中会对any类型的值进行提示
	* 	"noImplicitThis" 不允许不明确类型的this
	* 		可在代码中写function fn(this:Window){console.log(this)}
	* 			function fn(this:any){console.log(this)}	
	* 	"strictNullChecks" 严格的检查空值 
	* 		代码中可以写
	* 			let box1 = document.getElementByid('box1')
	* 			if(box1 !== null){
	* 				box1.addEventListener('click',function(){
	* 					console.log('hello')
	* 				})	
	* 			}
	* 			也可写为:
	* 				box1?..addEventListener('click',function(){
	* 					console.log('hello')
	* 				})	
	* 
	*/

	"include":[
		"./src/**/*", // src目录下任意目录下的任意ts文件
	],
	"exclude":[
		"./src/hi/**/*"
	],
	"extends":"./config/base" // 表示此配置文件会自动包含config文件下base.json中的配置信息
	"files": [
        "core.ts",
        "tsc.ts"
     ],
     "compilerOptions":{
     	// 常用配置
		"target":"es2015", 
		"module":"es2015",
		//"lib":["dom"],
		"outDir":"./dist",
		"allowJs":true, 
		"checkJs":false,
		"removeComments":true,
		"noEmit":false,
		"noEmitOnError":true,
		// 语法检查
		"strict":true,
		"alwaysStrict":true, // 如果有模块的引入时,文件会自动启用严格模式
		"noImplicitAny":true,
		"noImplicitThis":true,
		"strictNullChecks":true
	}
}

tsconfig.json 常用配置项:

  • "include" 用来指定哪些ts文件需要被编译

     路径:** 表示任意目录
     	   * 表示任意文件
    
  • "exclude" 不需要被编译的文件目录。

     默认值exclude:["node_modules","bower_components","jspm_packages"] 
    
  • "extends" 定义被继承的配置文件

  • "files" 指定被编译文件的列表 需要编译的文件少时可使用此选项

  • "compilerOptions" 编译器的选项

     ---------compilerOptions常用的配置项------
     
     "target" 用来指定ts被编译为ES的版本* 可选值如下:es3,es5,es6,es2015,es2016,es2017,es2018,es2019,es2020,esnext
     "module" 指定要使用的模块化的规范 值为以下所示:
     none,commonjs,amd,syste,umd,es6,es2015,es2020,esnext
     "lib" 用来指定项目中要使用的库 
     	如在node环境下,使用documen,可配置 一般不需要配置
     	(一般在浏览器运行,不需要处理) 可选值居多,dom,es6...
     "outDir" 用来指定编译后文件所在的目录
     "outFile" 将代码合并为一个文件  后期交给打包工具即可,只做了解
     	设置outFile后,所有全局作用域中的代码会合并到同一个文件中
     	注意:在想合并两个模块时,module要选择system/amd,否则会报错 
     	"module":"system" 
     "allowJs" 是否对js文件进行编译 默认为false
     "checkJs" 是否检查js代码是否符合语法规范 默认为false
     "removeComments" 是否移除注释 默认为false
     "noEmit" 不生成编译后的文件 默认为false 
     	若只想简单看下语法是否正确,不要编译后文件可写 noEmit:true
     "noEmitOnError" 当有错误时不生成编译后的文件 
     	可避免有错误的代码编译到dist下文件中
     	
     -----compilerOptions 语法检查配置项----------
     
     "strict" 所有严格检查的总开关
     "alwaysStrict" 用来设置编译后的文件是否使用严格模式 默认为false	
     "noImplicitAny" 不允许隐式的any类型 
     	如果设为true,代码中会对any类型的值进行提示
     "noImplicitThis" 不允许不明确类型的this
     	可在代码中写function fn(this:Window){console.log(this)}
     		function fn(this:any){console.log(this)}	
     "strictNullChecks" 严格的检查空值 
     	代码中可以写
     		let box1 = document.getElementByid('box1')
     	if(box1 !== null){
     			box1.addEventListener('click',function(){
     				console.log('hello')
     		})	
     		}
     		也可写为:
     			box1?..addEventListener('click',function(){
     			console.log('hello')
     		})	
    

可参考网址:tsconfig.json

相关推荐
前端小小王25 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发34 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
yg_小小程序员2 小时前
vue3中使用vuedraggable实现拖拽
typescript·vue
高山我梦口香糖3 小时前
[react 3种方法] 获取ant组件ref用ts如何定义?
typescript·react
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
程序员_三木4 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
prall6 小时前
实战小技巧:下划线转驼峰篇
前端·typescript
开心工作室_kaic6 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育6 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博6 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js