preface

TS has recently been introduced in several projects, but the development experience is inconsistent due to inconsistent configurations. So, I’m going to study the TS configuration file tsconfig.json.

Tsconfig. json, as the TS configuration file, has two main functions:

• Specify the compile file
• Defining the build configuration

We’re going to look at both of these.

Specify the compile file

Common properties in tsconfig.json include files, include, exclude, and compilerOptions (compilerOptions is used to record compilation configuration, which we’ll cover below).

files

The value of files is an array containing relative or absolute file paths, representing files that need to be compiled.

{
  "files": [
    "scr/test.ts"]}Copy the code

include&exclude

Include is also used to specify files to be compiled, and exclude is used to filter files to be compiled, both of which specify an array of glob matching patterns for files.

The supported glob wildcards are:

• *Matches 0 or more characters (excluding directory delimiters)
• ?Matches an arbitrary character (excluding directory delimiters)
• * * /Recursively matches any subdirectory

{
  "include": ["src/**/*"]."exclude": ["node_modules"."**/*.spec.ts"]}Copy the code

Details of the rules

• iffilesandincludeBy default, the compiler includes all TypeScript files in the current directory and subdirectories (.ts..d.tsand.tsx)
• If you specifyfilesandincludeThe compiler will include them together
• excludeThis is excluded by defaultnode_modules.bower_components.jspm_packagesandcompilerOptions.outDir(Output file path) directory
• useincludeImported files can be usedexcludeAttribute filtering. However, throughfilesFiles that are explicitly specified by the property are always included, regardlessexcludeHow to set up
• usecompilerOptions.outDirFiles in the specified directory are always excluded by the compiler unless you explicitly use themfilesInclude it
• anyfilesorincludeFiles referenced by the specified file are also included.filesorincludeThe specified fileA.tsRefer to theB.ts, soB.tsIt also compiles
• The compiler does not import files that might be output; So, for example, suppose we includeindex.ts, thenindex.d.tsandindex.jsWill be excluded. In general, it is not recommended that only the extension distinguish files in the same directory.

Defining the build configuration

In tsconfig.json, we use compilerOptions to set configuration options for compilation.

There are a lot of configuration information for compilerOptions. Here are some common configurations. For more, see the full list of compilerOptions.

options	type	The default value	instructions
target	string	ES3	generate.jsVersion of the file. Value containsES3 (default), ES5.ES6/ES2015 (synonymous), ES7/ES2016.ES2017.ES2018.ES2019.ES2020.ESNextThe latest build target list isES proposed features)
module	string	if target === ES3 or ES5 ? CommonJS : ES6/ES2015	Specifies which module system code to generate. Value containsCommonJS.ES6/ES2015.ES2020.None.UMD.AMD.System.ESNext
lib	string[]		A list of ES library files that need to be imported during compilation. You can refer to the specific valuehere.
incremental	boolean	if composite ? true : false	save.tsbuildinfoFile to allow incremental compilation of the project
composite	boolean	true	Enable constraints that allow TypeScript projects to be used with project references. Please refer to specific instructionshere.
tsBuildInfoFile	string		Specifies the folder path to the.tsBuildinfo incremental compilation file
outDir	string		Specify the output directory. If not specified, the output file will be in the same directory as the compiled file
outFile	string		Merges all global (non-module) files into a single output file specified. Only when themoduleforNone.System.AMDEffective when
rootDir	string		The longest public path for all undeclared input files, used to preserve the same directory structure in the output directory as in the input directory. You can refer tohereThe demo
declaration	boolean	false	Generate declaration file.d.ts
declarationDir	string		Generates the path to the declaration file
emitDeclarationOnly	boolean	false	Only the output.d.tsFile without output.jsfile
sourceMap	boolean	false	For the generated.jsFile Creates a source mapping file
inlineSourceMap	boolean	false	The source mapping file is included in.jsIn the file
declarationMap	boolean	false	For the generated.d.jsFile Creates a source mapping file

Other top-level properties

compileOnSave

CompileOnSave, which allows the IDE to regenerate files from tsconfig.json while saving them.

{
    "compileOnSave": true
}
Copy the code

Support for this feature requires Visual Studio 2015, TypeScript1.8.4 and above, and the atom-typescript plug-in installed.

extends

The tsconfig.json file can inherit configuration from another configuration file using the extends property.

// base.tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true."strictNullChecks": true}}// tsconfig.json
{
  "extends": "./base.tsconfig",}Copy the code

The configuration is first loaded from the base file and then overwritten by the configuration in the inherited configuration file. All relative paths found in the configuration file are resolved relative to the configuration file from which they originated.

Files, include, and exclude from the inherited profile overwrite the attributes of the original profile.

Currently, the only top-level attribute that is excluded from inheritance is References.

references

References is used to specify project references.

By splitting into multiple projects, you can greatly speed up type checking and compilation, reduce memory usage when using the editor, and improve the execution of logical grouping of programs.

typeAcquisition

In a project, TS can introduce the node_modules library definition file (.d. TS). The typeAcquisition attribute is used for specific Settings:

• Enable: Indicates whether to enable automatic import of library type definition files (.d.ts). The default value isfalse;
• Include: array type, library names that allow automatic introduction, e.g. [“lodash”];
• Exculde: array type, excluded library name, e.g. [“jquery”];

reference

• tsconfig.json
• Fantastic tsconfig.json guide