Para este laboratório, você recebeu todo o HTML e CSS. Você vai completar uma vitrine de produtos usando TypeScript. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve criar uma interface chamada Item com:

• Uma propriedade type que pode ser apenas "book", "electronics" ou "clothing".
• Uma propriedade id do tipo string.
• Uma propriedade price do tipo number.

1. Você deve criar uma interface chamada Book que estenda Item. Sua propriedade type deve ser atribuída ao literal "book". Ela também deve ter propriedades title e author do tipo string. 1. Você deve criar uma interface chamada Electronics que estenda Item. Sua propriedade type deve ser atribuída ao literal "electronics". Ela também deve ter propriedades item e model do tipo string, e uma propriedade opcional warranty do tipo number. 1. Você deve criar uma interface chamada Clothing que estenda Item. Sua propriedade type deve ser atribuída ao literal "clothing". Ela também deve ter propriedades item e brand do tipo string, e uma propriedade opcional size que pode ser apenas "S", "M" ou "L". 1. Você deve criar um tipo união chamado Product que combine as interfaces Book, Electronics e Clothing. 1. Você deve criar uma classe genérica chamada Collection com um parâmetro de tipo T. O construtor deve aceitar um array de itens do tipo T e armazená-los em uma propriedade chamada items. 1. A classe Collection deve ter um método getAll() que retorne todos os itens da coleção. 1. A classe Collection deve ter um método filter() que aceite uma função de callback e retorne apenas os elementos do array items que satisfaçam a condição dada. A callback deve receber um elemento do tipo T e retornar um booleano. 1. Você deve criar uma função chamada renderProduct com um parâmetro do tipo Product. Ela deve retornar uma string HTML representando um produto com:

• Um elemento com a classe item e um ID com o valor do id do produto.
• Um elemento com a classe price e o texto do price do produto.
• Um elemento contendo informações adicionais do produto.

1. A função renderProduct deve usar estreitamento de tipo para renderizar HTML diferente dependendo do tipo do produto:

• Para livros, o HTML renderizado deve ter o formato Book: [title] by [author], onde [title] e [author] devem ser substituídos pelo título e pelo autor, respectivamente.
• Para eletrônicos, o HTML renderizado deve ter o formato Electronics: [item] - [model]. Se o produto tiver garantia, adicione - Warranty: [warranty] year(s) ao formato. Substitua [item], [model] e [warranty] pelo item, modelo e garantia, respectivamente.
• Para roupas, o HTML renderizado deve ter o formato Clothing: [item] by [brand]. Se o produto tiver tamanho, adicione - Size [size] ao formato. Substitua [item], [brand] e [size] pelo item, marca e tamanho, respectivamente.
• Se um tipo de produto inválido for encontrado, lance um erro com o formato: Unknown product type: [product], onde [product] deve ser substituído pelo objeto de produto inválido. Use JSON.stringify para converter o produto inválido em string.

1. Você deve criar uma instância Collection<Product> que inclua pelo menos um item para cada tipo de produto e atribuir essa instância a uma variável chamada products. 1. Você deve criar uma função showProducts que exiba produtos no elemento #output. Ela deve aceitar um filtro opcional representando um tipo de produto; quando omitido, mostrar todos os produtos; quando fornecido, mostrar apenas produtos desse tipo. 1. Você deve renderizar os produtos convertendo cada produto em uma string HTML usando a função renderProduct e injetando o resultado combinado no elemento #output. 1. Clicar nos botões #all, #books, #electronics e #clothing deve exibir o conjunto correspondente de produtos no elemento #output. 1. Ao carregar a página, todos os produtos devem ser exibidos por padrão.

Testes:

