Typescript: Tipos condicionais

Tipos condicionais

Tipos condicionais em TypeScript são muito poderosos. Eles nos permitem criar funções de tipo. Eu vou te mostrar:

Suponha que temos 3 tipos: A, B e C.

TypeScript
type A
type B
type C

Eles poderiam ser qualquer coisa, as digamos que A é string, B é number e C é a união entre A e B.

TypeScript
type A = string;
type B = number;
type C = A | B;

Agora, nós queremos converter string e number para representações numéricas literais.

string deve ser 1,

TypeScript
type NumberA = 1;
type NumberB = number;
type NumberC = 1 | number;

number deve ser 2, e qualquer outra coisa, deve ser 0.

TypeScript
type NumberA = 1;
type NumberB = 2;
type NumberC = 1 | 2;

Se isso fosse uma função, você poderia simplesmente usar condicionais para conduzir o código. Ficaria algo assim:

TypeScript
const ToNumber = (T) => (T === string ? 1 : T === number ? 2 : 0);

Essa sintaxe não funciona para tipos, mas chegou bem perto.

TypeScript
type ToNumber = (T) =>
  T === string
  ? 1
  : T === number
  ? 2
  : 0

Em vez de uma seta, usamos igual.

TypeScript
type ToNumber(T) =
  T === string
  ? 1
  : T === number
  ? 2
  : 0

Em vez de parênteses, usamos colchetes angulares.

TypeScript
type ToNumber<T> =
  T === string
  ? 1
  : T === number
  ? 2
  : 0

E em vez de triplo igual, usamos extends.

TypeScript
type ToNumber<T> = T extends string ? 1 : T extends number ? 2 : 0;

Veja, não estamos perguntando ao TypeScript se T é igual a string,o que estamos perguntando é se T é um subconjunto de string.

Que também inclui tipos de string literais, assim como o tipo literal string "abc".

TypeScript
type A = string
type B = number
type C = A | B

ToNumber<A> // -> 1
ToNumber<B> // -> 2
ToNumber<C> // -> 1 | 2
ToNumber<boolean> // -> 0
ToNumber<"abc"> // -> 1

LinkConclusão

As referências estão abaixo.

Este vídeo faz parte da minha série de Narrowing TypeScript. Você pode assistir à série completa gratuitamente no meu canal.

Deixe um like, tenha um ótimo dia e até breve!

LinkReferências

  1. Tipos Condicionais Documentação do TypeScript

Assine a nossa Newsletter e seja avisado quando eu lançar um curso, postar um vídeo ou escrever um artigo.

Campo obrigatório
Campo obrigatório