Arrange vomiting blood in each field of the tsconfig.json file

tsconfig.json file description

Generally in typescript , we can see tsconfig.json , which specifies the compilation options of this project, and also specifies the root directory of this project, so this file is generally under the root directory of the project. In this case, as far as the typescript project is concerned, its compilation generally has the following ways:

• tsc command directly from the command line to compile without any parameters:

  At this time, the compiler will search for the tsconfig.json file from the current directory. If the file is not found in the current directory, it will search the parent directory level by level. If the file has not been retrieved, the compiler will give a hint to use it.

• The command line calls tsc with the parameter --project (or -p) and specifies a directory:

  The compiler directly searches for the tsconfig.json file in this directory, and reports an error if it does not find it.

• Specify the file directly after tsc from the command line:

  Compile the specified file directly.

Description of each field

tsconfig.json contains not many attributes, and there are only a few top-level attributes. The most important and most important should belong to the compilerOptions the attribute 06125c04e0f077. of the attributes in this field, and 16125c04e0f07d Chinese official website is very clear. This article focuses on the other top-level attributes.

Please pay attention to my public number: web Ruichi , send 1024 to get more front-end learning resources.

In addition, it should be noted that the compilation options specified on the command line will override the corresponding options tsconfig.json

1. files

Array types for representing the ts managed file particular path, the path can be relative or absolute. These files have dependent modules (or which modules are introduced), and the compiler will also search for dependent modules for compilation. If some modules are not introduced in the project, they will not be compiled in the project directory. It should be noted that files does not support the path of the glob

2. Include and exclude

Array type, include used to represent the files managed by ts exclude used to indicate ts excluded by 06125c04e0f1ec (that is, files that are not compiled). The file list can use the glob matching pattern list. The supported glob wildcards are:

• * matches 0 or more characters (excluding directory separators)
• ? matches an arbitrary character (excluding directory separators)
• **/ recursively match any subdirectory

Note , the priority of these three is as follows: files > exclude > include . If you do not specify files , all files in the project directory will be compiled by the compiler. If the same file is specified in the three, this file will be compiled by the compiler. files that are not specified in exclude but specified in 06125c04e0f31e and include will also be compiled because the priority is exclude > include . In addition, exclude will exclude node_modules , bower_components , jspm_packages and outDir .

3. compileOnSave

Boolean type, which allows IDE to regenerate the compiled file according to tsconfig.json

4. extends

String type. The value is a path and specifies another configuration file to inherit the configuration in tsconfig.json The configuration in the original file is loaded first, and the configuration in the original file is overwritten by the configuration with the same name in the inherited file. If a circular reference is found, an error will be reported.

5. typeAcquisition

Object type, set to automatically import library type definition files. acquisition translates to "getting things, gaining". In the entire project, if there is a JavaScript written ts will automatically go to compilerOptions.typeRoots to find the corresponding type declaration file. This behavior is called typeAcquisition (type acquisition). This behavior can enable , and the application scope is specified at the library level. But in my practice, there is no obvious sense to control this behavior enable vscode modify the configuration and restart it does not take effect.

When I used jquery for testing, set enable to false and downloaded @types/jquery , vscode did not prompt that the statement could not be found, and there was no error. But when I set it to true and delete @types/jquery , vscode still did not prompt that the statement could not be found. The jquery introduced by mouse hovering prompted that the statement was found in the global typescript/3.8/node_modules/@types/

This configuration item is not commonly used in normal development, and you don't need to go into it.

6. watchOptions

Object type, the typescript3.8 , is used to configure which monitoring strategy is used to track files and directories. Because tsc monitor file mechanism relies on node of fs.watch/fs.watchFile . The implementation of these two methods is not the same. The former uses file system events for notification, while the latter uses a polling mechanism. For more information, please node official documentation of 06125c04e0f512.

1. watchFile

   String type, configure the monitoring strategy of a single file, must be the following values:

   • useFsEvents (default): Use the native event mechanism of the system's file system to monitor file changes
   • useFsEventsOnParentDirectory: Use the native event mechanism of the system's file system to monitor the directory where the file is modified, so that modifying a file actually monitors the directory where the file is located, so that the file listener of the entire project will be significantly reduced, but it may This leads to inaccurate monitoring.
   • dynamicPriorityPolling: Create a dynamic queue to monitor files. Files with lower modification frequency will reduce the frequency of polling and monitoring.
   • fixedPollingInterval: Check whether each file has changed at regular intervals.
   • priorityPollingInterval: Check whether each file has changed at regular intervals, but the frequency of checking files using heuristic monitoring is lower than that of non-heuristic monitoring files.

2. watchDirectory

   String type, configure the policy of listening directory, must be the following values:

   • useFsEvents (default)
   • dynamicPriorityPolling
   • fixedPollingInterval

   The above three are similar to watchFile

