跳到主要内容

typescript.json

tsconfig.json文件中指定了用来编译这个项目的根文件编译选项

初始化


TypeScript项目通过tscripttion.json来管理Typescript的对应配置,以下是生成typescript.json的过程:

安装依赖

  • typescript
npm install typescript -D

配置命令

"scripts": {
"tscInit":"tsc --init"
}

运行命令

yarn tscInit 

文件结构


typescript.json # typescript.json 文件结构
├── extends # 使用 extends 继承配置
├── compileOnSave # 使用 compileOnSave 重新生成文件
├── compilerOptions # 编译器选项
│ └── allowJs
│ └── target
│ └── module
│ └── moduleResolution
│ └── strict
│ └── nolmplictAny
│ └── jsx
│ └── ……
├── files # 指定一个包含相对或绝对文件路径的列表
├── include # 指定一个文件glob匹配模式列表。 支持的glob通配符有
├── exclude # 指定一个文件glob匹配模式列表。 支持的glob通配符有

通过 extends 继承配置

tsconfig.json文件可以利用extends属性从另一个配置文件里继承配置。

extendstsconfig.json文件里的顶级属性(与compilerOptionsfilesinclude,和exclude一样)。 extends的值是一个字符串,包含指向另一个要继承文件的路径。

在原文件里的配置先被加载,然后被来至继承文件里的配置重写。 如果发现循环引用,则会报错。

来自所继承配置文件的filesincludeexclude覆盖源配置文件的属性。

比如:

{
"compilerOptions": {
"noImplicitAny": true,
"strictNullChecks": true
}
}
{
"extends": "./configs/base",
"files": [
"main.ts",
"supplemental.ts"
]
}

通过 files 指定编译文件

file 指定一个文件glob匹配模式列表。 支持的glob通配符有

  • * 匹配0或多个字符(不包括目录分隔符)
  • ? 匹配一个任意字符(不包括目录分隔符)
  • **/ 递归匹配任意子目录
{
"files": [
"./index.ts"
]
}

通过 include 指定编译文件

include 指定一个文件glob匹配模式列表。 支持的glob通配符有

  • * 匹配0或多个字符(不包括目录分隔符)

  • ? 匹配一个任意字符(不包括目录分隔符)

  • **/ 递归匹配任意子目录

  • 指定编译根目录下的 index.ts 文件

    "include":[
    "./index.ts"
    ]
  • 指定编译根目录下 src 文件夹下的所有文件

    {
    "include": [
    "./src/**/*.ts"
    ],
    }
  • 指定变异目录下 src 下所有的 ts 文件

    "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
    ]

通过 exclude 排除不需要编译文件

exclude 排除一个文件glob匹配模式列表。 支持的glob通配符有

  • * 匹配0或多个字符(不包括目录分隔符)

  • ? 匹配一个任意字符(不包括目录分隔符)

  • **/ 递归匹配任意子目录

  • 排除根目录下的 index.ts 文件编译

    "exclude":[
    "./index.ts"
    ]
  • 排除 node_modules 文件夹

    "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "./src/**/test"
    ]

通过 compileOnSave 重新生成配置文件

在最顶层设置compileOnSave标记,可以让IDE在保存文件的时候根据tsconfig.json重新生成文件。

{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny" : true
}
}

通过 compilerOptions 配置编译器选项


{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
}

compilerOptions编译选项:

