0Pricing
Frontend Academy · Aula

Restrição de tipos: typeof instanceof uniões discriminadas

Use proteções de tipo para restringir tipos de união em tempo de execução com typeof, instanceof e padrões de união discriminada.

Restrição de tipos: typeof instanceof uniões discriminadas é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 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.

O que é restrição de tipo?

TypeScript começa com um tipo amplo (por exemplo, string | number). A restrição é o processo de refinar o tipo para um mais específico dentro de um bloco condicional. TypeScript acompanha a restrição automaticamente.

Restrição com typeof

O operador typeof restringe tipos primitivos. Dentro de um bloco if, TypeScript conhece o tipo exato.

function format(value: string | number | boolean): string {
  if (typeof value === 'string') {
    return value.toUpperCase(); // string here
  }
  if (typeof value === 'number') {
    return value.toFixed(2);   // number here
  }
  return String(value);        // boolean here
}

Restrição com instanceof

instanceof restringe instâncias de classes. TypeScript conhece a classe específica dentro do bloco.

function processError(err: unknown) {
  if (err instanceof Error) {
    console.error(err.message); // Error methods available
  } else if (err instanceof Response) {
    console.error('HTTP error:', err.status);
  } else {
    console.error('Unknown:', err);
  }
}

Restrição por veracidade

TypeScript remove null e undefined ao fazer verificações de veracidade.

function printLength(value: string | null | undefined) {
  if (value) {
    console.log(value.length); // string here (null/undefined filtered)
  }
}

Restrição por igualdade

A igualdade estrita restringe ao tipo literal. Isso é útil para uniões discriminadas e enumerações de strings.

function handle(action: 'submit' | 'cancel' | 'reset') {
  if (action === 'submit') {
    // action is exactly 'submit'
    doSubmit();
  }
}

Restrição com o operador in

O operador in restringe tipos união de objetos verificando quais propriedades existem.

interface Cat { meow(): void; }
interface Dog { bark(): void; }

function speak(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow(); // Cat
  } else {
    animal.bark(); // Dog
  }
}

Uniões discriminadas — restrição baseada em etiquetas

Uma união discriminada tem uma propriedade de tipo literal compartilhada (o discriminador). TypeScript restringe a união em switch/if com base nessa propriedade.

type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState   = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;

function render(state: State) {
  switch (state.status) {
    case 'loading': return '<Spinner />';
    case 'success': return renderUsers(state.data);  // state.data available
    case 'error':   return renderError(state.message);
  }
}

Predicados de tipo — proteções de tipo personalizadas

Uma função predicado de tipo restringe o tipo para quem a chama. Utilize param is Type como tipo de retorno.

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'name' in value &&
    typeof (value as User).name === 'string'
  );
}

const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
  console.log(data.name); // typed as User
}

Funções de asserção

Uma função de asserção lança um erro se a condição falhar, restringindo o tipo após a chamada.

function assertIsString(val: unknown): asserts val is string {
  if (typeof val !== 'string') throw new Error('Expected string');
}

const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string here

Verificação de exaustividade

Quando um switch sobre uma união discriminada deixa um tipo never no ramo padrão, TypeScript garante que todos os casos sejam tratados. Adicione um caso padrão que atribua o valor a never para obter um erro de compilação caso uma nova variante seja adicionada.

function render(state: State): string {
  switch (state.status) {
    case 'loading': return '...';
    case 'success': return state.data.length.toString();
    case 'error':   return state.message;
    default:
      const _exhaustive: never = state;
      throw new Error('Unhandled state: ' + _exhaustive);
  }
}

Restrição com Array.isArray

Array.isArray() restringe um valor ao tipo de matriz.

function processInput(input: string | string[]) {
  if (Array.isArray(input)) {
    return input.join(', '); // string[]
  }
  return input.toUpperCase(); // string
}

Verificação rápida

Qual técnica de restrição utiliza uma propriedade literal compartilhada para distinguir variantes de um tipo união?

Recapitulação: restrição de tipos em TypeScript

typeof para tipos primitivos. instanceof para classes. O operador in para formatos de objetos. A veracidade filtra null/undefined. Uniões discriminadas com uma propriedade literal compartilhada permitem instruções switch exaustivas. Predicados de tipo personalizados (is) para verificações complexas em tempo de execução. Verificação de exaustividade com never nos casos padrão.

Perguntas Frequentes

A aula “Restrição de tipos: typeof instanceof uniões discriminadas” é grátis?

Sim — o texto completo de “Restrição de tipos: typeof instanceof uniões discriminadas” é 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 “Restrição de tipos: typeof instanceof uniões discriminadas”?

Use proteções de tipo para restringir tipos de união em tempo de execução com typeof, instanceof e padrões de união discriminada. 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 4 de 4.

Quanto tempo leva a aula “Restrição de tipos: typeof instanceof uniões discriminadas”?

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. Genéricos: T extends e restrições
  2. Tipos utilitários: Partial Required Pick Omit
  3. Tipos mapeados e tipos condicionais
  4. Restrição de tipos: typeof instanceof uniões discriminadas
← Voltar para Frontend Academy