🧙‍♂️ Aprenda Conditional Types no TypeScript

#typescript

Se você quer levar seu conhecimento de TypeScript para o próximo nível, você precisa entender sobre Conditional Types (Tipos Condicionais). Aprender isso com certeza irá te colocar na frente da maioria dos desenvolvedores Typescript, já que poucos conhecem sobre.

Antes de tudo: Conceitos fundamentais

Para entender os Conditional Types, é necessário dominar três conceitos do TypeScript:

Generics
extends
Ternário

1. Generics

Leia esse outro artigo que fiz caso você não saiba o que é:

🧙‍♂️ Typescript Generics - O que é, porque existe e como utilizar

2. Extends

Usado para impor que um tipo herda (ou estende) outro tipo.

interface A {
  name: string;
}

// B tem todas as propriedades de A
interface B extends A {
  age: number;
}

Nos Conditional Types, o extends é usado como parte de uma condição (não é a mesma funcionalidade do examplo, mas você irá entender mais pra frente)

3. Operador Ternário

Muito conhecido de outras linguagens, o ternário permite retornar valores diferentes baseado em uma condição:

condição ? valorSeVerdadeiro : valorSeFalso

Esses três elementos formam a base dos Conditional Types.

O que são Conditional Types?

Um Conditional Type permite criar um tipo baseado em uma condição lógica entre dois tipos.

A base dos Conditional Types:

Usar um Conditional Types, nada mais é do que você colocar uma verificação no seu tipo, onde você usa extends para verificar e usa o ternário para retornar o tipo dependendo da verificação.

type Teste<T> = T extends string ? true : false;

type A = Teste<string>; // true
type B = Teste<number>; // false

Aqui, o tipo Teste verifica se T é uma string. Se sim, retorna true, senão false.

Para simplificar, você pode imaginar o seguinte:

T extends string => T === string
... ? true : false; => if(...) { return true } else { return false }

A syntax pode parecer complicada, mas você pode imaginar como se fosse vários if e else.

Usos práticos com Conditional Types

1. Remover tipos null ou undefined

O TypeScript já possui o tipo NonNullable, mas ele pode ser recriado usando Conditional Types:

type NonNullableCustom<T> = T extends null | undefined ? never : T;

type A = NonNullableCustom<string | null>; // string

Nesse caso, para "excluir" um tipo, você retorna o tipo never.

2. Recriando o tipo Extract

O TypeScript já possui o tipo Extract, mas ele pode ser recriado usando Conditional Types:

type ExtractCustom<T, U> = T extends U ? T : never;

Por exemplo:

type A = ExtractCustom<string | number, string>; // string

Nesse caso, você pode ver como é possível passar vários parâmetros genéricos e usa-los nas condições.

Recursividade com Conditional Types

Como exemplo, suponha que você quer extrair qual é o tipo de um array. No Typescript, você pode usar [number] para accessar o tipo do array.

type ArrayValue<T extends any[]> = T[number];

type A = ArrayValue<string[]>; // => string
// Mesma coisa que fazer "string[][number]" => string

Mas esse exemplo tem um problema, porque ele não funciona para arrays de multiplas dimensões:

type ArrayValue<T extends any[]> = T[number];

type A = ArrayValue<string[][]>; // => string[], mas era para ser apenas string

E é ai que entra o Conditional Types para resolver esse problema.

Porque no Conditional Types, você pode chamar o próprio tipo recursivamente

type DeepArrayValue<T> = T extends any[] // verifica se é um array qualquer
  ? DeepArrayValue<T[number]> // extrai o tipo do array e passa de novo para o próprio tipo
  : T; // retorna o tipo quando ele não é mais um array

type A = DeepArrayValue<string[][][]>; // string

Você poderia "traduzir" o código a cima como se fosse um if e else da seguinte forma:

function DeepArrayValue(T) {
  if(T === qualquer_array) { // verifica se é um array qualquer
    const tipo_do_array = T[number] // extrai o tipo do array
    return DeepArrayValue(tipo_do_array) // chama de novo a função com o tipo extraido
  } else {
    return T // retorna o tipo quando ele não é mais um array qualquer
  }
}

Para acabar com a recursividade, você acaba retornando o próprio T quando ele não é mais um "array qualquer".

Considerações Finais

Conditional Types é extremamente poderosos no TypeScript e com ele foi criado a maioria dos tipos já existentes (como o NonNullable e Extract que vimos anteriormente)

Não vai ser todos os dias que vai criar um Conditional Types do zero, mas pode ter certeza que você vai usar bastante algum tipo já existente do Typescript que usa ele e por isso é sempre bom entender como funciona o Conditional Types.