typescript中的tsconfig.json文件配置说明includeexcludeextendsfilescompilerOptionstargetmoduleoutDir

Posted 2022-01-25 web半晨

目录

• 1、tsconfig.json文件
• 2、相关链接

---

1、tsconfig.json文件

	// 此文章列取了五个大项
    // 01-------------------------------------------------------------
    // "include":["src/**/*", "tests/**/*"]
    // 表示所有src目录和tests目录下的文件都会被编译
    // ** 表示任意目录
    // * 表示任意文件
    "include": ["./src/**/*"],
    // 02-------------------------------------------------------------
    // "exclude":["./src/hello/**/*"],
    // 表示不需要被编译的文件目录
    // exclude的默认值：["node_modules", "bower_components", "jspm_packages"]
    // "exclude": ["./src/hello/**/*"],
    // 03-------------------------------------------------------------
    // "extends": "./configs/base",
    // 表示当前配置文件中会自动继承（包含）config目录下base.json中的所有配置信息
    // 04-------------------------------------------------------------
    // "files": ["core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts"],
    // 列表中的文件都会被TS编译器所编译
    // 05-------------------------------------------------------------
    // 编译器的选项
    // 此文章只列取15项
    "compilerOptions": 
        // 0501-------------------------------------------------------
        // target 用来指定ts被编译为的ES的版本
        //  'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext'
        "target": "es6",
        // 0502-------------------------------------------------------
        // module 指定要使用的模块化的规范
        // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node12', 'nodenext'
        "module": "es2015",
        // 0503-------------------------------------------------------
        // lib 用来指定项目中要使用的库，一般情况下不需要改。如果是使用node操作DOM才需要改
        // 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', '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.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 
        // 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 
        // 'esnext.string', 'esnext.promise', 'esnext.weakref'
        // 默认值是浏览器端的库（不是所有）
        // "lib": ["es6", "dom"]
        // 0504-------------------------------------------------------
        // outDir 用来指定编译后文件所在的目录，意思就是把编译后的文件放到指定文件夹中。
        "outDir": "./dist",
        // 0505-------------------------------------------------------
        // outFile 将代码合并为一个文件
        // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
        // 此示例中会把全局作用域中的代码合并到./dist/app.js文件中
        // "outFile": "./dist/app.js"
        // 0506-------------------------------------------------------
        // allowJs 是否对js文件进行编译，默认是false
        // 意思就是定义了一个.js文件，编译的时候是否需要把这个.js文件也一起编译到对应的dist文件夹中。
        // 也就是0504定义的那个文件夹
        // "allowJs": true,
        // 0507-------------------------------------------------------
        // checkJs 是否检查js代码是否符合语法规范，默认是false
        // 意思是在.js文件中编写代码，是否检查类型
        // 例如，let a = 10; a = 'hello';
        // 如果为false则不会检查，如果为true会报错
        // "checkJs": true,
        // 0508-------------------------------------------------------
        // removeComments 是否移除注释
        // 意思是在.ts文件中写了注释，编译时是否把注释也一起编译到.js文件中
        // true 不把注释编译到.js文件中
        // false 把注释编译到.js文件中
        // 默认值是false
        "removeComments": false,
        // 0509-------------------------------------------------------
        // noEmit 不生成编译后的文件
        "noEmit": false,
        // 0510-------------------------------------------------------
        // noEmitOnError 当代码有错误时不生成编译后的文件
        "noEmitOnError": true,
        // 0511-------------------------------------------------------
        // strict 所有严格检查的总开关
        // 如果此项的值为true
        // 后边的所有设置都可以省略
        "strict": true,
        // 05112------------------------------------------------------
        // alwaysStrict 用来设置编译后的文件是否使用严格模式，默认false
        // 当.js文件使用了export（导出）、import（导入）的时候
        // .js文件头部不会加上"use strict"严格模式的标识
        // 因为export、import自动携带了严格模式，所以也就自动的进入了严格模式
        "alwaysStrict": true,
        // 05113------------------------------------------------------
        // noImplicitAny 不允许隐式的any类型
        // 意思是，当有类型错误时出现下划线提示
        // 如果为false就不会出现下划线提示
        "noImplicitAny": true,
        // 0514-------------------------------------------------------
        // noImplicitThis 不允许不明确类型的this
        // 意思就是要给this指定类型（也是指定this的指向）
        "noImplicitThis": true,
        // 05115------------------------------------------------------
        // strictNullChecks 严格的检查空值
        // 例如
        // let box1 = document.getElementById('box1');
        // box1.addEventListener('click', function () alert('hello'); );
        // 如果页面没有找到box1id，那么box1.addEventListener中的box1会出现下划线报错
        // 如果此时strictNullChecks的值为true
        // 需要解决这个报错，方法有二
        // 方法一
        // if(box1 !== null)
        // 		box1.addEventListener('click', function ()
        //          alert('hello');
        //      );
        // 
        // 方法二
        // box1 ? .addEventListener('click', function () 
        //      alert('hello');
        // );
        "strictNullChecks": true,
    

---

2、相关链接

typescript tsconfig.config.json配置文件中各项说明