• Você deve ter uma interface chamada `Item`.
• Sua interface `Item` deve ter uma propriedade `type` que pode ser apenas `"book"`, `"electronics"` ou `"clothing"`.
• Sua interface `Item` deve ter uma propriedade `id` do tipo `string`.
• Sua interface `Item` deve ter uma propriedade `price` do tipo `number`.
• Você deve ter uma interface chamada `Book`.
• Sua interface `Book` deve estender `Item`.
• Sua interface `Book` deve ter uma propriedade `type` atribuída a `"book"`.
• Sua interface `Book` deve ter uma propriedade `title` do tipo `string`.
• Sua interface `Book` deve ter uma propriedade `author` do tipo `string`.
• Você deve ter uma interface chamada `Electronics`.
• Sua interface `Electronics` deve estender `Item`.
• Sua interface `Electronics` deve ter uma propriedade `type` atribuída a `"electronics"`.
• Sua interface `Electronics` deve ter uma propriedade `item` do tipo `string`.
• Sua interface `Electronics` deve ter uma propriedade `model` do tipo `string`.
• Sua interface `Electronics` deve ter uma propriedade opcional `warranty` do tipo `number`.
• Você deve ter uma interface chamada `Clothing`.
• Sua interface `Clothing` deve estender `Item`.
• Sua interface `Clothing` deve ter uma propriedade `type` atribuída a `"clothing"`.
• Sua interface `Clothing` deve ter uma propriedade `item` do tipo `string`.
• Sua interface `Clothing` deve ter uma propriedade `brand` do tipo `string`.
• Sua interface `Clothing` deve ter uma propriedade opcional `size` que pode ser apenas `"S"`, `"M"` ou `"L"`.
• Você deve criar um tipo união chamado `Product` que combine as interfaces `Book`, `Electronics` e `Clothing`.
• Você deve ter uma classe `Collection` com um parâmetro de tipo `T`.
• O construtor da sua classe `Collection` deve aceitar um array de itens do tipo `T` e armazená-los em uma propriedade chamada `items`.
• Sua classe `Collection` deve ter um método `getAll`.
• Seu método `getAll` deve retornar todos os itens da coleção.
• Sua classe `Collection` deve ter um método `filter`.
• Seu método `filter` deve aceitar uma função de callback e retornar um array contendo os elementos da propriedade `items` que satisfaçam a condição dada.
• Você deve ter uma função chamada `renderProduct`.
• `renderProduct(product)` deve retornar uma string contendo um elemento com a classe `item` e o ID igual a `product.id`.
• `renderProduct(product)` deve retornar uma string contendo um elemento com a classe `price` e o texto igual a `product.price`.
• Quando `renderProduct` for chamada com um produto `Book` `p`, ela deve retornar uma string contendo um elemento com o texto no formato `Book: [title] by [author]`. Substitua `[title]` e `[author]` pelas propriedades correspondentes de `p`.
• Quando `renderProduct` for chamada com um produto `Electronics` `p`, ela deve retornar uma string contendo um elemento com o texto no formato `Electronics: [item] - [model]` ou `Electronics: [item] - [model] - Warranty: [warranty] year(s)` se `p.warranty` não for indefinido. Substitua `[item]`, `[model]` e `[warranty]` pelas propriedades correspondentes de `p`.
• Quando `renderProduct` for chamada com um produto `Clothing` `p`, ela deve retornar uma string contendo um elemento com o texto no formato `Clothing: [item] by [brand]` ou `Clothing: [item] by [brand] - Size [size]` se `p.size` não for indefinido. Substitua `[item]`, `[brand]` e `[size]` pelas propriedades correspondentes de `p`.
• Quando `renderProduct` for chamada com um produto inválido, ela deve lançar um erro com o formato `Unknown product type: [p]`. Substitua `[p]` pelo produto inválido convertido em string com `JSON.stringify`.
• Você deve criar uma instância `Collection<Product>` e atribuí-la a uma variável chamada `products`.
• Sua variável `products` deve conter pelo menos um item para cada tipo de produto.
• Você deve ter uma função chamada `showProducts`.
• Clicar no botão `#all` deve exibir todos os produtos no elemento `#output`.
• Clicar no botão `#books` deve exibir o conjunto correspondente de produtos no elemento `#output`.
• Clicar no botão `#electronics` deve exibir o conjunto correspondente de produtos no elemento `#output`.
• Clicar no botão `#clothing` deve exibir o conjunto correspondente de produtos no elemento `#output`.
• Todos os produtos devem estar visíveis por padrão quando a página carregar. Use o evento `DOMContentLoaded` para garantir isso.