Create a Typed Version of SimpleChanges in Angular

Angular calls the ngOnChanges method of a component or directive whenever it detects changes to the input properties. The method receives a SimpleChanges object of current and previous property values.

Unfortunately, the SimpleChanges interface isn’t fully typed out of the box; but no worries — in this article, we’ll see how we can build a typed version of it.

First, let’s create a component so that we’ll have something to work with:

Our first goal is to create a utility type that receives an object type, and returns all its properties which have a value that isn’t a function. Let’s break the task into two steps:

First, we need to mark all the functions by setting their value to the never type:

We loop over the component type’s keys. If the type of the value extends the Function type, we change it to never. Otherwise, we set it to be the key name.

Using the code above will give us the following result:

Now we can move on to the next step, which is to extract the keys with value type that isn’t Function, using the resulting MarkFunctionProperties type:

We leverage the keyof operator to create a new type, which yields the type of permitted property names for T. The keyof operator will NOT return keys whose value type is never:

Now that we have all the non-function holding keys, we can use the Pick utility to extract these properties from our component, since these are the ones we need for our interface:

The last step is to create our desired interface, which will loop over the keys and return a typed version of SimpleChanges:

The only drawback is that we’ll also get autocompletion for other public properties in our component, but it’s better than nothing 😃

You can play with the code here.

🚀 In Case You Missed It

Here are a few of my open source projects:

• Akita: State Management Tailored-Made for JS Applications
• Spectator: A Powerful Tool to Simplify Your Angular Tests
• Transloco: The Internationalization library Angular
• error-tailer — Seamless form errors for Angular applications
• Forms Manager: The Foundation for Proper Form Management in Angular
• Cashew: A flexible and straightforward library that caches HTTP requests
• Error Tailor — Seamless form errors for Angular applications

And many more!

Follow me on Medium or Twitter to read more about Angular, Akita and JS!