首页 前端知识 一文读懂tsconfig.json配置文件

一文读懂tsconfig.json配置文件

2024-05-18 18:05:14 前端知识 前端哥 804 355 我要收藏

tsconfig.json是TypeScript编辑器的配置文件,通常存在于项目的根目录中,TypeScript编译器可根据它的信息来对代码进行编译。(如图是react脚手架中的tsconfig.json配置文件)

根选项:

  • include:用来指定哪些ts文件需要被编译,否则默认当前目录下除了exclude之外所有.ts, .d.ts,.tsx文件
  • exclude:指定不需要被编译的目录
  • extends:指定一个其他tsconfig.json文件路径,来继承这个配置文件里的配置,继承文件的配置会覆盖当前文件定义的配置
  • files:指定被编译文件的列表,只有需要编译文件少时才会用到,一般直接用include指定文件夹
  • compilerOptions: 编译器选项
  • references:用于指定项目之间的引用关系
{
     //** 表示任意目录, * 表示任意文件。
    "include": ["./src/**/*"], // 指定被编译文件所在的目录,否则默认当前目录下除了exclude之外的所有.ts, .d.ts,.tsx文件
    "exclude": [], // 指定不需要被编译的目录
    "references": [{ "path": "./tsconfig.node.json" }], //用于指定项目之间的引用关系,当前项目的 tsconfig.json 文件引用了位于相对路径 "./tsconfig.node.json" 的另一个 TypeScript 配置文件
    "compilerOptions": {
         /* 编辑器选项 */
        "target": "ES6", // 目标语言的版本
        "module": "commonjs", // 生成代码的模板标准
        "lib": ["DOM","ES5","ES6","ES7","ScriptHost"], // TS需要引用的库,如未指定会根据target注入默认列表
        "types": [], // 用来指定需要包含的模块,只有在这里列出的模块声明文件才会被加载进来
        "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响
        "paths": {
            "@/*": [
             "src/*"
              ]
            }
         }, // 用于设置模块名到基于baseUrl的路径映射
        "sourceMap": true, // 用来指定编译时是否生成.map文件
        "outDir": "./dist", // 指定输出目录
        "rootDir": "./", // 指定输出文件目录(用于输出),用于控制输出目录结构
        "allowJs": true, // 允许编译器编译JS,JSX文件
        "checkJs": true, // 允许在JS文件中报错,通常与allowJS一起使用
        "removeComments": true, // 删除注释
        "esModuleInterop": true, // 为导入内容创建命名空间,实现CommonJS和ES模块之间的互操作性
        "jsx": "react-jsx", // 指定jsx代码用于的开发环境
        "moduleResolution": "node",//用于选择模块解析策略,有'node'和'classic'两种类型
        "skipLibCheck": true, // 用来控制是否在编译时进行库文件检查的
        /* 严格检查选项 */
        "strict": true, // 开启所有严格的类型检查
        "alwaysStrict": true, // 在代码中注入'use strict'
        "noImplicitAny": true, // 不允许隐式的any类型
        "noImplicitThis": true, // 不允许this有隐式的any类型
        "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
        "strictBindCallApply": true, // 严格的bind/call/apply检查
        "strictFunctionTypes": true, // 不允许函数参数双向协变
        "strictPropertyInitialization": true, // 类的实例属性必须初始化
        /* 额外检查 */
        "noUnusedLocals": true,//是否检查未使用的局部变量
        "noUnusedParameters": true,//是否检查未使用的参数
        "noImplicitReturns": true,//检查函数是否不含有隐式返回值
        "noImplicitOverride": true,//是否检查子类继承自基类时,其重载的函数命名与基类的函数不同步问题
        "noFallthroughCasesInSwitch": true,//检查switch中是否含有case没有使用break跳出
        "noUncheckedIndexedAccess": true,//是否通过索引签名来描述对象上有未知键但已知值的对象
        "noPropertyAccessFromIndexSignature": true,//是否通过" . “(obj.key) 语法访问字段和"索引”( obj[“key”]), 以及在类型中声明属性的方式之间的一致性
        /* 实验选项 */
        "experimentalDecorators": true,//是否启用对装饰器的实验性支持,装饰器是一种语言特性,还没有完全被 JavaScript 规范批准
        "emitDecoratorMetadata": true,//为装饰器启用对发出类型元数据的实验性支持
        /* 高级选项 */
        "forceConsistentCasingInFileNames": true,//是否强制代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致
        "extendedDiagnostics": false,//是否查看 TS 在编译时花费的时间
        "noEmitOnError": true,//有错误时不进行编译
        "resolveJsonModule": true,//是否解析 JSON 模块
        "allowSyntheticDefaultImports": true, //指定允许从没有默认导出的模块中默认导入
    },
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8777.html
标签
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!