angular - ngOnChanges 挂钩中 SimpleChanges 接口的类型检查

Question

如果我们在当前组件的 ngOnChanges 钩子的 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() 属性），但我还没有找到比这更好的方法。

Answer 2

我使用继承解决了这个问题。首先，我创建了扩展 SimpleChange 类的类型化接口。您只需执行一次并将其导入需要它的组件中。

interface TypedChange<T> extends SimpleChange
{
    previousValue: T;
    currentValue: T;
}

其次，我们将 SimpleChanges 接口扩展为预期会在我们的组件中更改的接口。例如

interface MyComponentChanges extends SimpleChanges
{
    RefreshQueue: TypedChange<number>
}

最后的实现是

public ngOnChanges(changes: MyComponentChanges): void
{
    if (changes.RefreshQueue)
    {
        if (!changes.RefreshQueue.isFirstChange())
        {
            if (changes.RefreshQueue.currentValue == 1)
            {
                DoSomething();
            }
        }
    }
}

下面的智能感知屏幕截图

Answer 3

我建议以下解决方案，改编自https://github.com/angular/angular/issues/17560#issuecomment-624161007

export type SimpleChangeTyped<T> = Omit<SimpleChange, SimpleChange['previousValue'] | SimpleChange['currentValue']>
  & {
    previousValue: T;
    currentValue: T;
  };

export type SimpleChangesTyped<T> = {
  [K in keyof T]: SimpleChangeTyped<T[K]>;
};

该解决方案具有以下优点：

• 全类型化/与智能感知一起使用
• 不会覆盖 SimpleChange 上固有的/联合属性
• 适用于this
• 防止不良属性
• 如果角度开发人员决定更改SimpleChange 上的previousValueor属性，将引发错误currentValue

使用示例：

ngOnChanges(changes: SimpleChangesTyped<YourComponent>): void { // Or use SimpleChangesTyped<this>
    changes.someComponentProperty; // GOOD: Will identify the changes object with correct types
    changes.someOtherProperty; // BAD: Property 'someOtherProperty' does not exist on type 'SimpleChangesTyped<YourComponent>'.ts(2339)
    changes.someComponentProperty.currentValue; // GOOD: Will identify the type of the someComponentProperty property
    changes.someComponentProperty.firstChange; // GOOD: Will identify the type of the SimpleChange firstChange property (boolean)
    changes.someComponentProperty.someOtherProperty; // BAD: Property 'someOtherProperty' does not exist on type 'SimpleChangeTyped<SomeComponentPropertyType>'.ts(2339)
  }

此方法的唯一缺点是它不继承/合并 SimpleChanges，因此如果将来将任何属性添加到此接口，它们对 SimpleChangesTyped 无效。我尝试使用以下变体：

export type SimpleChangesTyped<T> =
  Omit<SimpleChanges, keyof T> &
  {
    [K in keyof T]: SimpleChangeTyped<T[K]>;
  };

然而遗憾的是，这不起作用，因为您最终再次允许所有密钥。

Answer 4

Netanel Basal有一个解决方案

type MarkFunctionPropertyNames<T> = {
  [Key in keyof T]: T[Key] extends Function | Subject<any> ? never : Key;
}
type ExcludeFunctionPropertyNames<T extends object> = MarkFunctionPropertyNames<T>[keyof T];
type ExcludeFunctions<T extends object> = Pick<T, ExcludeFunctionPropertyNames<T>>;
export type NgChanges<TComponent extends object, TProps = ExcludeFunctions<TComponent>> = {
  [Key in keyof TProps]: {
    previousValue: TProps[Key];
    currentValue: TProps[Key];
    firstChange: boolean;
    isFirstChange(): boolean;
  }
}
// ...
@Component({...})
export class MyComponent {
  ngOnChanges(changes: NgChanges<MyComponent>) { }
}