TypeScript Config Manager#

The tsConfigManager module is responsible for updating the project's TypeScript configuration file, adding declaration files for auto-imported components and APIs to the include configuration, ensuring that TypeScript correctly recognizes these types.

API Reference#

updateTsConfig#

1async function updateTsConfig(projectPath: string): Promise<void>;

Parameters#

• projectPath: string - Path to the project root directory

Return Value#

• Promise<void> - Asynchronous operation, no return value on success

Exceptions#

• Throws an error when updating TypeScript configuration fails

Usage Example#

1import { updateTsConfig } from "ew-auto-import-tool";
2
3// Update TypeScript configuration, adding declaration file references
4await updateTsConfig("/path/to/your/project");

Implementation Details#

The updateTsConfig function performs the following steps:

1. Check Configuration File Existence: Verify if the tsconfig.json file exists in the project, skip configuration if it doesn't exist

2. Read Existing Configuration: Read the contents of the tsconfig.json file

3. Check Include Configuration: If the include field doesn't exist in the configuration, create an empty array

4. Add Declaration File References: Add components.d.ts and auto-imports.d.ts to the include array (if not already included)

5. Write Updated Configuration: If there are changes, write the updated configuration back to the tsconfig.json file

Declaration Files Description#

The two declaration files added by the module serve the following purposes:

• components.d.ts - Contains type declarations for all components in the component library, allowing TypeScript to recognize components used in templates
• auto-imports.d.ts - Contains type declarations for all auto-imported APIs from the component library, allowing TypeScript to recognize globally available APIs

These files are typically automatically generated and updated by the unplugin-auto-import and unplugin-vue-components plugins when the project is first started.

Configuration Example#

tsconfig.json before update:

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "useDefineForClassFields": true,
5    "module": "ESNext",
6    "lib": ["ES2020", "DOM", "DOM.Iterable"],
7    "skipLibCheck": true,
8    "types": ["vite/client"]
9  },
10  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
11}

tsconfig.json after update:

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "useDefineForClassFields": true,
5    "module": "ESNext",
6    "lib": ["ES2020", "DOM", "DOM.Iterable"],
7    "skipLibCheck": true,
8    "types": ["vite/client"]
9  },
10  "include": [
11    "src/**/*.ts",
12    "src/**/*.d.ts",
13    "src/**/*.tsx",
14    "src/**/*.vue",
15    "components.d.ts",
16    "auto-imports.d.ts"
17  ]
18}

Source Code Analysis#

The tsConfigManager module uses the fs-extra library to read and write JSON files, which simplifies the process of handling configuration files:

1// Read tsconfig.json
2const tsConfig = await fs.readJSON(tsConfigPath);
3
4// Check if include configuration exists
5if (!tsConfig.include) {
6  tsConfig.include = [];
7}
8
9// Add declaration files to include configuration
10const declarationFiles = ["components.d.ts", "auto-imports.d.ts"];
11let updated = false;
12
13for (const file of declarationFiles) {
14  if (!tsConfig.include.includes(file)) {
15    tsConfig.include.push(file);
16    updated = true;
17  }
18}
19
20// If there are updates, write to file
21if (updated) {
22  await fs.writeJSON(tsConfigPath, tsConfig, { spaces: 2 });
23  console.log(`TypeScript configuration file updated: ${tsConfigPath}`);
24}

Notes#

• The function automatically detects and skips configurations that already include the required declaration files
• If the tsconfig.json file doesn't exist in the project, the function will skip configuration without reporting an error
• The function only modifies the include field and doesn't change other TypeScript configurations