使用 appTsConfig.compilerOptions 进行 TypeScript 编译器选项配置

在 Angular 应用程序开发过程中，TypeScript 是一个常用的语言选择。TypeScript 是 JavaScript 的超集，可以让开发人员编写类型安全的代码，并且拥有更好的工具支持。当我们使用 Angular CLI 构建新应用程序时，我们通常会得到一个名为 tsconfig.json 的文件，该文件包含了 TypeScript 编译时所需的所有配置选项。然而，在某些情况下，我们可能需要更改某些选项，以满足我们应用程序的需求。在这种情况下，我们可以使用 appTsConfig.compilerOptions 对象来覆盖 tsconfig.json 文件中的选项。

使用 appTsConfig.compilerOptions 配置

我们可以在 angular.json 文件中找到 appTsConfig 对象，该对象是我们为当前应用程序指定的 TypeScript 组态，以及覆盖 tsconfig.json 文件中的选项。以下是通过添加 "paths" 选项以配置项目中的自定义别名的示例：

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "appTsConfig": "./tsconfig.app.json"
          },
          "configurations": {
            "production": {
              "appTsConfig": "./tsconfig.app.prod.json"
            }
          }
        }
      }
    }
  },
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "my-app",
  "cli": {
    "analytics": false,
    "packageManager": "npm"
  },
  "appTsConfig": "./tsconfig.app.json",
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "./tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/my-app",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "./tsconfig.app.json",
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
          "styles": [
            "src/styles.scss"
          ],
          "scripts": []
        }
      },
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "my-app:build"
        },
        "configurations": {
          "production": {
            "browserTarget": "my-app:build:production"
          }
        }
      },
      "extract-i18n": {
        "builder": "@angular-devkit/build-angular:extract-i18n",
        "options": {
          "browserTarget": "my-app:build"
        }
      },
      "test": {
        "builder": "@angular-devkit/build-angular:karma",
        "options": {
          "main": "src/test.ts",
          "tsConfig": "./tsconfig.spec.json",
          "karmaConfig": "./karma.conf.js",
          "scripts": [],
          "styles": [
            "src/styles.scss"
          ],
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ]
        }
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
          "tsConfig": [
            "tsconfig.app.json",
            "tsconfig.spec.json",
            "e2e/tsconfig.json"
          ],
          "exclude": [
            "**/node_modules/**"
          ]
        }
      },
      "e2e": {
        "builder": "@angular-devkit/build-angular:protractor",
        "options": {
          "protractorConfig": "./protractor.conf.js",
          "devServerTarget": "my-app:serve"
        },
        "configurations": {
          "production": {
            "devServerTarget": "my-app:serve:production"
          }
        }
      }
    },
    "tslint": [],
    "esLint": {
      "builder": "@angular-devkit/build-angular:eslint",
      "options": {
        "lintFilePatterns": [
          "src/**/*.ts"
        ]
      }
    },
    "sourceRoot": "src",
    "projectType": "application"
  },
  "test": {
    "root": "",
    "sourceRoot": "",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
          "tsConfig": [
            "src/tsconfig.spec.json"
          ],
          "exclude": [
            "**/node_modules/**"
          ]
        }
      },
      "test": {
        "builder": "@angular-builders/jest:run",
        "options": {
          "configPath": "./jest.config.js",
          "coverage": true,
          "passWithNoTests": true
        }
      }
    },
    "sourceRoot": "src",
    "projectType": "application"
  },
  "lint": [
    {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    },
    {
      "builder": "@angular-devkit/build-angular:eslint",
      "options": {
        "lintFilePatterns": [
          "src/**/*.ts"
        ]
      }
    }
  ],
  "e2e": {
    "root": "",
    "sourceRoot": "",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
      "e2e": {
        "builder": "@angular-devkit/build-angular:protractor",
        "options": {
          "protractorConfig": "./protractor.conf.js",
          "devServerTarget": "my-app:serve"
        },
        "configurations": {
          "production": {
            "devServerTarget": "my-app:serve:production"
          }
        }
      }
    },
    "sourceRoot": "e2e",
    "projectType": "application"
  }
}

在这个示例中，我们通过将 "baseUrl": "./src/" 和 "paths": 选项添加到 "appTsConfig": "./tsconfig.app.json" 对象中，指定了自定义别名：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": [],
     "baseUrl": "./src/",
     "paths": {
       "@component/*": ["app/component/*"]
     }
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

这样，在程序中，我们可以使用 @component 别名来引用我们定义的组件，如下所示：

import { Component } from '@angular/core';
import { HeaderComponent } from '@component/header/header.component';
import { FooterComponent } from '@component/footer/footer.component';
 
@Component ({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular8';
}

结论

使用 appTsConfig.compilerOptions，我们可以轻松地覆盖默认的 TypeScript 编译器选项。这使得我们可以定制应用程序的编译器选项来满足我们的需求，同时保持代码的类型安全性。在不影响应用程序正常运行的情况下，可以根据需要进行更改。