javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > TypeScript tsconfig.json配置

TypeScript中tsconfig.json的完整配置指南

作者:Forever丿顾北

tsconfig.json是TypeScript项目的核心配置文件,用于控制编译器的编译行为,通过合理配置这些选项,可以定制TypeScript的编译过程,满足不同项目的需求,感兴趣的可以了解一下

一、tsconfig.json简介

TypeScript项目的核心配置文件是tsconfig.json,它能对TypeScript编译器的行为进行控制,从而实现项目编译选项的定制。要是项目里存在这个文件,就意味着它是TypeScript项目。此文件可以对编译过程中要包含的文件、要排除的文件以及编译器选项等内容作出规定。

二、基本配置项

1. 项目结构相关配置

配置项作用是否必需默认值可选值
files明确指定要编译的文件路径列表字符串数组,例如:["src/index.ts", "src/utils.ts"]
include规定采用glob模式匹配要编译的文件或文件夹字符串数组,例如:["src/**/*.ts", "test/**/*.ts"]
exclude指明采用glob模式匹配要排除的文件或文件夹[“node_modules”]字符串数组,例如:["node_modules", "dist"]
extends用于继承其他tsconfig.json文件的配置字符串,例如:"@company/tsconfig-base"
references配置项目引用,适用于构建大型项目对象数组,例如:[{ "path": "../shared" }]

2. 编译选项(compilerOptions)

2.1 基本编译选项

配置项作用是否必需默认值可选值
target设定编译生成的JavaScript版本,像ES3、ES5、ES6/ES2015等ES3"ES3", "ES5", "ES6", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "ES2021", "ES2022", "ESNext"
module确定生成的模块系统格式,例如commonjs、amd、esnext等CommonJS"None", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "Node16", "NodeNext"
lib声明要包含的类型库文件,例如DOM、ESNext等依据target自动推断字符串数组,例如:["DOM", "ESNext"]
outDir指定编译输出文件的目录与源文件同目录字符串,例如:"dist"
rootDir用于指定输入文件的根目录,主要影响输出文件的目录结构包含tsconfig.json的目录字符串,例如:"src"

2.2 严格类型检查选项

配置项作用是否必需默认值可选值
strict启用所有严格类型检查选项,包含noImplicitAny、strictNullChecks等falsetrue/false
noImplicitAny当变量类型为any时,会抛出错误falsetrue/false
strictNullChecks开启严格的null和undefined检查falsetrue/false
strictFunctionTypes启用函数参数双向协变检查falsetrue/false
strictBindCallApply对bind、call和apply方法的参数类型进行严格检查falsetrue/false
strictPropertyInitialization确保类的非可选属性在构造函数中初始化falsetrue/false
noImplicitThis当this类型为any时,会抛出错误falsetrue/false
alwaysStrict让每个文件都以严格模式进行编译falsetrue/false

2.3 模块解析选项

配置项作用是否必需默认值可选值
moduleResolution确定模块解析策略,有’node’(Node.js风格)和’classic’两种可选classic"Node", "Classic"
baseUrl用于设置解析非相对模块名时的基目录字符串,例如:"."
paths配置模块名到基于baseUrl的路径映射对象,例如:{ "@components/*": ["src/components/*"] }
rootDirs指定一个虚拟的目录结构,在编译时会将其合并字符串数组,例如:["src", "node_modules/@types"]
typeRoots设定要包含的类型定义文件目录默认包含所有node_modules/@types目录字符串数组,例如:["node_modules/@types"]
types明确指定要包含的类型定义文件字符串数组,例如:["jest", "node"]
allowSyntheticDefaultImports允许从没有默认导出的模块中默认导入falsetrue/false
esModuleInterop生成额外的代码,以支持CommonJS和ES6模块之间的互操作性falsetrue/false

2.4 JavaScript支持选项

配置项作用是否必需默认值可选值
allowJs允许编译JavaScript文件falsetrue/false
checkJs对JavaScript文件进行类型检查falsetrue/false
jsx配置JSX文件的编译选项,可选择’preserve’、‘react-native’或’react’preserve"preserve", "react-native", "react", "react-jsx", "react-jsxdev"
jsxFactory指定JSX元素的工厂函数,例如’React.createElement’React.createElement字符串,例如:"h"
jsxFragmentFactory指定JSX片段的工厂函数,例如’React.Fragment’React.Fragment字符串,例如:"Fragment"

