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

Dúvida do tipo do primeiro parâmetro do transform

Olá, minha dúvida é a seguinte: No arquivo listagem.component.html temos um painel sobre o qual aplicamos um filtro utilizando um pipe customizado, assim:

<painel *ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value" titulo="{{foto.titulo | uppercase}}" class="col-md-2">

O pipe, ao meu ver, está atuando sobre o array de fotos que vem antes dele, array este que foi provido pelo listagem.component.ts que é um array de Object criado a partir da chamada http.

Agora, no primeiro parâmetro do método transform da classe FiltroPorTitulo do arquivo foto.pipes.ts, na aula, foi declarado o tipo do primeiro parâmetro como um array de FotoComponent, como segue:

transform(fotos: FotoComponent[], digitado: string) {
    ...
}

Isso não está errado? O tipo do primeiro parâmetro deste método não deveria ser equivalente ao tipo do array definido antes do pipe no html? O tipo que foi populado no ngFor tinha sido um simples Object retornado na chamada http e não do tipo FotoComponent.

Pode ser que eu tenha entendido algo errado, você poderia me explicar isso?

Muito obrigado!

5 respostas

Bom dia!

Um pipe (tubo) é sempre sobre um elemento, por isso esse elemento é o primeiro parâmetro do pipe. Todavia, se você quer filtrar algo, você precisa de um critério, por isso o segundo parâmetro é o valor passado para o pipe.

<painel *ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value" titulo="{{foto.titulo | uppercase}}" class="col-md-2">

Se você usa qualquer sistema operacional sem ser Windows, o | através do terminal tem a mesma lógica.

Por fim, a estrutura de um PipeTransform foi definida depois de exaustivo debate entre a equipe do Angular e da comunidade. Por mais que ela tenha causado estranheza em você, se não fizemos assim, o resultado não será o esperado.

solução!

Completando a resposta (acho que essa era a sua dúvida original). Por mais que o array seja de Object[], ele possui a estrutura de um FotoComponent[]. Se não me engano, em algum momento do curso eu peço para mudar de Object[] para FotoComponent[] também lá no componente, mas a frente para haver a paridade.

Em Java, isso estaria errado, mas TypeScript não é Java e por isso muito desenvolvedor Java acaba cometendo equívocos por achar que TypeScript é exatamente igual. Nesse sentido, o que importa é o shape do Objeto.Aliás.. o que permite isso é a passagem do valor via template diretamente.... porque por debaixo dos panos o Angular faz uma espécie de casting. Para po PipeTransform, chegará um objeto do tipo any.

OBS: se quiser manter o mindset que você já tem e espera, troque já Object[] para FotoComponent[]. Isso será feito lá para frente, se não me engano, quando uma classe de serviço for criada.

Sucesso e bom estudo Guilherme!

Entendi! Então neste caso, utilizamos o tipo FotoComponent[] no transform pois ele possui a mesma "estrutura" do objeto que estamos trabalhando.

Agradeço a sua prontidão na resposta, ótimo curso!

Para ficar ainda melhor a resposta:

var y: Object[] = []
var x: String[];
x = y; // vai dar erro! tipo mais genérico atribuído a um tipo mais específico

Era esse erro que você esperava, certo?

Porém, como a lista é passada pelo template do Angular, ela chega como o tipo any para o PipeTransform que realiza um casting desse tipo para FotoComponent[].

Seu raciocínio esta correto, porém, nessa particularidade da passagem do parâmetro do template, ela não se aplica. Como shape (a forma do objeto, suas propriedades) são as mesmas de um FotoComponent[], o casting realizado por debaixo dos panos funcionará.

Então, mais uma vez para não ficar dúvida: esse comportamento não esperado por você ocorre nessa condição exclusiva do template.

Por fim, talvez seja legal você dar uma pausa no Angular e fazer os cursos de TypeScript 1 e 2. Digo isso, porque seu aproveitamento será muito melhor e muita coisa que você ver do Angular você dirá "Ah, agora eu sei porque é assim, porque TypeScript é isso e isso". TypeScript não é o pré-requisito deste curso, mas se fizer antes seu aproveitamento será muito melhor. Era a dica que eu daria se você fosse meu filho.

Sucesso e bom estudo meu aluno!

Muito bom! Obrigado pela explicação detalhada e pelas dicas. Este é o segundo curso que você ministra que estou fazendo e gosto muito de sua didática. Abraços.