TypeScript: tipos básicos

Neste capítulo você vai anotar tipos primitivos e ver o compilador apontar erro. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Seu ponto de partida

Use o exemplo 11-ts-tipos 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.

Tipos descrevem intenções

TypeScript acrescenta tipos ao JavaScript. O compilador avisa antes de rodar. Neste módulo usamos arquivos .ts e a saída .js gerada para o navegador.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

let vagas: number = 8;
let oficina: string = 'Serigrafia';

Mude uma coisa e preveja

Atribua um texto a vagas e observe o erro do tsc (ou no editor).

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O verificador reclama do tipo.

Se não acontecer

Se não tiver tsc, use o playground indicado no README do exemplo ou leia os erros comentados.

boolean e nullabilidade

boolean é true/false. union permite string | null quando a ausência é válida.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

let esgotado: boolean = false;
let observacao: string | null = null;

Mude uma coisa e preveja

Tente atribuir 1 a esgotado.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Erro de tipo.

Se não acontecer

Number não é boolean.

Arrays tipados

string[] ou Array documentam o conteúdo da lista de oficinas.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

const oficinas: string[] = ['Serigrafia', 'Costura'];

Mude uma coisa e preveja

Empurre um número e veja o aviso.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O tipo da lista rejeita number.

Se não acontecer

Mantenha só strings ou ajuste o tipo conscientemente.

Atividades

Atividade 1

TypeScript substitui JavaScript no navegador?

Atividade 2

O que é uma union string | null?

Atividade 3

Como tipar uma lista de nomes?

Respostas comentadas

Resposta da atividade 1

Não; ele compila para JavaScript.

Resposta da atividade 2

Valor que pode ser texto ou null.

Resposta da atividade 3

string[] ou Array.

O arquivo completo

Referência do exemplo 11-ts-tipos, 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 tipos — 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>Tipos básicos</h1>
<p>Abra <code>tipos.ts</code> no editor. A saída <code>tipos.js</code> roda no navegador.</p>
<pre id="saida" class="card"></pre>
<script src="tipos.js"></script>
</main>
<footer><p>Conteúdo fictício. Estudo em 127.0.0.1.</p></footer>

</body>
</html>

tipos.js

let vagas = 8;
let oficina = 'Serigrafia';
let esgotado = false;
let observacao = null;
const oficinas = ['Serigrafia', 'Costura'];
function resumo() {
  return oficina + ': ' + vagas + ' vagas; lista=' + oficinas.join(', ');
}
document.getElementById('saida').textContent = resumo();