如何在 Ionic 3 中的组件内声明接口

Question

我一直在试图弄清楚如何在 ionic 上创建一个接口，然后声明一个可观察对象，该可观察对象在我的变量中存储对象数组。我无法弄清楚如何在我的组件中传递接口并声明 2 个全局变量

我正在尝试将以下接口传递到我的 app.component.ts

    interface Usuario{
  nome: string,
  sexo: string,
  cpf: string,
  nascimento: string,
  email:string,
  telefone: string,
  endereço:string,
  login:string,
  senha:string

}

但是，一旦我这样做了，我在 @Component({}) 上收到一个错误，说装饰器在此处和导出类 MyApp{} 内无效，我正在尝试声明我的全局变量，该变量将返回我的 observable 存储一个 usuario 数组.

这是完整的代码

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFirestoreCollection } from 'angularfire2/firestore';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';

@Component({
  templateUrl: 'app.html'
})

interface Usuario{
  nome: string,
  sexo: string,
  cpf: string,
  nascimento: string,
  email:string,
  telefone: string,
  endereço:string,
  login:string,
  senha:string

}



export class MyApp {


  rootPage:any = HomePage;

  usuario: Observable<Usuario[]>;
  usuarioCollectionRef: AngularFirestoreCollection<Usuario>;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

}

Answer 1

我曾经遇到过这样的错误。 将接口放在@Component 之前。装饰器是用于类的，如果你放置接口它会出错，因为装饰器不能“装饰”?接口。

Answer 2

你不能这样声明，你需要使用导出然后接口定义。但是我建议您有一个单独的模型文件，如下所示，

export interface Usuario{
  nome: string,
  sexo: string,
  cpf: string,
  nascimento: string,
  email:string,
  telefone: string,
  endereço:string,
  login:string,
  senha:string

}

并在您的 component.ts 中导入为 ,

import { Usuario } from '../models/Usuario';