Typescript interface and creating an object of that interface

Question

I am create a small application in typescript, where I am using interfaces to create objects of specific types like the following UserProfile interface.

both the interface and the fulfill function are defined in user-profile.ts file.

export interface UserProfile  {

    readonly titel_id: number;
    readonly user_name: string;
    readonly email: string;
    readonly first_name: string;
    readonly last_name: string;
    readonly phone: string;
    readonly fax: string;

}

export function fulfill({  titel_id, user_name, email, first_name, last_name,  phone, fax }: any): UserProfile {
    return {

        titel_id,
        user_name,
        email,
        first_name,
        last_name,
        phone,
        fax
    }
}

I am calling this function from my UserMdoel's find function which contains all the fields of user table and fulfill function gives only those fields which are speficied in interface. But as you can see that I have to write the fields 3 times

once in interface, then in object destructring and then in return statement. It means if I later have to change the fields I have to change this on 3 places.

Is there a better way to solve this issue?

Casting your object to a specific type should suffice let profile: UserProfile = <UserProfile> object; — Alexis Facques
– Alexis Facques, Commented Apr 26, 2018 at 8:37

tom van green · Accepted Answer · 2018-04-26 09:01:39Z

1

I updated my answer.

Interfaces do not survive the transpile to javascript. One thing you could do is to create an array with all the names and use this array to automatically copy over all fields.

You still have to maintain the fields in two places though.

export const USER_PROFILE_FIELDS: string[] = [
    'titel_id',
    'user_name',
    'email',
    'first_name',
    'last_name',
    'phone',
    'fax',
];
export interface UserProfile  {

    readonly titel_id: number;
    readonly user_name: string;
    readonly email: string;
    readonly first_name: string;
    readonly last_name: string;
    readonly phone: string;
    readonly fax: string;

}

export function fulfill(template: any): UserProfile {
    return <UserProfile>USER_PROFILE_FIELDS.reduce(
        (object, key) => object[key] = template[key],
        {}
    );
}

If you need this for multiple interfaces, you could create a higher order function which creates the fulfill function for you. Like that you don't need to manually create a fulfill function for each case. Here is an example:

// This function accepts the fields you want to use and returns your fulfill function
export function createFullfill<ResultingType>(fields: string[]) {
    return function(template: any) {
        return <ResultingType>fields.reduce(
            (object, key) => object[key] = template[key],
            {}    
        );
    } 
} 

// Fulfill function for UserProfile
export const fulfillUserProfile = createFullfill<UserProfile>(USER_PROFILE_FIELDS);
// Fulfill function for Project
export const fulfillProject = createFullfill<Project>(PROJECT_FIELDS);

edited Apr 26, 2018 at 9:01

answered Apr 26, 2018 at 8:45

tom van green

1,73410 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1592129 Over a year ago

As I wrote that the Object I am providing all all the fields of a table. Which are much more than what I want to return.

tom van green Over a year ago

Ah sorry, my bad, I missed that part.

tom van green Over a year ago

I updated my answer, please have a look if this better serves your needs.

Collectives™ on Stack Overflow

Typescript interface and creating an object of that interface

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related