Squad Front

Appearance

Types (Type Aliases) ​

Os Type Aliases (ou simplesmente types) são usados para criar um novo nome para um tipo. Eles são muito mais flexíveis que as interfaces, pois podem representar qualquer tipo de dado, não apenas objetos.

1. Quando usar Types? ​

Você deve usar type para situações que exigem flexibilidade lógica que as interfaces não oferecem.

A. Uniões (Unions) e Interseções ​

É o uso mais comum. Quando um valor pode ser uma coisa OU outra.

typescript
type Status = 'loading' | 'success' | 'error';

type Response = { data: string } & { status: number };

B. Primitivos e Aliases ​

Para dar nomes semânticos a tipos básicos.

typescript
type Email = string;
type CPF = string;

C. Tuplas ​

Quando você tem um array com um número fixo de elementos e tipos conhecidos.

typescript
type Point = [number, number];

D. Tipos Utilitários Complexos ​

Para manipulações avançadas de tipos usando condicionais ou mapeamentos.

typescript
type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

2. Quando NÃO usar Types? ​

  1. Objetos Extensíveis: Embora seja possível estender types via interseção (&), a interface lida melhor com isso em termos de performance do compilador e mensagens de erro.
  2. Bibliotecas Públicas: Se você está criando uma biblioteca, prefira interface para que os usuários possam fazer declaration merging.

3. Como fazer vs Como não fazer ​

✅ Como fazer ​

  • Use type para definir estados de UI (ex: loading | idle | error).
  • Use type para combinar interfaces existentes via interseções.
  • Nomeie seus types com PascalCase (ex: AuthToken).
typescript
type ButtonVariant = 'primary' | 'secondary' | 'ghost';

type ApiResponse<T> = {
  data: T;
  error?: string;
};

❌ Como não fazer ​

  • NÃO use type para definir objetos simples que representam modelos de dados ou props se uma interface for suficiente.
  • NÃO use types para criar heranças complexas que poderiam ser resolvidas de forma mais limpa com interface extends.
  • NÃO tente fazer declaration merging com types; o compilador gerará um erro.
typescript
// ❌ EVITE: Usar type para algo que será estendido muitas vezes
type BaseProps = { id: string };
type ComponentProps = BaseProps & { label: string }; // Prefira interface extends

Por que isso importa? ​

O type é a sua ferramenta de "lógica de tipos". Usá-lo para uniões e aliases semânticos torna o código muito mais legível e seguro, evitando que strings genéricas sejam passadas onde apenas valores específicos são aceitos.