Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

models como interface e não com class

Bom dia professor, no curso de ionic 2 os models eram declarados como class e não com interface. A diferança que percebi e que na hora do cadastro, no component você declara atributos assim:

private precoTotal: number;

    public nome: string = '';
    public endereco: string = '';
    public email: string = '';
    public data: string = new Date().toISOString();

E só ao clicar no botão de cadastro monta o objeto para ser enviado para API. Desse jeito:

 let agendamento: Agendamento = {
            nomeCliente: this.nome,
            enderecoCliente: this.endereco,
            emailCliente: this.email,
            modeloCarro: this.carro.nome,
            precoTotal: this.precoTotal,
            confirmado: false,
            enviado: false,
            data: this.data
        };

Percebi que também no curso 2 de ionic o professor estanciava no construtor o agendamento e no template do ngModel acessava pelo objeto, desse jeito:

<ion-item>
            <ion-label stacked>Nome:</ion-label>
            <ion-input name="nome" [(ngModel)]="agendamento.nome"></ion-input>
        </ion-item>
......

Resumindo, eu achei que usando class nos models mais produtivo do que interface, pq da pra mandar do template o objeto já pronto. Teria algum jeito de fazer assim, usando interface nos models?

3 respostas
solução!

Boa noite, Erick! Como vai?

Sua pergunta foi mto boa! A utilização de uma interface se dá principalmente pq o que queremos é apenas definir um tipo de dado (nesse caso o agendamento), em casos assim o ideal é a criação de uma interface! Classes são criadas quando além de criar um tipo de dado, esse tipo novo também terá algum comportamento representado por métodos implementados dentro da classe.

Além disso, nada te impediria de fazer algo assim:

// agendamento.ts

export class AgendamentoPage {
     agendamento: Agendamento;

     constructor(...) {
          // obtenção do carro selecionado e do preço total
          this.agendamento = {
               nomeCliente: '',
               enderecoCliente: '',
               emailCliente: '',
               modeloCarro: this.carro.nome,
               precoTotal: this.precoTotal,
               confirmado: false,
               enviado: false,
               data: new Date().toISOString()
          };
     }
}

E no seu template ficaria:

<!-- agendamento.html -->

<ion-item>
     <ion-label stacked>Nome:</ion-label>
     <ion-input name="nome" [(ngModel)]="agendamento.nomeCliente"></ion-input>
</ion-item>
......

Extra: Ainda é possível melhorar ainda mais o código através de um recurso chamado casting do Typescript que eu mostrei em alguns momentos do curso! Repare que o nome, endereço e email são vazios, eu não precisaria ter que definir eles, mas a interface me obriga a fazer isso! Então eu poderia escrever:

let agendamento: Agendamento = <Agendamento>{
     modeloCarro: this.carro.nome,
     precoTotal: this.precoTotal,
     confirmado: false,
     enviado: false,
     data: new Date().toISOString()
};

OU para obter o mesmo resultado, também poderia fazer:

let agendamento: Agendamento = {
     modeloCarro: this.carro.nome,
     precoTotal: this.precoTotal,
     confirmado: false,
     enviado: false,
     data: new Date().toISOString()
} as Agendamento;

Dessas duas formas, eu apenas setaria os valores necessários e faria o Typescript aceitar o meu objeto como sendo um Agendamento, mesmo embora ele não tendo todos os atributos obrigatórios. A boa notícia é que mesmo fazendo o casting não há perda do autocomplete de propriedades. Tudo isso sem deixar de lado a boa prática de usar a interface nesse nosso caso! PERFEITO!

Grande abraço e bons estudos, meu aluno!

Perfeita explicação! Obrigado professor, até a proxima dúvida.

Muito bem, Erick!

Grande abraço e bons estudos, meu aluno!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software