主页 / coding / 问题 / 79530465
Accepted
user1169587
Asked: 2025-03-24 15:58:53 +0800 CST

Angular TypeScript 类错误地扩展了基类，属性类型不兼容

  • 772

angular 5，在“RecordManagerComponent”类中有一个公共对象属性“info”，定义如下：

      export class RecordManagerComponent {
          public info: { form_status: string, proj_title_cntr_no: string, block_t: 
               string, floor: string, contractor: string, test: string };
        .....
      }

然后我创建另一个从“RecordManagerComponent”扩展的类，名为“F48ItemSearchComponent”，并定义一个对象属性“info”，如下所示：

    export class F48ItemSearchComponent extends RecordManagerComponent {
        public info: { form_status: string, proj_title_cntr_no: string, block_t: 
             string, floor: string, contractor: string };
        .....
    }

但有以下错误：

src/app/structure/inspect/components/f48/f48-item-search/f48-item-search.component.ts(33,14) 中出现错误：错误 TS2415：类“F48ItemSearchComponent”错误地扩展了基类“RecordManagerComponent”。属性“info”的类型不兼容。类型“{form_status：string；proj_title_cntr_no：string；block_t：string；floor：string；contractor：st...'”无法分配给类型“{form_status：string；proj_title_cntr_no：string；block_t：string；floor：string；contractor：st...'”。存在两种具有相同名称的不同类型，但它们之间没有关联。类型“{form_status：string；proj_title_cntr_no：string；block_t：string；floor：string；contractor：st...'”中缺少属性“test”。

为什么？我必须重命名子类“F48ItemSearchComponent”中的“info”？

angular

2 个回答

  1. 当 Angular TypeScript 中的子类具有与基类不兼容的属性或方法时，就会发生此错误。请确保子类中的属性类型与基类中的属性类型匹配。此外，验证重写的方法是否返回正确的类型以及构造函数是否正确调用 super()。检查导入和类型定义可以帮助解决问题。

    • 1
  2. Best Answer

    首先定义一个通用接口，其中包含子级所需的所有属性。我们将所有派生属性定义为?:可选的，这样在继承时它们就不是必需的了。

    export interface Info {
  form_status: string;
  proj_title_cntr_no: string;
  block_t: string;
  floor: string;
  contractor: string;
  test?: string;
}

    如果您使用的是 typescript >= 3.5，请尝试以下附加步骤，否则上述解决方案就足够了：

    然后我们可以使用 typescript 实用程序Omit来排除test，这样 Intellisense 就不会建议该测试，并且由于它是可选的，因此不会出现错误。

    export type F48ItemSearchInfo = Omit<Info, 'test'>;

    这些定义来自同一个接口，但我们可以使用派生子类型Omit。您还可以使用反之亦然的方法Pick从接口中仅选择某些属性。

    完整代码：

    import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

export interface Info {
  form_status: string;
  proj_title_cntr_no: string;
  block_t: string;
  floor: string;
  contractor: string;
  test?: string;
}

export type F48ItemSearchInfo = Omit<Info, 'test'>;

@Component({
  selector: 'app-parent',
  template: '',
})
export class Parent {
  public info!: Info;
}

@Component({
  selector: 'app-root',
  template: `
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App extends Parent {
  public override info!: F48ItemSearchInfo;
}

bootstrapApplication(App);

    Stackblitz 演示

    • 0

相关问题