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.