CODEWITHSUNDEEP
angular
Ben Clarke
Ben Clarke

Reputation: 17

How to implement one interface in an other

I am putting together my service structure for my Angular 4 application and have come across an issue.

I am wanting to call a GET request on my API which will return me a User, but inside that user it should also return a list of Applications

I have created an User.service.ts which looks like:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserService {

    constructor(private _http: HttpClient) { }

    getAllUsers(){
    }

    getUserById(){

    }

    createUser(){            
    }       
}

So when I call getUserById it will return me a User object for which I have created an interface:

interface User {
    id: string;
    FirstName: string;
    LastName: string;
    Email: string;
    Role: string;
    Applications: //LIST OF APPLICATIONS
}

How do I get the Applications property linked up to my Application.ts file?

Upvotes: 0

Views: 55

Answers (3)

Explosion Pills
Explosion Pills

Reputation: 191749

When you say "List," you probably mean Array (first class JavaScript construct), so you probably want to use an Array of Application types.

import { Application } from './application.interface';

export interface User {
  /* ...other properties... */
  Applications: Array<Application>;
}

Note that you could also write this as Application[] and it would mean the same thing. It's up to you. I prefer the former since there is no analogous shortcut for other generics. For instance, you must write Observable<Application>.

Now when assigning to or reading from userInstance.Applications, each property of the array is assumed to be an Application.

Assuming your Application interface is something very simple like { id: number, name: string }, keep in mind the following:

// not allowed
userInstance.Applications.push(notAnApplication);
userInstance.Applications[0].otherProperty;

// allowed
userInstance.Applications[1].id;
userInstance.Applications.push({ id, name } as Application);

Also note that [Application] as a type declaration is not the same. This would be an array that has a single property that is of type Application.

You can read more about generics in Typescript here: https://www.typescriptlang.org/docs/handbook/generics.html

Upvotes: 1

Igor
Igor

Reputation: 62228

At the top of your code file

import { Application } from './Application';

make sure Application is exported in Application.ts

And then your interface add

Applications: Application[];

Also

  • Do not forget to use export so that types can be accessed outside of the file they are declared in.
  • Mark the return types on your methods, I omitted CreateUser because it was not clear if it returned anything or took in a parameter.

Complete code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { Application } from './Application';

@Injectable()
export class UserService {

    constructor(private _http: HttpClient) { }

    getAllUsers() : Observable<User[]> {
    }
    getUserById() : Observable<User> {
    }
}


export interface User {
    id: string;
    FirstName: string;
    LastName: string;
    Email: string;
    Role: string;
    Applications: Application[];
}

Upvotes: 0

Derek Brown
Derek Brown

Reputation: 4419

Just make it an array of applications:

Applications: Application[]

Upvotes: 3

Related Questions