angular - ngOnChanges Hook 中 SimpleChanges 接口(interface)的类型检查

Question

如果我们在当前组件的 ngOnChanges 钩子(Hook)的 SimpleChanges typescript 参数中进行类型检查，那就太好了。

这将防止我们检查的属性出现错误。

Answer 1

使用TypeScript 2.1和keyof功能，我已经弄清楚了以下类型声明(基于SimpleChanges)，这似乎为我们提供了对组件属性的必要类型访问:

export type ComponentChange<T, P extends keyof T> = {
    previousValue: T[P];
    currentValue: T[P];
    firstChange: boolean;
};

export type ComponentChanges<T> = {
    [P in keyof T]?: ComponentChange<T, P>;
};

使用这些声明，vscode 编辑器会自动获取类型信息并自动完成更改属性:

但有一个问题是 changes 参数现在将列出组件的每个属性(而不仅仅是 @Input() 属性)，但我还没有找到比这更好的方法这个。