配置项作用可选值具体配置
Type Checking
allowUnreachableCode
allowUnusedLabels
alwaysStrict
exactOptionalPropertyTypes
noFallthroughCasesInSwitch
noFallthroughCasesInSwitch
noImplicitAny在表达式和声明上如果有隐式 any类型时报错true/false
"noImplicitAny": true在表达式和声明上有隐含的 any类型时报错,必须显示声明 any 类型
noImplicitOverride
noImplicitReturns
noImplicitThis
noPropertyAccessFromIndexSignature
noUncheckedIndexedAccess
noUnusedLocals若有未使用的局部变量则抛错。true/false
"noUnusedLocals": true 若有未使用的局部变量则抛错
noUnusedParameters若有未使用的参数则抛错。true/false
"noUnusedParameters": true 若有未使用的参数则抛错。
strict启用所有严格类型检查选项true/false
"strict": true,启用严格检查
strictBindCallApply
strictNullChecks在严格的 null检查模式下, null和 undefined值不包含在任何类型里,只允许用它们自己和 any来赋值(有个例外, undefined可以赋值到 void)true/false
"strictNullChecks":true, // 严格检查 null ,不允许 null 赋值给其他数据类型
strictFunctionTypes
strictPropertyInitialization
useUnknownInCatchVariables
Modules
allowUmdGlobalAccess
baseUrl工作根目录 解析非相对模块名的基准目录
"baseUrl": ".",文件夹根目录文项目编译根目录
"baseUrl": "src",文件夹 src 目录文项目编译根目录
module指定生成哪个模块系统代码
默认值: "None", "CommonJS", "AMD", "System", "UMD", "ES6"或 "ES2015"。
注意一: 只有 "AMD"和 "System"能和 --outFile一起使用。
注意二: "ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。
"module": "esnext",指定生成 esnext 模块系统代码
moduleResolution决定如何处理模块"node"、"classic"
"moduleResolution": "node",通过 node 方式处理模块
noResolve
paths模块名到基于baseUrl的路径映射的列表
Preview
resolveJsonModule
"resolveJsonModule": true
rootDir指定 Ts 文件源码目录string
"rootDir":"./src"
rootDirs
typeRoots
types要包含的类型声明文件名列表
"types": ["vite/client", "node"]
Emit
declaration指定 TS 文件编译后生成相应的 .d.ts 文件。注意:TS 文件中通过 export、export default 导出的才会在 .d.ts 文件中
declarationDir
declarationMap
downlevelIteration
emitBOM
emitDeclarationOnly
importHelpers
importsNotUsedAsValues
inlineSourceMap
inlineSources
mapRoot
newLine
noEmit
noEmitHelpers
noEmitOnError
outDir指定 Ts 文件编译成 Js 后的输出目录string
"outDir": "./build"
outFile
preserveConstEnums
preserveValueImports
removeComments删除所有注释,除了以 /!*开头的版权信息。true/false
"removeComments":true, // 去除注释
sourceMap生成相应的 .map文件true/false
"sourceMap": true,生成 .map 文件
sourceRoot
stripInternal
JavaScript Support
allowJs允许编译javascript文件true/false
allowJs:true 允许编译 javascript 文件
checkJs在 .js文件中报告错误。与 --allowJs配合使用。true/false
allowJs:true 允许编译 javascript 文件
checkJs:true 允许编译 javascript 文件,并且检车 js 文件中的错误
maxNodeModuleJsDepth
Editor Support
disableSizeLimit
plugins
Interop Constraints
allowSyntheticDefaultImports
esModuleInterop表示允许依赖库中出现 export = 这种兼容规范导出的格式
"esModuleInterop": true
forceConsistentCasingInFileNames
isolatedModules
preserveSymlinks
Backwards Compatibility
charset
keyofStringsOnly
noImplicitUseStrict
noStrictGenericChecks
out
suppressExcessPropertyErrors
suppressImplicitAnyIndexErrors
Language and Environment
emitDecoratorMetadata
experimentalDecorators
jsx在 .tsx文件里支持JSX: "React"或 "Preserve""React"、"Preserve"
"jsx": "preserve",在 .tsx 里面支持 preserve
jsxFactory
jsxFragmentFactory
jsxImportSource
lib编译过程中需要引入的库文件的列表
  • ES5
  • ES6
  • ES2015
  • ES7
  • ES2016
  • ES2017
  • ES2018
  • ESNext
  • DOM
  • DOM.Iterable
  • WebWorker
"lib": ["esnext", "dom"]如果 ts 文件中有用到 Document Api 或者 ES6 以上的语法,那么必须配置 lib 目标库
"lib":["DOM","ES2020"] 如果 ts 文件中有用到 Document Api 或者 ES6 以上的语法,那么必须配置 lib 目标库
noLib
reactNamespace
target指定ECMAScript目标版本"ES3"(默认), "ES5", "ES6"/ "ES2015", "ES2016", "ES2017"或 "ESNext"。
"target": "esnext",指定"ESNext"最新的生成目标列表为 ES proposed features
useDefineForClassFields
Compiler Diagnostics
diagnostics
explainFiles
extendedDiagnostics
generateCpuProfile
listEmittedFiles
listFiles
traceResolution
Projects
composite
disableReferencedProjectLoad
disableSolutionSearching
disableSourceOfProjectReferenceRedirect
incremental增量编译,每一次编译记录编译信息,下次编译过程中进行比对,仅编译本次改变的内容。同时,每一次编译后会生成 tsconfig.tsbuildinfo 文件,用于记录编译信息true/false
"incremental": true 增量编译
tsBuildInfoFile
Output Formatting
noErrorTruncation
preserveWatchOutput
pretty
Completeness
skipDefaultLibCheck
skipLibCheck
Command Line
Watch Options
assumeChangesOnlyAffectDirectDependencies
watchFile
watchDirectory
fallbackPolling
synchronousWatchDirectory
excludeDirectories
excludeFiles
typeAcquisition
enable
include
exclude
disableFilenameBasedTypeAcquisition