一、自动编译文件编译 TS 文件时使用 -w 指令后TS 编译器会自动监视文件的变化并在文件发生变化时对文件进行重新编译tsc 【TS 文件】 -w二、配置文件如果直接使用 tsc 指令则可以自动将当前项目下的所有 TS 文件编译为 JS 文件但是能直接使用 tsc 指令的前提是要先在项目根目录下创建一个 TS 的配置文件 tsconfig.json生成tsconfig.json文件的方式运行指令tsc --init它会在当前目录生成一个带注释的tsconfig.json模板文件tsconfig.json文件的 exclude 默认情况下会排除node_modules、bower_components、jspm_packages、outDir目录三、配置选项tsconfig.json 是 TS 编译器的配置文件TS 编译器可以根据它的信息来对代码进行编译详细配置见官方文档https://www.tslang.cn/docs/handbook/compiler-options.html1、include定义希望被编译的文件所在的目录默认值[“**/*”]include:[./src/**/*]2、exclude定义需要排除在外的目录默认值[“node_modules”, “bower_components”, “jspm_packages”]exclude:[./src/hello/**/*]3、extends定义被继承的配置文件extends:./configs/base4、files定义被编译文件的列表只有需要编译的文件较少时才会用到files:[demo1.ts,demo2.ts,demo3.ts,demo4.ts,demo5.ts]5、compilerOptions1target设置 TS 代码编译的目标版本可选值ES3默认、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNextcompilerOptions:{target:ES6}设置一个错误的目标版本后进行编译控制台会提示相应的目标版本tsconfig.json:5:19 - error TS6046: Argument for --target option must be: es3, es5, es6, es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext.2module设置编译后代码使用的模块化系统可选值CommonJS、UMD、AMD、System、ES2020、ESNext、NonecompilerOptions:{module:CommonJS}设置一个错误的模块化系统后进行编译控制台会提示相应的模块化系统tsconfig.json:6:19 - error TS6046: Argument for --module option must be: none, commonjs, amd, system, umd, es6, es2015, es2020, es2022, esnext, node16, nodenext.3lib指定代码运行时所包含的库一般不需要修改可选值ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost…compilerOptions:{lib:[ES6,DOM]}设置一个错误的库控制台会提示相应的库tsconfig.json:7:17 - error TS6046: Argument for --lib option must be: es5, es6, es2015, es7, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext, dom, dom.iterable, webworker, webworker.importscripts, webworker.iterable, scripthost, es2015.core, es2015.collection, es2015.generator, es2015.iterable, es2015.promise, es2015.proxy, es2015.reflect, es2015.symbol, es2015.symbol.wellknown, es2016.array.include, es2017.object, es2017.sharedmemory, es2017.string, es2017.intl, es2017.typedarrays, es2018.asyncgenerator, es2018.asynciterable, es2018.intl, es2018.promise, es2018.regexp, es2019.array, es2019.object, es2019.string, es2019.symbol, es2020.bigint, es2020.date, es2020.promise, es2020.sharedmemory, es2020.string, es2020.symbol.wellknown, es2020.intl, es2020.number, es2021.promise, es2021.string, es2021.weakref, es2021.intl, es2022.array, es2022.error, es2022.intl, es2022.object, es2022.string, esnext.array, esnext.symbol, esnext.asynciterable, esnext.intl, esnext.bigint, esnext.string, esnext.promise, esnext.weakref.4outDir编译后文件的所在目录默认情况下编译后的 JS 文件会和 TS 文件位于同级目录设置 outDir 后可以改变编译后文件的位置compilerOptions:{outDir:dist}5outFile将所有的文件编译为一个 JS 文件将所有的编写在全局作用域中的代码合并为一个 JS 文件如果 module 制定了 None、System 或 AMD 才会将模块一起合并到文件之中compilerOptions:{outFile:./dist/main.js}6allowJs是否对 JS 文件编译主要搭配 checkJs 一同使用默认值falsecompilerOptions:{allowJs:true}7checkJs是否对 JS 文件进行检查主要搭配 allowJs 一同使用默认值falsecompilerOptions:{checkJs:true}8removeComments是否删除注释默认值falsecompilerOptions:{removeComments:true}9noEmit不生成编译后的文件主要针对于只想使用 TS 语法进行检测默认值falsecompilerOptions:{noEmit:true}10noEmitOnError当有错误时不生成编译后的文件默认值falsecompilerOptions:{noEmitOnError:true}11alwaysStrict设置编译后的文件是否使用严格模式默认值falsecompilerOptions:{alwaysStrict:true}12noImplicitAny是否禁止隐式的 any 类型默认值falsecompilerOptions:{noImplicitAny:true}隐式的 any 类型functiongetSum(a,b){returnab;}非隐式的类型functiongetSum(a:number,b:number){returnab;}13noImplicitThis是否禁止不明确类型的 this默认值falsecompilerOptions:{noImplicitThis:true}不明确类型的 thisfunctionhi(){console.log(this);}明确类型的 thisfunctionhi(this:Window){console.log(this);}14strictNullChecks是否严格的检查空值默认值falsecompilerOptions:{strictNullChecks:true}下例代码中的 box 可能为 nullletboxdocument.querySelector(box);box.addEventListener(click,function(){console.log(Hello World);});确保 box 不是 nullletboxdocument.querySelector(box);if(box!null){box.addEventListener(click,function(){console.log(Hello World);});}15strict是否启用所有的严格检查一半书写位置靠前默认值truecompilerOptions:{strict:true}