Tipos de Template Literal do TypeScript para APIs Type-Safe

Os tipos de template literal do TypeScript são um recurso poderoso introduzido no TypeScript 4.1 que permite realizar manipulação de strings a nível de tipo. Eles abrem um mundo de possibilidades para a criação de APIs altamente seguras e de fácil manutenção, permitindo que você capture erros em tempo de compilação que, de outra forma, só apareceriam em tempo de execução. Isso, por sua vez, leva a uma melhor experiência do desenvolvedor, refatoração mais fácil e um código mais robusto.

O que são Tipos de Template Literal?

Em sua essência, os tipos de template literal são tipos de string literal que podem ser construídos combinando tipos de string literal, tipos de união e variáveis de tipo. Pense neles como interpolação de strings para tipos. Isso permite que você crie novos tipos com base nos existentes, proporcionando um alto grau de flexibilidade e expressividade.

Aqui está um exemplo simples:

type Greeting = "Hello, World!";

type PersonalizedGreeting = `Hello, ${T}!`;

type MyGreeting = PersonalizedGreeting<"Alice">; // tipo MyGreeting = "Hello, Alice!"

Neste exemplo, PersonalizedGreeting é um tipo de template literal que recebe um parâmetro de tipo genérico T, que deve ser uma string. Em seguida, ele constrói um novo tipo interpolando a string literal "Hello, " com o valor de T e a string literal "!". O tipo resultante, MyGreeting, é "Hello, Alice!".

Benefícios de Usar Tipos de Template Literal

• Segurança de Tipos Aprimorada: Capture erros em tempo de compilação em vez de em tempo de execução.
• Manutenibilidade de Código Melhorada: Torna seu código mais fácil de entender, modificar e refatorar.
• Melhor Experiência do Desenvolvedor: Fornece autocompletar e mensagens de erro mais precisas e úteis.
• Geração de Código: Permite a criação de geradores de código que produzem código com segurança de tipos.
• Design de API: Impõe restrições ao uso da API e simplifica o manuseio de parâmetros.

Casos de Uso do Mundo Real

1. Definição de Endpoint de API

Os tipos de template literal podem ser usados para definir tipos de endpoint de API, garantindo que os parâmetros corretos sejam passados para a API e que a resposta seja tratada corretamente. Considere uma plataforma de e-commerce que suporte várias moedas, como USD, EUR e JPY.

type Currency = "USD" | "EUR" | "JPY";
type ProductID = string; //Na prática, este poderia ser um tipo mais específico

type GetProductEndpoint = `/products/${ProductID}/${C}`;

type USDEndpoint = GetProductEndpoint<"USD">; // tipo USDEndpoint = "/products/${string}/USD"

Este exemplo define um tipo GetProductEndpoint que recebe uma moeda como parâmetro de tipo. O tipo resultante é um tipo de string literal que representa o endpoint da API para recuperar um produto na moeda especificada. Usando essa abordagem, você pode garantir que o endpoint da API seja sempre construído corretamente e que a moeda correta seja usada.

2. Validação de Dados

Os tipos de template literal podem ser usados para validar dados em tempo de compilação. Por exemplo, você poderia usá-los para validar o formato de um número de telefone ou endereço de e-mail. Imagine que você precisa validar números de telefone internacionais que podem ter formatos diferentes com base no código do país.

type CountryCode = "+1" | "+44" | "+81"; // EUA, Reino Unido, Japão
type PhoneNumber = `${C}-${N}`;

type ValidUSPhoneNumber = PhoneNumber<"+1", "555-123-4567">; // tipo ValidUSPhoneNumber = "+1-555-123-4567"

//Nota: Validações mais complexas podem exigir a combinação de tipos de template literal com tipos condicionais.

Este exemplo mostra como você poderia criar um tipo básico de número de telefone que impõe um formato específico. Validações mais sofisticadas podem envolver o uso de tipos condicionais e padrões semelhantes a expressões regulares dentro do template literal.

3. Geração de Código

Os tipos de template literal podem ser usados para gerar código em tempo de compilação. Por exemplo, você poderia usá-los para gerar nomes de componentes React com base no nome dos dados que eles exibem. Um padrão comum é gerar nomes de componentes seguindo o padrão `<Entity>Details`.

type Entity = "User" | "Product" | "Order";
type ComponentName = `${E}Details`;

type UserDetailsComponent = ComponentName<"User">; // tipo UserDetailsComponent = "UserDetails"

Isso permite que você gere automaticamente nomes de componentes que sejam consistentes e descritivos, reduzindo o risco de conflitos de nomenclatura e melhorando a legibilidade do código.

4. Manipulação de Eventos

Os tipos de template literal são excelentes para definir nomes de eventos de maneira segura, garantindo que os ouvintes de eventos sejam registrados corretamente e que os manipuladores de eventos recebam os dados esperados. Considere um sistema onde os eventos são categorizados por módulo e tipo de evento, separados por dois pontos.

type Module = "user" | "product" | "order";
type EventType = "created" | "updated" | "deleted";
type EventName = `${M}:${E}`;

type UserCreatedEvent = EventName<"user", "created">; // tipo UserCreatedEvent = "user:created"

interface EventMap {
  [key: EventName]: (data: any) => void; //Exemplo: O tipo para manipulação de eventos
}

Este exemplo demonstra como criar nomes de eventos que seguem um padrão consistente, melhorando a estrutura geral e a segurança de tipos do sistema de eventos.

Técnicas Avançadas

1. Combinando com Tipos Condicionais

Os tipos de template literal podem ser combinados com tipos condicionais para criar transformações de tipo ainda mais sofisticadas. Os tipos condicionais permitem definir tipos que dependem de outros tipos, permitindo realizar lógicas complexas a nível de tipo.

type ToUpperCase = S extends Uppercase ? S : Uppercase;

type MaybeUpperCase = Upper extends true ? ToUpperCase : S;

type Example = MaybeUpperCase<"hello", true>; // tipo Example = "HELLO"
type Example2 = MaybeUpperCase<"world", false>; // tipo Example2 = "world"

type MyObject = {
  name: string;
  age: number;
};

type AddPrefix = {
  [K in keyof T as `${Prefix}${string & K}`]: T[K];
};

type PrefixedObject = AddPrefix;
// type PrefixedObject = {
//    data_name: string;
//    data_age: number;
// }

type MyString = "hello world";

type CapitalizedString = Capitalize; // tipo CapitalizedString = "Hello world"

type UpperCasedString = Uppercase;   // tipo UpperCasedString = "HELLO WORLD"