Tipando o alternador de tema
A página de perfil da Ana Souza está de volta, pela quarta vez. Desta vez, o JavaScript que já funcionava ganha interfaces e tipos por cima, sem mudar o comportamento em nada.
Estudar esta lição interativa →Se você fez o curso de JavaScript deste site, o módulo Ponte de lá te apresentou a página de perfil da Ana Souza pela terceira vez, e ensinou um botão de alternância de tema usando classList.toggle. O JavaScript daquele módulo já funciona: roda, alterna o tema, não tem bug nenhum escondido. O que falta agora não é corrigir nada, é tipar: dar nome, com precisão, aos formatos de dado que aquele código já manipula, para que qualquer mudança futura continue segura.
E se você não fez os cursos de HTML, CSS ou JavaScript? Sem problema: este módulo também é autocontido. Todo o código de partida que você precisa já vem pronto em cada exemplo, em JavaScript puro e funcionando; o seu trabalho aqui é só a camada de tipos por cima, que é justamente o que este curso inteiro te ensinou.
Se no curso de JavaScript a metáfora era "a casa ganhando vida" (luzes que acendem, campainha que toca), aqui a imagem é outra: é como etiquetar, com uma caneta de precisão, caixas que você já empacotou e que já funcionam. As caixas não mudam de lugar, o conteúdo delas não muda, mas agora cada uma tem uma etiqueta clara dizendo exatamente o que pode e o que não pode ir lá dentro, para quem for mexer nelas depois (inclusive você mesmo, daqui a alguns meses).
O primeiro comportamento a tipar é o alternador de tema. No JavaScript original, a variável de tema podia ser qualquer texto. Em TypeScript, um tema de site tem exatamente duas opções válidas, então um type alias de união de literais (Módulo 3 e Módulo 5) descreve isso com precisão: type Tema = "claro" | "escuro". A partir daí, uma função que alterna o tema pode ter o próprio retorno garantido pelo tipo: ela sempre devolve Tema, nunca um texto qualquer digitado errado.
// Tipando o alternador de tema da página de perfil: só duas opções válidas.
type Tema = "claro" | "escuro";
function alternarTema(atual: Tema): Tema {
return atual === "claro" ? "escuro" : "claro";
}
let temaAtual: Tema = "claro";
temaAtual = alternarTema(temaAtual);
console.log(temaAtual);
temaAtual = alternarTema(temaAtual);
console.log(temaAtual);Tente trocar "escuro" por "escuroo" na função e observe o diagnóstico apontar exatamente essa linha.
Rode o exemplo acima algumas vezes, alternando os valores testados. O resultado é idêntico ao que a mesma lógica produziria em JavaScript puro. A diferença inteira está em quando um erro de digitação (como "escuroo") seria descoberto: em JavaScript puro, só ao rodar; aqui, o diagnóstico aparece na hora, exatamente como você viu logo na primeira lição deste curso.
// Sua vez! Crie "temaDoSistema(prefereEscuro: boolean): TemaSite", que devolve
// "escuro" quando prefereEscuro for true e "claro" quando for false.
type TemaSite = "claro" | "escuro";
// escreva temaDoSistema aqui
console.log("pronto para testar temaDoSistema");Crie temaDoSistema e teste com true e false.