Блог

Недавно мы перешли на новый проект со множеством приложений и библиотек angular 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": {}
    }
  ]
}

 

Строго типизированный текст: строгого режима недостаточно, типизированный текст-строго типизированный позволяет настраивать strictly типизированный текст, ESLint или TSLint и, возможно, угловой. Но давайте сначала объясним.

Официально рекомендуемый способ работы с машинописным текстом-в строгом режиме.
Строгий режим включен при создании:

1. проект машинописного текста ( tsc --init )
2. угловое приложение в строгом режиме ( ng new --strict )

Строгий режим активирует 2 основных параметра компилятора:

 noImplicitAny

strictNullChecks
 

Теперь, TypeScript попросит сообщить, когда значение может быть null ( strictNullChecks ), а когда вывод невозможен, он спросит тип ( noImplicitAny ).

Приведенный ниже код будет компилироваться, даже в строгом режиме: явные символы по-прежнему принимаются TypeScript

 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 и выше. в то время как в Angular 8 мы не видели этого сообщения об ошибке при запуске ng build .

Автоматизация настройки: Позволяет настраивать конфигурации для строго типизированных TypeScript ESLint или TSLint , при необходимости, угловых. Просто запустите npx typescript-strictly-typed свой проект.