TypeScript: funções e objetos

Neste capítulo você vai tipar parâmetros, retornos e interfaces do Ateliê. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Seu ponto de partida

Use o exemplo 12-ts-funcoes 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.

Funções com tipos

Parâmetros e retorno tipados evitam surpresas.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

function reservar(vagas: number): number {
  return Math.max(0, vagas - 1);
}

Mude uma coisa e preveja

Retorne uma string e veja o erro.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O retorno declarado é number.

Se não acontecer

Ajuste o tipo de retorno ou o return.

Interface de oficina

interface descreve a forma de um objeto. Opcional com ?.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

interface Oficina {
  id: number;
  nome: string;
  vagas?: number;
}

Mude uma coisa e preveja

Crie um objeto sem nome e observe o erro.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Falta propriedade obrigatória.

Se não acontecer

Inclua nome: string.

type versus interface (visão prática)

Para objetos, ambos funcionam neste módulo. Prefira um estilo e mantenha. Unions complexas costumam usar type.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

type Status = 'carregando' | 'ok' | 'erro';

Mude uma coisa e preveja

Atribua ‘falhou’ a uma variável Status.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Erro: literal não permitido.

Se não acontecer

Use só os três literais.

Atividades

Atividade 1

Como tipar o retorno de uma função?

Atividade 2

O que vagas?: number significa?

Atividade 3

Quando type ajuda com literais?

Respostas comentadas

Resposta da atividade 1

Após os parâmetros: ): Tipo {

Resposta da atividade 2

Propriedade opcional number.

Resposta da atividade 3

Para unir strings literais como status finitos.

O arquivo completo

Referência do exemplo 12-ts-funcoes, 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>TypeScript funções — 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>Funções e interfaces</h1>
<pre id="saida" class="card"></pre>
<script src="atelie.js"></script>
</main>
<footer><p>Conteúdo fictício. Estudo em 127.0.0.1.</p></footer>

</body>
</html>

atelie.js

function reservar(vagas) {
  return Math.max(0, vagas - 1);
}
const o = { id: 1, nome: 'Bordado', vagas: 4 };
const status = 'ok';
document.getElementById('saida').textContent =
  o.nome + ' → ' + reservar(o.vagas ?? 0) + ' | ' + status;