ionic/angular-如何正确使用接口？

Question

我对角度/离子应用程序开发很新.我在某处读了以下内容

接口仅在编译时.这样只允许您检查收到的预期数据是否遵循特定结构.

我正在创建一个离子应用程序,API服务会将一些数据返回给用户.假设它是一个登录函数,API服务返回该数据.

我在Ionic中创建了一个提供程序,使用HTTPClient从API调用API.

//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);
  }
}

如您所见,我创建了一个名为LoginResponse的接口

Login组件的代码如下:

//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: 'afakeemail@id.com',
    password: 'password',
    };

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

对于此示例,我只是将消息打印到控制台.

现在是我的问题

1)如前面的声明中提到的,我的LoginResponse接口是否检查收到的数据？如果没有,我应该如何/在哪里实施该签到提供商或组件？

2)如果我在一个提供商中有多个接口,比如说,一个用于登录数据,另一个用于用户个人资料数据,我应该在哪里放置它？我可以将它保存在单独的文件中并导出吗？我没有看到任何离子命令来创建接口

谢谢!我不想从错误开始我的职业生涯.这就是为什么我想发布这个.

Answer 1

Typescript中的接口仅提供对象形状的描述.如果在TypeScript中创建对象,则编译器可以判断该对象是否与接口兼容.在运行时,接口被擦除,因此不会检查对象是否与接口兼容.当您使用post<T>您发出请求时,基本上是告诉编译器您希望作为响应的对象的形状,T但是不会执行检查以确保这一点.

您可以在文件中拥有任意数量的接口,并且可以从该文件中导出它们,将它们导入到另一个文件中,就像您在类或函数中一样.您如何组织代码取决于您自己.

如果要确保在运行时正确实现对象,请参见此处

Answer 2

正如您提到的，打字稿中的接口只是用于定义契约。因此，在您的示例中，您只是期望服务器发出具有您在界面中提到的属性的登录响应。没有像接口中那样的约束，我们应该提及 JSON 响应中返回的所有属性。如果需要，您甚至可以在界面中添加 JSON 响应中不存在的更多属性。所以在你的具体例子中，通过使用接口，你以后检查代码时可以了解API的规范是什么。所以下面是我的实现

我将创建一个名为 ILoginRequest.ts 的新文件并声明名为 ILoginRequest 的接口

export interface ILoginRequest {
 email:string;
 password:string;
}

并使用该接口作为提供程序类中 requestData 输入参数的类型

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

}

因此，如果我们在项目中其他任何地方的提供程序类中使用登录函数，我们就知道需要提供给登录方法的输入是什么以及该函数的预期结果是什么。

并且在调用页面中会将 api 的输出分配给 LoginResponse 变量，该变量是接口 LoginResponse 类型。因此，无论我们在类中何处使用此变量，我们都知道可以使用哪些属性，并且我们在 IDE 中获得了 IntelliSense 支持

export class LoginPage {
 private loginResponse : LoginResponse;
 constructor(private loginService: LoginServicesProvider) {
 }

onSubmit() {
let reqParams = {
email: 'afakeemail@id.com',
password: 'password',
};

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

} }

有关 typescript 中接口使用的更多详细信息，您可以查看此链接。

关于在哪里保存界面，根据我的说法，这只是开发人员的偏好，您可以在“app”目录中创建名为“interfaces”的单独文件夹，并为每个界面创建新文件。