TypeScript: exercícios de tipos

Neste capítulo você vai resolver exercícios curtos de tipagem sem reescrever um livro. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Seu ponto de partida

Use o exemplo 13-ts-exercicios do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa.

Use servidor só em 127.0.0.1 quando o README do exemplo pedir HTTP local. Abrir ou testar não publica nada.

Como praticar

Leia → copie ou digite → mude uma coisa → preveja → salve → recarregue → confira. Restaure cada experiência antes da próxima. Faça as atividades antes de abrir as respostas comentadas.

Exercício: tipar o catálogo

Complete os tipos em exercicios.ts. O arquivo de referência mostra uma solução. Não olhe antes de tentar.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

export interface ItemCatalogo {
  id: number;
  titulo: string;
  precoCentavos: number;
}

Mude uma coisa e preveja

Implemente a função totalPedido(itens: ItemCatalogo[]): number.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A soma dos preços em centavos fecha.

Se não acontecer

Reduza com accumulate + precoCentavos.

Exercício: estreitar tipos

Com union, use checagens para estreitar.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

function rotulo(x: string | number): string {
  if (typeof x === 'number') return String(x);
  return x.toUpperCase();
}

Mude uma coisa e preveja

Trate number com prefixo Nº.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

12 vira Nº 12.

Se não acontecer

Ajuste o ramo typeof number.

Exercício: readonly

ReadonlyArray impede mutação acidental da lista oficial de oficinas.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

function listar(xs: ReadonlyArray<string>): string {
  return xs.join(', ');
}

Mude uma coisa e preveja

Tente xs.push dentro da função.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O verificador bloqueia push.

Se não acontecer

Remova o push; devolva join.

Atividades

Atividade 1

O que precoCentavos evita em relação a number com vírgula?

Atividade 2

Como estreitar string | number?

Atividade 3

Para que ReadonlyArray?

Respostas comentadas

Resposta da atividade 1

Trabalhar dinheiro como inteiro e evitar erro de ponto flutuante.

Resposta da atividade 2

Com typeof ou outras checagens de controle de fluxo.

Resposta da atividade 3

Impedir mutação da coleção recebida.

O arquivo completo

Referência do exemplo 13-ts-exercicios, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercícios TS — Ateliê Boa Viagem</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>
<a class="skip" href="#conteudo">Ir para o conteúdo</a>
<header>
<p><strong>Ateliê Boa Viagem</strong></p>
<nav aria-label="Principal"><ul class="nav"><li><a href="index.html" aria-current="page">Início</a></li></ul></nav>
</header>
<main id="conteudo">
<h1>Exercícios de tipos</h1>
<p>Complete <code>inicio/exercicios.ts</code>. A referência traz uma solução.</p>
<pre id="saida" class="card"></pre>
<script src="exercicios.js"></script>
</main>
<footer><p>Conteúdo fictício. Estudo em 127.0.0.1.</p></footer>

</body>
</html>

exercicios.js

function totalPedido(itens) {
  return itens.reduce((acc, i) => acc + i.precoCentavos, 0);
}
function rotulo(x) {
  if (typeof x === 'number') return 'Nº ' + x;
  return x.toUpperCase();
}
function listar(xs) {
  return xs.join(', ');
}
const itens = [
  { id: 1, titulo: 'Estampa orla', precoCentavos: 4500 },
  { id: 2, titulo: 'Bolsa leve', precoCentavos: 8900 },
];
document.getElementById('saida').textContent =
  'total=' + totalPedido(itens) + ' | ' + rotulo(12) + ' | ' + listar(['a','b']);