typescript.json
tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。
初始化
TypeScript项目通过tscripttion.json来管理Typescript的对应配置,以下是生成typescript.json的过程:
安装依赖
- typescript
- NPM
- Yarn
npm install typescript -D
yarn add 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
属性从另一个配置文件里继承配置。
extends
是tsconfig.json
文件里的顶级属性(与compilerOptions
,files
,include
,和exclude
一样)。 extends
的值是一个字符串,包含指向另一个要继承文件的路径。
在原文件里的配置先被加载,然后被来至继承文件里的配置重写。 如果发现循环引用,则会报错。
来自所继承配置文件的files
,include
和exclude
覆盖源配置文件的属性。
比如:
{
"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 | 编译过程中需要引入的库文件的列表 |
| "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 |