Passo 1

Instruções

Nesta oficina, você vai aprender sobre classes abstratas e genéricos em TypeScript construindo um seletor de espécies de bug que exibe diferentes emojis de bug. O HTML e o CSS do projeto já foram fornecidos para que você possa focar no TypeScript. Você pode conferir os arquivos para conhecer os elementos que vai selecionar depois. Para começar, você vai precisar de uma classe base abstrata para todos os bugs. Classes abstratas não podem ser instanciadas diretamente e são feitas para serem estendidas por outras classes. Crie uma classe abstrata chamada Bug com um parâmetro de tipo genérico T.

O que fazer:

Testes:

Você deve ter uma classe abstrata chamada `Bug`.
Sua classe `Bug` deve ter um parâmetro de tipo genérico `T`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bug Emoji Picker</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <form id="bug-form">
        <label for="species">Species:</Label>
        <select id="species">
          <option value="bee" selected>🐝 Bee</option>
          <option value="spider">🕷️ Spider</option>
        </select>
      </form>
      <div>
        <p id="bug-emoji">🐝</p>
      </div>
    </main>
  </body>
  <script src="index.ts"></script>
</html>

:root {
  --gradient-back: #987284;
  --gradient-left: #F9B5AC;
  --gradient-right: #AA7674;
  --card: #FFFFFF;
  --card-shadow: 0 10px 30px rgba(30, 41, 59, 0.12);
  --font: #222;
}

html {
  width: 100%;
  min-height: 100%;
  background: radial-gradient(100% 100% at 10% 10%, var(--gradient-left), transparent 60%),
              radial-gradient(90% 85% at 90% 0%, var(--gradient-right), transparent 55%),
              linear-gradient(180deg, var(--gradient-back), #ffffff);
}

body {
  margin: 5rem auto;
  padding: 2rem 3rem;
  width: fit-content;
  min-width: 15%;
  color: var(--font);
  font: 500 16px/1.4 system-ui;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15%;
  box-shadow: var(--card-shadow);

  backdrop-filter: blue(12px);
  -webkit-backdrop-filter: blur(12px);
}

select, input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0.1rem 2rem 0.1rem 0.8rem;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

form { 
  display: flex;
  flex-direction: column;
}

#bug-emoji {
  margin: 0 auto;
  width: fit-content;
  font-size: 128px;
}

#bug-name {
  margin: 0 auto;
  width: fit-content;
  font-size: 24;
  font-weight: 700;
}

Preview