2.5 其他编译选项

配置项作用是否必需默认值可选值
sourceMap生成source map文件,方便调试falsetrue/false
inlineSourceMap将source map内联到生成的JavaScript文件中falsetrue/false
inlineSources将源代码内联到source map中falsetrue/false
declaration生成对应的.d.ts声明文件falsetrue/false
declarationMap为声明文件生成source mapfalsetrue/false
removeComments移除编译后文件中的注释falsetrue/false
noEmit不生成输出文件falsetrue/false
skipLibCheck跳过对所有类型声明文件(.d.ts)的类型检查falsetrue/false
forceConsistentCasingInFileNames强制文件名称的大小写保持一致falsetrue/false

三、高级配置示例

1. 基础配置示例

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

2. React项目配置示例

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

3. Node.js项目配置示例

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "lib": ["ESNext"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

四、配置技巧与注意事项

1. 配置继承与分层

2. 常见问题与解决办法

3. 性能优化建议

通过对tsconfig.json进行合理配置,能够让TypeScript更好地契合项目需求,提升开发体验和代码质量。建议在项目初始阶段就确定好配置方案,并根据项目的发展情况进行相应调整。

五、以下是一套完整的tsconfig.js的配置示例,可根据自己环境自行修改

{
  "compilerOptions": {
    /* 基本选项 */
    "target": "ESNext",                         /* 指定ECMAScript目标版本 */
    "module": "ESNext",                         /* 指定模块系统 */
    "lib": ["DOM", "ESNext"],                   /* 指定要包含的库文件 */
    "outDir": "./dist",                         /* 指定输出目录 */
    "rootDir": "./src",                         /* 指定输入文件的根目录 */
    "moduleResolution": "Node",                 /* 指定模块解析策略 */
    "baseUrl": ".",                             /* 用于解析非相对模块名称的基础目录 */
    "paths": {                                  /* 模块名到基于baseUrl的路径映射 */
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    },

    /* 严格类型检查选项 */
    "strict": true,                             /* 启用所有严格类型检查选项 */
    "noImplicitAny": true,                      /* 不允许隐式的any类型 */
    "strictNullChecks": true,                   /* 启用严格的null检查 */
    "strictFunctionTypes": true,                /* 启用严格的函数类型检查 */
    "strictBindCallApply": true,                /* 严格的bind/call/apply检查 */
    "strictPropertyInitialization": true,       /* 严格的属性初始化检查 */
    "noImplicitThis": true,                     /* 不允许隐式的this类型 */
    "alwaysStrict": true,                       /* 以严格模式解析并生成代码 */

    /* 模块互操作性选项 */
    "esModuleInterop": true,                    /* 支持ES模块与CommonJS的互操作性 */
    "allowSyntheticDefaultImports": true,       /* 允许从没有默认导出的模块中默认导入 */
    "skipLibCheck": true,                       /* 跳过类型声明文件检查 */
    "forceConsistentCasingInFileNames": true,   /* 强制文件名称的大小写一致 */

    /* JavaScript支持选项 */
    "allowJs": true,                            /* 允许编译JavaScript文件 */
    "checkJs": true,                            /* 对JavaScript文件进行类型检查 */
    "jsx": "react-jsx",                         /* 指定JSX代码的生成方式 */

    /* 生成选项 */
    "sourceMap": true,                          /* 生成source map文件 */
    "declaration": true,                        /* 生成对应的.d.ts文件 */
    "declarationMap": true,                     /* 为声明文件生成source map */
    "removeComments": true,                     /* 移除注释 */

    /* 调试选项 */
    "incremental": true,                        /* 启用增量编译 */
    "traceResolution": false,                   /* 显示模块解析日志 */
    "listEmittedFiles": true,                   /* 列出编译后生成的文件 */
    "listFiles": false                          /* 打印编译过程中处理的文件 */
  },

  /* 项目结构选项 */
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.test.ts"],
  "references": [
    { "path": "./tsconfig.shared.json" }        /* 引用其他项目配置 */
  ]
} 

到此这篇关于TypeScript中tsconfig.json的完整配置指南的文章就介绍到这了,更多相关TypeScript tsconfig.json配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文