在ngOnChanges钩子中对SimpleChanges接口进行类型检查

Question

如果我们在当前Component的ngOnChanges钩子的SimpleChanges typescript参数内进行类型检查，那将会很棒。

这样可以防止我们检查属性中的错误。

Answer 1

使用打字稿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编辑器自动获取类型信息并自动完成更改属性：

虽然一个问题是，更改参数现在将列出组件的每个属性（而不仅仅是@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(); 
      } 
     } 
    } 
} 

智能感知屏幕截图如下