ionic/angular- How to use interfaces correctly?

Question

I'm pretty new to angular/ionic app development. I read the following somewhere

Interfaces are only at compile time. This allows only you to check that the expected data received follows a particular structure.

I'm making an ionic app and the API services returns some data back to user. Let's say it's a login function and the API service returns data for that.

I made a provider in Ionic from where HTTP calls are made to API using HTTPClient.

//Provider

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

interface LoginResponse {
  success: boolean;
  message: string;
  token: string;
  userId: number;
}
@Injectable()
export class LoginServicesProvider {
  constructor(public http: HttpClient) {
  }

  login(reqData): Observable<LoginResponse[]> {
    return this.http.post<LoginResponse[]>('localhost:3000/api/login', reqData);
  }
}

As you can see, I created an interface called LoginResponse

And the code for the Login component is as follows:

//Component

import { LoginServicesProvider } from './../../providers/login-services/login-services';
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-login-page',
  templateUrl: 'login-page.html',
})
export class LoginPage {
  constructor(private loginService: LoginServicesProvider) {
  }

  onSubmit() {
    let reqParams = {
    email: '[email protected]',
    password: 'password',
    };

    this.loginService.login(reqParams).subscribe(res => {
        console.log('success');
    });
  }
}

For this example, I just print a message to console.

Now comes my questions

1) Like mentioned in the earlier statement, is my LoginResponse interface checking the data received? If not, how/where I should implement that check- in provider or component?

2) If I have multiple interfaces inside a single provider, let say, one for login data and other for user profile data or something, where should I place it? Can I keep it in a separate file and export it? I didn't see any ionic commands to create interfaces

Thanks! I don't wanna start my career from mistakes. That's why I thought of posting this.

Answer 1

Interfaces in Typescript only provide a description of the shape of an object. If an object is created in TypeScript, the compiler can reason about whether the object is compatible with the interface. At runtime interfaces are erased, so there will be no check as to whether an object is compatible with an interfaces. When you make a request using post<T> you are basically telling the compiler that the shape of the object you expect as a response if T but no checking will be performed to ensure this.

You can have as many interfaces as you like in a file, and you can export them from that file an import them in another file just like you would a class or function. How you organize your code is up to you.

If you want ensure an object is correctly implemented at runtime see here