Crafting Perfect Interface For A CRUD In Angular With Utility Types

Most of the applications needs CRUD operations to manage various activities and operations inside a application. In Angular we create interfaces/classes for giving types to our requests and response for sending, receiving and managing data for such data on client side.

Let’s take a very basic scenario of User Management. Where we want to perform following activities.

1. Add a User
2. Get a User
3. Modify a User
4. Delete a User

Let’s create a User Interface for having information about a user and then discuss how each operation can be handled by using this single interface. So here is our basic User Interface.

Now, let’s discuss our operations mentioned above.

1. Add a User

While adding a user, we will not have access to any Id. Because id will be created by back-end. User will only enter his/her username, city name, name and password. For sending our user data to back-end we generally will now go for two options i.e.

a. Give null value to id.

b. Make Id as optional parameter in User Interface.

c. Create a new Interface for User Add without Id.

All will do the job, but what if there are more such fields. Our add functionality might incorporate more fields which we might want to omit or include while adding data. And for our update and delete operations we still want id to be a mandatory field.

We can Utilize same User Interface with Utility Types. Lets say we had a property name user, for add operation we can initialize it like :-

Omit is one of the Utility Types that helps us to omit some properties for such cases. Now our code will no more complain for not giving the id.

2. Get A User

While getting a User, in normal cases we will never receive the password. We can use Omit for this case as well and exclude password field for user object when we get the data.

3. Modifying a User

This is a case in which amount of modifications depends on data changed in user object. So let’s say User only changed the cityName. In a standard API for PUT requests User Id will be sent in URL and URL will look like below.

http://localhost:8080/api/users/1

Where 1 is the user id. So in request body we only need to send cityName in the object. In case of update all properties become optional because we only need to send the data which is modified.

Think of a bigger object, if you send the whole object again and again you are consuming more network bandwidth as JSON will be more heavy in terms of memory size. The optimal way is to only send the data that is updated. But our user interface is having all field as mandatory. We need all of them to be optional for this case.

Let’s have a look at another Utility Type for achieving that.

Partial is Utility Type that will make all field in User Interface Optional.

4. Deleting a User

For deleting a User generally, only Id of that user is sent in URL without any need of a request body.

This is a very basic example where we utilized Typescript’s utility types for re-utilizing our one interface for complete CRUD. If typescript’s Utility types are properly used, we don’t need to re-create same interface for different set of properties of same object.

There are more such utility types provided by typescript which can be used depending on case to case. Which can be found at Utility Types.

Utility Types not only allows us to decide properties while sending data. Think of a case where you are using this object in your code or in your template. If you give it a proper type using Utility Types. You will no longer try to access properties which are not part of your data and will receive proper intellisense in IDE around which properties can be used for that object.

Typescript’s Utility Types are Not Specific to Angular. They can be Used with any framework where you are using Typescript.