清理npm依赖后Angular库出现TS2344类型约束错误求助

问题 #

原本构建运行正常的Angular应用，添加@angular/material后出现npm依赖问题，删除package-lock.json和node_modules重新执行npm i安装无报错，但编译时出现大量TypeScript错误，涉及Angular Material日期选择器和NgRx Effects的TS2344类型约束问题。将TypeScript从4.7升级到4.8.2后问题未解决，添加"skipLibCheck": true到tsconfig.json可隐藏错误，但不确定是否为最优方案，想了解错误出现的原因。

项目依赖 #

"dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/material": "14.1.0",
    "@angular/material-moment-adapter": "14.1.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/router": "^14.1.0",
    "@ngrx/component-store": "^14.3.0",
    "@ngrx/effects": "^14.2.0",
    "@ngrx/entity": "^14.2.0",
    "@ngrx/store": "^14.2.0",
    "@ngrx/store-devtools": "^14.2.0",
    "@ngx-translate/core": "^14.0.0",
    "tslib": "^2.3.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
},
"devDependencies": {
    "@angular-devkit/build-angular": "^14.1.0",
    "@angular-eslint/builder": "14.0.2",
    "@angular-eslint/eslint-plugin": "14.0.2",
    "@angular-eslint/eslint-plugin-template": "14.0.2",
    "@angular-eslint/schematics": "14.0.2",
    "@angular-eslint/template-parser": "14.0.2",
    "@angular/cli": "~14.1.0",
    "@angular/compiler-cli": "^14.1.0",
    "@types/jasmine": "~4.0.0",
    "@types/lodash": "^4.14.184",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.29.0",
    "@typescript-eslint/parser": "5.29.0",
    "eslint": "^7.32.0",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "^4.8.2"
}

具体错误信息 #

Error: node_modules/@angular/material/datepicker/index.d.ts:602:48 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.
The types returned by 'getStartValue()' are incompatible between these types.
    Type 'unknown' is not assignable to type '{} | null'.

602     constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>, _viewContainerRef: ViewContainerRef);
                                                                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@angular/material/datepicker/index.d.ts:621:48 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.

621     constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>);
                                                                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@angular/material/datepicker/index.d.ts:777:36 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.

777     _datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>;
                                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@angular/material/datepicker/index.d.ts:778:48 - error TS2344: Type 'MatDatepickerControl<unknown>' does not satisfy the constraint 'MatDatepickerControl<{}>'.

778     constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>);
                                                                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ngrx/effects/src/effect_decorator.d.ts:7:84 - error TS2344: Type 'T' does not satisfy the constraint 'Object'.

7 export declare function getEffectDecoratorMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                                                                                         ~

    node_modules/@ngrx/effects/src/effect_decorator.d.ts:7:52
        7 export declare function getEffectDecoratorMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                         ~
        This type parameter might need an `extends Object` constraint.

Error: node_modules/@ngrx/effects/src/effects_metadata.d.ts:3:75 - error TS2344: Type 'T' does not satisfy the constraint 'Object'.

3 export declare function getSourceMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                                        ~

    node_modules/@ngrx/effects/src/effects_metadata.d.ts:3:43
        3 export declare function getSourceMetadata<T>(instance: T): EffectMetadata<T>[];
                                                                                                        ~
        This type parameter might need an `extends Object` constraint.


Error: node_modules/@ngrx/effects/src/models.d.ts:25:31 - error TS2344: Type 'T' does not satisfy the constraint 'Object'.

25     [key in EffectPropertyKey<T>]?: EffectConfig;
                                                                     ~

    node_modules/@ngrx/effects/src/models.d.ts:24:37
        24 export declare type EffectsMetadata<T> = {
                                                                                     ~
        This type parameter might need an `extends Object` constraint.

原因分析与解决方案 #

核心原因 #

• TypeScript版本不兼容：Angular 14官方推荐的TypeScript版本范围是4.6.x ~ 4.7.x，升级到4.8.2后，新版本TS对类型约束的检查更严格，而Angular Material 14和NgRx 14的类型定义未适配TS 4.8的规则，导致触发TS2344错误。
• NgRx版本不一致：@ngrx/component-store为14.3.0，其他NgRx包为14.2.0，版本差异加剧了类型冲突。

解决方案 #

方案1：回退TypeScript到兼容版本

将TypeScript降级到Angular 14推荐的4.7.x版本（比如4.7.4）：

1. 修改package.json中typescript版本为"typescript": "~4.7.4"
2. 删除package-lock.json和node_modules
3. 重新执行npm install

方案2：统一NgRx依赖版本

将所有NgRx包版本统一为14.2.0或14.3.0：

1. 修改package.json中@ngrx/component-store版本为"@ngrx/component-store": "^14.2.0"
2. 重新执行npm install

方案3：临时使用skipLibCheck

若暂时无法调整版本，可在tsconfig.json的compilerOptions中添加"skipLibCheck": true，跳过第三方库的类型检查快速恢复编译，但这只是隐藏问题而非彻底解决，长期建议优先调整版本匹配。

内容的提问来源于stack exchange，提问作者peterc