削角严格的模板检查应显示错误

Question

最近，我们迁移到了一个新项目，其中包含了许多11+应用程序和库。我们为所有的应用程序设置了angularCompilerOptions.strictTemplates: true。

问题是我们有一个CI管道来检查格式并运行eslint，但是严格的模板检查错误在我们完成生产构建之前不会被标记。因此，我们必须在CI中构建所有受影响的应用程序，如果我们更改一个库组件，所有的应用程序都需要检查和构建。这可能需要几个小时。

是否有一种方法可以使eslint/tslint无需每次构建应用程序就可以检查任何严格的模板错误？

以下是我们的eslint.json：

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
      "parserOptions": { "project": ["apps/to-home/tsconfig.*?.json"] },
      "rules": {
        "@angular-eslint/directive-selector": ["error", { "type": "attribute", "prefix": "toh", "style": "camelCase" }],
        "@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "toh", "style": "kebab-case" }]
      }
    },
    { "files": ["*.html"], "extends": ["plugin:@nrwl/nx/angular-template"], "rules": {} }
  ]
}

而根json：

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@typescript-eslint/no-unused-vars": [
          "error",
          {
            "argsIgnorePattern": "^_"
          }
        ],
        "@typescript-eslint/no-empty-function": [
          "error",
          {
            "allow": ["constructors"]
          }
        ],
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [
              "@models/*",
              "@apc-common/**",
              "@apc-directives/**",
              "@apc-helpers/**",
              "@apc-modals/**",
              "@apc-models/**",
              "@apc-pipes/**",
              "@apc-services/**",
              "@apc-store/**",
              "@apc-admin/**",
              "@apc-help/**",
              "@apc-home/**",
              "@apc-materials/**",
              "@apc-materials-deferral-review/**",
              "@apc-parking/**",
              "@apc-report/**",
              "@apc-turnover/**",
              "@apc-wall-display/**",
              "@apc-workload/**"
            ],
            "depConstraints": [
              {
                "sourceTag": "scope:server",
                "onlyDependOnLibsWithTags": ["scope:server", "scope:models"]
              },
              {
                "sourceTag": "scope:ui",
                "onlyDependOnLibsWithTags": ["scope:ui", "scope:shared", "scope:models"]
              },
              {
                "sourceTag": "scope:shared",
                "onlyDependOnLibsWithTags": ["scope:shared", "scope:models"]
              },
              {
                "sourceTag": "scope:models",
                "onlyDependOnLibsWithTags": ["scope:models"]
              }
            ]
          }
        ],
        "@typescript-eslint/no-this-alias": [
          "error",
          {
            "allowDestructuring": true,
            "allowedNames": ["self"]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

Answer 1

TypeScript严格类型:严格模式是不够的，打字稿-严格打字支持strictly类型的TypeScript、ESLint或TSLint的配置，并且可以选择角。但让我们先解释一下。

官方推荐的使用TypeScript的方法是在严格模式中。

在创建以下内容时启用严格模式：

1. TypeScript项目(tsc --init)
2. 严格模式下的角应用程序(ng new --strict)

​

严格模式激活两个主要编译器选项：

noImplicitAny

strictNullChecks

现在，TypeScript将要求知道值何时可以为null (strictNullChecks)，当不可能进行推断时，它将询问类型(noImplicitAny)。

下面的代码即使在严格模式下也会编译: TypeScript仍然接受显式anys。

function test(hello: any, world = '') {
  hello; // any
  world; // string
}

TSLint有不-任何规则。使用ESLint和@typescript-eslint 没有明确的-任何规则：

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

角严格：

Angular有自己的附加严格编译器选项：

tsconfig.json

{
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictTemplates": true,
    "strictInputAccessModifiers": true
  }
}

我们只需运行ng build就可以看到这个角度9和更高的错误。在角8中，我们在运行ng build时没有看到这个错误消息。

自动化配置：为严格类型的TypeScript、ESLint或TSLint启用配置，并可选择角。只需在项目中运行npx typescript-strictly-typed即可。

Answer 2

可能您还没有在开发环境中启用aot。您可能只在aot=true的生产部分拥有angular.json。若要将其设置为所有配置，请执行以下操作：

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "aot": true,
...