3. fallbackPolling

   When the native event mechanism in the file system of the system is used to monitor files, this option specifies that the local file listener is exhausted or does not support the local file listener is the polling strategy adopted by the compiler, which can be set to the following values :

   • fixedPollingInterval
   • dynamicPriorityPolling
   • priorityPollingInterval
   • synchronousWatchDirectory: Disable delayed monitoring of the directory. If there are a large number of file changes, such as the npm install at node_modules , delayed monitoring is very useful. But there are always some uncommon scenarios that need to disable delayed monitoring.

4. synchronousWatchDirectory

   Boolean type, whether to delay listening to the directory. If the configuration is true , when the file is modified, the callback will be called synchronously and the directory listener will be updated.

5. excludeFiles

   String array, used to specify files that do not need to be monitored for changes

6. excludeDirectories

   String array, used to specify the directory that does not need to be monitored for changes

7. reference

Project reference is TypeScript 3.0, which supports the TypeScript of the structure of the 06125c04e0fdd5 program into smaller components.

This is the typescript official website of 06125c04e0fe04, so how do you understand this sentence? We recognize the new reference feature through a scene.

Suppose we want to develop a lodash , and use it in the project, and it is likely to be promoted in the industry later. In order to ensure the smooth development and promotion of this tool, we must do corresponding unit tests. Then this tool library can be regarded as a project, and the test of each function in it can also be regarded as an independent project. But in the whole process, the development and testing of the tool library should belong to "sub-projects" under the same project. In this case, reference is great. First, we build a catalog:

|---- src/
    |---- index.ts    // 整个工具库的入口
    |---- copyDeep.ts // 其中定义了copyDeep方法
|---- test/
    |---- copyDeep.test.ts // copyDeep的单元测试
|---- package.json
|---- tsconfig.json

copyDeep.test.ts must be referenced in src/copyDeep , which means that the test project is dependent on src . If src changes, the entire tool library project should be recompiled, and the test project should not be compiled again, which is reasonable. If test project code has changed, that test project should be recompiled, and src project should no longer be compiled. How to configure in a project and compile the corresponding sub-projects separately? The first thing that comes to mind should be to introduce the include tsconfig.json file. Let’s try the following configuration first:

{
    "files": [
        "./src/index.ts"
    ],
    "include": [
        "./test/**/*.test.ts"
    ],
    "compilerOptions": {
        "outDir": "./dist/"
    }
}

Let's analyze what are the problems with this configuration:

1. First of all, from the entire project level, the function of modifying any file and recompiling is indeed achieved. But note that what is compiled is the full ts file.
2. As the project increases in the *.test.ts , the introduction in the 06125c04e0ff8e file will gradually become larger.
3. Modify the src//**/*.ts content, test/**/*.ts will also serve as an output, which we do not want to see.

At this time, reference will solve each of the above problems. We modify the project structure as follows:

|---- src/
    |---- index.ts        // 整个工具库的入口
    |---- copyDeep.ts     // 其中定义了copyDeep方法
    |---- tsconfig.json // 工具库的编译配置文件
|---- test/
    |---- copyDeep.test.ts     // copyDeep的单元测试
    |---- tsconfig.json     // 测试的编译配置文件
|---- package.json
|---- tsconfig.json

And modified to the following configuration:

// 根目录下的 /tsconfig.json
{
      "compilerOptions": {
        "declaration": true, // 为子项目生成.d.ts声明文件
        "outDir": "./dist",
      }
}

// src目录下的 /src/tsconfig.json
{
    "extends": "../tsconfig",
    "compilerOptions": {
        "composite": true // 必须设置为true，表明该文件夹为一个子项目
    }
}

// test目录下的 /src/tsconfig.json
{
    "extends": "../tsconfig",
    "references": [
        { "path": "../src" } // 表示引用了工具库项目
    ]
}

After this configuration, if src project has been compiled and output file compiled, that in test project, the actual load is src project declared .d.ts files, and files this statement is test project visible. In addition, if the watch mode is turned on, the modified content will only compile the corresponding project instead of the full compilation. This will significantly speed up type checking and compilation and reduce the memory footprint of the editor. And there is a very clear plan at the code structure level.

In summary, refrence is to associate two projects as one project. When a certain project code is modified, the corresponding project can be compiled separately instead of the entire project. The simple point is to realize lazy compilation between related projects.

Summarize

tsconfig.json here to summarize: 06125c04e10155 This file is used to define ts project, and is also used to configure some options tsc when compiling the ts files、exclude、include to configure which files need to be compiled; compilerOnSave is designated IDE whether to save re-compilation; extends used to expand the current configuration; Extended profile fields cover the same field in the current file; typeAcquisition to specify certain libraries Type declaration files, such as:

"typeAcquisition": {
  "jquery": "@/types/jquery"
}

watchOptions to configure tsc monitor policies; reference associated with the specified project to improve the compilation speed.

in addition:

If there is something wrong with the expression or the knowledge points in the article, please leave a message, criticize and correct, and make progress together!