Question

您好，我正在尝试在我的 Angular 代码库中启用 strictTemplate，但在创建类型时遇到了一些问题。

我有以下型号：

export class User {
   public 'name'!: Filter<string>;
   public 'email'!: Filter<string>;
   public 'age':!: Filter<number>
}

export class Engine {
   public 'weight'!: Filter<number>;
   public 'isRunning'!: Filter<boolean>;
}

export class Filter<T> {
  public 'value'!: T;
  public 'isSortedAscending'?: boolean;
}

这是具有引擎或用户最终将被传递的输入的类：

@Component(
   selector: 'app-table',
   templateUrl: './table.component.html',
)
export class TableComponent 
{
   @Input()
   public sort: TableSortModel

   ....Omitted details for simplicity
}

export class  TableSortModel {
  [key: string]: Filter<unknown>;
}

请注意，Engine 或 User 不是我在应用程序中传递的唯一模型，还有其他模型，但它们都具有定义为过滤器类型的属性。

我收到以下错误：

<块引用>

类型“Engine”不可分配给类型“TableSortModel”。 “引擎”类型中缺少索引签名。

<块引用>

类型“用户”不可分配给类型“TableSortModel”。 “用户”类型中缺少索引签名。

现在我假设索引签名是指 [key: string]: Filter。

我的问题是我的 TableSortModel 应该是什么样子的，这样我才能通过上面提到的两个类？

Answer 1

使用接口行得通。

export class Filter<T> {
  public "value"!: T;
  public "isSortedAscending"?: boolean;
}

export interface User extends TableSortModel {
  name: Filter<string>;
  email: Filter<string>;
  age: Filter<number>;
}

export interface Engine extends TableSortModel {
  weight: Filter<number>;
  isRunning: Filter<boolean>;
}

export interface TableSortModel {
  [index: string]: Filter<unknown>;
}

演示

https://stackblitz.com/edit/angular-ivy-tnrss5?file=src/app/index.ts

export class AppComponent implements OnInit {
  item: TableSortModel;

  ngOnInit() {
    this.item = {
      age: new Filter<number>()
    } as User;
  }
}

export class SortDemoComponent implements OnInit {
  @Input()
  public sort: TableSortModel;

  constructor() {}

  ngOnInit() {}
}

类型“<T>”不可分配给类型“<V>”。类型 '<T>'

1 个答案: