Interface In TypeScript / Complex Types In TypeScript

In the Typescript, when we are not aware of the type of an object(let's say user object which contains user info) we usually write it as var or let in JavaScript ( even in Typescript too). We will miss or feel uncomfortable in this way. Because we don’t know what the object exactly contains while writing the code. We may get some run time issues if the written property is not presented in the object.

Typescript provides a nice feature called an interface to handle this situation. So to write any complex type in typescript, we can use the help of the interface and achieve it.

Let’s check how we handle this situation in server-side coding. ( I have used the c# example to demonstrate this.)

Server-side programmers are always using complex types to represent an object. So it is very easy to identify what are the properties/fields in the object even when we write the code. It is not a matter of how easily we are identifying, it is how we are following the coding standards.

For instance, we are getting User data from Database and we will fill the data in the form of the user object.

Below is the user entity class.

public class User {  
    public int UserID {  
        get;  
        set;  
    }  
    public string UserName {  
        get;  
        set;  
    }  
    public int Age {  
        get;  
        set;  
    }  
    public string Address {  
        get;  
        set;  
    }  
    public int Phone {  
        get;  
        set;  
    }  
}

Now I am using this model to fill the user data. So we can find the required properties from it.

That is it. Now let's see the same kind of implementation in typescript.

I am creating an interface called User in Typescript.

interface User {  
    UserID: number;  
    UserName: string;  
    Age: number;  
    Address: string;  
    Phone: number;  
}  

This will be used as an entity class for the User.

I will fill data with User type & Any type. Let’s see what we can get with it.

export class dbCalls {
    constructor() {}
    public getUserInfoUser(): User {
        // below data coming from the service
        let userInfo: User = {
            UserID: 1,
            UserName: 'Ravi',
            Age: 30,
            Address: 'Hyderabad',
            Phone: [phone]
        };
        return userInfo;
    }
    public getUserInfoAny(): any {
        // below data coming from the service
        let userInfo: {
            UserID: 1,
            UserName: 'Ravi',
            Age: 30,
            Address: 'Hyderabad',
            Phone: [phone]
        };
        return userInfo;
    }
}

Now I’m going to use these 2 methods in another class.

import {  
    dbCalls  
} from './databaseCalls';

class databaseuse {  
    getUserInfor() {  
        let dbCallsObj = new dbCalls();  
        let dataUserType = dbCallsObj.getUserInfoUser();  
        let dataAnyType = dbCallsObj.getUserInfoAny();  
    }  
}

Now we will check how the dataUserType and dataAnyType will behave while we trying to fetch the data from it.

First trying with dataAnyType.

Nothing relevant it is a popup because it is the type of ANY.

When we try to use dataUserType.

Clearly, it is providing the properties list.

This way of implementation is really helpful while writing code in typescript.

Note. I have provided the typescript files for your reference.