typescript_e_suas_facilidades - VWJavascript/Alurapic GitHub Wiki
Typescript e suas facilidades
Perfeito, nosso código compila e funciona perfeitamente. Problema resolvido, mas o TypeScript possui um recurso interessante quando precisamos definir se uma propriedade é somente leitura ou somente escrita. Primeiro, vamos remover os dois métodos que criamos, inclusive vamos prefixar as duas propriedades da nossa classe com underline. Com essa alteração, precisamos ajustar o construtor da nossa classe:
// alurapic/client/app/foto/foto.service.ts
// código anterior omitido
export class MensagemCadastro {
private _mensagem: string;
private _inclusao: boolean;
constructor(mensagem: string, inclusao: boolean) {
this._mensagem = mensagem;
this._inclusao = inclusao;
}
}
Agora, vamos criar dois método com o mesmo nome das nossas propriedades, mas sem o underline e usar uma palavrinha especial logo após o modificador de acesso public:
// alurapic/client/app/foto/foto.service.ts
// código anterior omitido
export class MensagemCadastro {
private _mensagem: string;
private _inclusao: boolean;
constructor(mensagem: string, inclusao: boolean) {
this._mensagem = mensagem;
this._inclusao = inclusao;
}
public get mensagem(): string {
return this._mensagem;
}
public get inclusao(): boolean {
return this._inclusao;
}
}
Os métodos que acabamos de criar são chamados de getters, isto é, uma função que nos dá acesso de leitura para as propriedade _mensagem e _inclusao. Mas não trocamos seis por meia dúzia? Não, porque essa estrutura nos permite acessamos as propriedades como se fossem atributos, no entanto só permitirã a leitura e jamais a escrita. Vamos alterar novamente CadastroComponent:
// alurapic/client/app/cadastro/cadastro.component.ts
// código anterior omitido
cadastrar(event) {
event.preventDefault();
console.log(this.foto);
this.service
.cadastra(this.foto)
.subscribe(res => {
this.mensagem = res.mensagem;
this.foto = new FotoComponent();
if(!res.inclusao) this.router.navigate(['']);
}, erro => {
console.log(erro);
this.mensagem = 'Não foi possível savar a foto';
});
}
Por fim, temos a checagem de tipos do TypeScript, autocomplete e ainda por cima estamos garantindo que a única maneira de um instância de MensagemCadastro receber a mensagem e a indicação da ação é através do seu construtor. Além disso, instâncias de MensagemCadastraemento não permitem que suas propriedades sejam alteradas, mas apenas lidas.
Propriedades e açúcar sintático do TypeScript
Temos nossa classe MensagemCadastro criada, mas podemos lançar mão de um recurso exclusivo do TypeScript para tornar ainda menos verbosa a declaração da nossa classe. TypeScript permite declarar as propriedades de uma classe no próprio construtor:
// alurapic/client/app/foto/foto.service.ts
// código anterior omitido
export class MensagemCadastro {
// por debaixo dos panos cria das propriedades `_memsagem` e `_inclusao` como privados
constructor(private _mensagem: string, private _inclusao: boolean) {
this._mensagem = _mensagem;
this._inclusao = _inclusao;
}
public get mensagem(): string {
return this._mensagem;
}
public get inclusao(): boolean {
return this._inclusao;
}
}
Veja que poupamos algumas linhas de código. No entanto, se tivermos alguma informação que não é recebida pelo construtor ainda será necessário defini-la como propriedade da classe como fizemos antes.