Tipos Avançados em TypeScript

Um guia completo para dominar o sistema de tipos avançados do TypeScript, incluindo genéricos, tipos condicionais, tipos mapeados, tipos de literais de template e tipos utilitários para construir aplicações robustas e com segurança de tipos.

Quando Usar Esta Habilidade

• Construir bibliotecas ou frameworks com segurança de tipos
• Criar componentes genéricos reutilizáveis
• Implementar lógica complexa de inferência de tipos
• Projetar clientes de API com segurança de tipos
• Construir sistemas de validação de formulários
• Criar objetos de configuração fortemente tipados
• Implementar gerenciamento de estado com segurança de tipos
• Migrar bases de código JavaScript para TypeScript

Conceitos Essenciais

1. Genéricos

Propósito: Criar componentes reutilizáveis e flexíveis em termos de tipos, mantendo a segurança de tipos.

Função Genérica Básica:

function identity<T>(value: T): T {
  return value;
}

const num = identity<number>(42); // Type: number
const str = identity<string>("hello"); // Type: string
const auto = identity(true); // Type inferred: boolean

Restrições Genéricas:

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): T {
  console.log(item.length);
  return item;
}

logLength("hello"); // OK: string has length
logLength([1, 2, 3]); // OK: array has length
logLength({ length: 10 }); // OK: object has length
// logLength(42);             // Error: number has no length

Múltiplos Parâmetros de Tipo:

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const merged = merge({ name: "John" }, { age: 30 });
// Type: { name: string } & { age: number }

2. Tipos Condicionais

Propósito: Criar tipos que dependem de condições, permitindo lógica de tipos sofisticada.

Tipo Condicional Básico:

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

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

Extraindo Tipos de Retorno:

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser() {
  return { id: 1, name: "John" };
}

type User = ReturnType<typeof getUser>;
// Type: { id: number; name: string; }

Tipos Condicionais Distributivos:

type ToArray<T> = T extends any ? T[] : never;

type StrOrNumArray = ToArray<string | number>;
// Type: string[] | number[]

Condições Aninhadas:

type TypeName<T> = T extends string
  ? "string"
  : T extends number
    ? "number"
    : T extends boolean
      ? "boolean"
      : T extends undefined
        ? "undefined"
        : T extends Function
          ? "function"
          : "object";

type T1 = TypeName<string>; // "string"
type T2 = TypeName<() => void>; // "function"

3. Tipos Mapeados

Propósito: Transformar tipos existentes iterando sobre suas propriedades.

Tipo Mapeado Básico:

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

interface User {
  id: number;
  name: string;
}

type ReadonlyUser = Readonly<User>;
// Type: { readonly id: number; readonly name: string; }

Propriedades Opcionais:

type Partial<T> = {
  [P in keyof T]?: T[P];
};

type PartialUser = Partial<User>;
// Type: { id?: number; name?: string; }

Remapeamento de Chaves:

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface Person {
  name: string;
  age: number;
}

type PersonGetters = Getters<Person>;
// Type: { getName: () => string; getAge: () => number; }

Filtrando Propriedades:

type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};

interface Mixed {
  id: number;
  name: string;
  age: number;
  active: boolean;
}

type OnlyNumbers = PickByType<Mixed, number>;
// Type: { id: number; age: number; }

4. Tipos de Literais de Template

Propósito: Criar tipos baseados em strings com correspondência de padrões e transformação.

Literal de Template Básico:

type EventName = "click" | "focus" | "blur";
type EventHandler = `on${Capitalize<EventName>}`;
// Type: "onClick" | "onFocus" | "onBlur"

Manipulação de Strings:

type UppercaseGreeting = Uppercase<"hello">; // "HELLO"
type LowercaseGreeting = Lowercase<"HELLO">; // "hello"
type CapitalizedName = Capitalize<"john">; // "John"
type UncapitalizedName = Uncapitalize<"John">; // "john"

Construção de Caminhos:

type Path<T> = T extends object
  ? {

…