0Pricing
Frontend Academy · Aula

Tipos primitivos, uniões e aliases de tipos

Anote variáveis com string, number, boolean e arrays. Crie tipos de união com | e dê-lhes nomes legíveis usando aliases de tipos.

Tipos primitivos, uniões e aliases de tipos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Anotando variáveis

Adicione anotações de tipos com dois-pontos depois do nome da variável. O TypeScript infere os tipos quando possível — adicione anotações explícitas quando a inferência não for clara ou para fins de documentação.

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Tipos primitivos

Os tipos primitivos do TypeScript correspondem aos primitivos do JavaScript: string, number (sem distinção entre inteiro e decimal), boolean, null, undefined, symbol, bigint.

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Matrizes

Defina o tipo de uma matriz com Type[] ou com o genérico Array<Type>. Ambos são equivalentes.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Tipos de união: |

Os tipos de união permitem que uma variável contenha um entre vários tipos. Use o operador de barra vertical |. O TypeScript restringe o tipo dentro das condicionais.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Tipos literais

É possível usar valores literais de texto, número ou booleano como tipos. Combinados com uniões, eles criam um conjunto fixo de valores permitidos — como uma enumeração.

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Nomes alternativos de tipos: type

A palavra-chave type cria um nome alternativo de tipo — um nome reutilizável para qualquer tipo. Esses nomes funcionam com primitivos, uniões, objetos, tuplas e tipos compostos complexos.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Tipos de objeto com type

Descreva formatos de objetos com nomes alternativos de tipos. Marque propriedades como opcionais com ? e como somente leitura com readonly.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Tipos de interseção: &

Combine vários tipos com o operador &. O tipo resultante tem todas as propriedades de ambos. Isso é útil para estender tipos.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

O tipo any — válvula de escape

any desativa a verificação de tipos para um valor. Ele é contagioso — valores derivados de any também são any. Use-o como último recurso durante uma migração; nunca como solução de longo prazo.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

O tipo unknown — alternativa segura a any

unknown é o equivalente seguro de any em relação aos tipos. Não é possível usar um valor unknown sem primeiro restringir seu tipo. Isso obriga você a validar dados externos.

Tuplas — matrizes de tamanho fixo

Uma tupla é uma matriz de tamanho fixo em que cada posição tem um tipo conhecido.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Verificação rápida

Qual recurso do TypeScript permite que uma função aceite uma cadeia de caracteres ou um número?

Recapitulação: tipos primitivos, uniões e nomes alternativos

Tipos primitivos: string, number, boolean, null, undefined. Matrizes: Type[]. Tipos de união: A | B. Tipos literais para conjuntos fixos de valores. Nomes alternativos de tipos para nomes reutilizáveis. Propriedades opcionais com ?. readonly para propriedades imutáveis. Prefira unknown a any para dados externos.

Perguntas Frequentes

A aula “Tipos primitivos, uniões e aliases de tipos” é grátis?

Sim — o texto completo de “Tipos primitivos, uniões e aliases de tipos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Tipos primitivos, uniões e aliases de tipos”?

Anote variáveis com string, number, boolean e arrays. Crie tipos de união com | e dê-lhes nomes legíveis usando aliases de tipos. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Tipos primitivos, uniões e aliases de tipos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Por que TypeScript: tipos detectam erros em tempo de compilação
  2. Tipos primitivos, uniões e aliases de tipos
  3. Interfaces e tipos de objetos
  4. Compilando TS e tsconfig.json
← Voltar para Frontend Academy