angular - 使用材料 12 的 Angular 12 上的打字稿错误

问题描述

我今天按照 Angular 在https://update.angular.io/上提供的指南更新到 Angular 12（和 Ang Material 12）。从那以后，我收到了许多与 Angular Material 相关的错误。Visual Studio 2019 错误窗口中出现了 71 个此类错误。以下是其中一个错误的示例：

“类‘MatButton’错误地实现了接口‘CanColor’。“MatButton”类型缺少“CanColor”类型的以下属性：颜色、默认颜色”</p>

这是一个类的例子

/**
 * Material design button.
 */
export declare class MatButton extends _MatButtonBase implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
    private _focusMonitor;
    _animationMode: string;
    /** Whether the button is round. */
    readonly isRoundButton: boolean;
    /** Whether the button is icon button. */
    readonly isIconButton: boolean;
    /** Reference to the MatRipple instance of the button. */
    ripple: MatRipple;
    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _animationMode: string);
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    /** Focuses the button. */
    focus(origin?: FocusOrigin, options?: FocusOptions): void;
    _getHostElement(): any;
    _isRippleDisabled(): boolean;
    /** Gets whether the button has one of the given attributes. */
    _hasHostAttributes(...attributes: string[]): boolean;
    static ngAcceptInputType_disabled: BooleanInput;
    static ngAcceptInputType_disableRipple: BooleanInput;
    static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<MatButton, [null, null, { optional: true; }]>;
    static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<MatButton, "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, ["*"]>;
}

所有错误都与上面的错误几乎相同，只是指向不同的类。我怀疑它与 tsconfig 设置有关，但似乎在互联网上的任何地方都没有提到这一点。

请注意 Angular 应用程序的构建和运行 100% 正常。这些是 IDE 上显示的错误。该应用程序似乎运行良好。这是我的 tsconfig 文件：

请注意，在版本 11.1 上运行时未显示这些错误

tsconfig.json

  {
      "extends": "./tsconfig.base.json"
      //"files": [],
      //"references": [
      //  {
      //    "path": "./src/tsconfig.app.json"
      //  },
      //  {
      //    "path": "./src/tsconfig.spec.json"
      //  }
      //]
    }

tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "module": "es2020",
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }

}

tsconfig.app.json

{
  "extends":  "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",  
    "types": [ "node" ]
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

这是我的 package.json 文件

{
  "name": "hizuko-web-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json",
    "build-prod": "ng build --configuration production --aot"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "12.1.1",
    "@angular/cdk": "12.1.1",
    "@angular/cli": "12.1.1",
    "@angular/common": "12.1.1",
    "@angular/compiler": "12.1.1",
    "@angular/core": "12.1.1",
    "@angular/forms": "12.1.1",
    "@angular/material": "12.1.1",
    "@angular/platform-browser": "12.1.1",
    "@angular/platform-browser-dynamic": "12.1.1",
    "@angular/platform-server": "12.1.1",
    "@angular/router": "12.1.1",
    "@ngx-translate/core": "^12.1.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "chart.js": "2.9.3",
    "core-js": "3.6.2",
    "rxjs": "6.6.2",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.4.1",
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular/compiler-cli": "12.1.1",
    "@angular/language-service": "12.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "bootstrap": "^4.4.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "source-map-explorer": "^2.3.1",
    "ts-node": "~8.5.4",
    "tslint": "~6.1.0",
    "typescript": "4.2",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

这是我的环境

有人可以帮忙吗？谢谢

标签： angulartypescriptangular-material

angular - 使用材料 12 的 Angular 12 上的打字稿错误

问题描述

解决方案

推荐阅读