Dominando los Tipos de Utilidad de TypeScript: Una Guía Práctica para Desarrolladores Globales

TypeScript ofrece un potente conjunto de tipos de utilidad incorporados que pueden mejorar significativamente la seguridad de tipos, la legibilidad y la mantenibilidad de tu código. Estos tipos de utilidad son esencialmente transformaciones de tipo predefinidas que puedes aplicar a tipos existentes, ahorrándote la escritura de código repetitivo y propenso a errores. Esta guía explorará varios tipos de utilidad con ejemplos prácticos que resuenan con desarrolladores de todo el mundo.

¿Por Qué Usar Tipos de Utilidad?

Los tipos de utilidad abordan escenarios comunes de manipulación de tipos. Al aprovecharlos, puedes:

• Reducir el código repetitivo (boilerplate): Evita escribir definiciones de tipo repetitivas.
• Mejorar la seguridad de tipos: Asegura que tu código se adhiera a las restricciones de tipo.
• Aumentar la legibilidad del código: Haz que tus definiciones de tipo sean más concisas y fáciles de entender.
• Incrementar la mantenibilidad: Simplifica las modificaciones y reduce el riesgo de introducir errores.

Tipos de Utilidad Esenciales

Partial

Partial construye un tipo donde todas las propiedades de T se establecen como opcionales. Esto es particularmente útil cuando quieres crear un tipo para actualizaciones parciales u objetos de configuración.

Ejemplo:

Imagina que estás construyendo una plataforma de comercio electrónico con clientes de diversas regiones. Tienes un tipo Customer:

interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  preferences?: {
    language: string;
    currency: string;
  }
}

Al actualizar la información de un cliente, es posible que no quieras requerir todos los campos. Partial te permite definir un tipo donde todas las propiedades de Customer son opcionales:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... implementación para actualizar el cliente con el ID dado
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // Válido
updateCustomer("456", { address: { city: "London" } }); // Válido

Readonly

Readonly construye un tipo donde todas las propiedades de T se establecen como readonly (solo lectura), evitando su modificación después de la inicialización. Esto es valioso para garantizar la inmutabilidad.

Ejemplo:

Considera un objeto de configuración para tu aplicación global:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Versión añadida
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

Para evitar la modificación accidental de la configuración después de la inicialización, puedes usar Readonly:

type ReadonlyAppConfig = Readonly<AppConfig>;

const readonlyConfig: ReadonlyAppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

// readonlyConfig.apiUrl = "https://newapi.example.com"; // Error: No se puede asignar a 'apiUrl' porque es una propiedad de solo lectura.

Pick

Pick construye un tipo seleccionando el conjunto de propiedades K de T, donde K es una unión de tipos literales de cadena que representan los nombres de las propiedades que deseas incluir.

Ejemplo:

Digamos que tienes una interfaz Event con varias propiedades:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

Si solo necesitas title, location y startTime para un componente de visualización específico, puedes usar Pick:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Event: ${event.title} at ${event.location} on ${event.startTime}`);
}

Omit

Omit construye un tipo excluyendo el conjunto de propiedades K de T, donde K es una unión de tipos literales de cadena que representan los nombres de las propiedades que deseas excluir. Es lo opuesto a Pick.

Ejemplo:

Usando la misma interfaz Event, si quieres crear un tipo para nuevos eventos, podrías querer excluir la propiedad id, que típicamente es generada por el backend:

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... implementación para crear un nuevo evento
}

Record

Record construye un tipo de objeto cuyas claves de propiedad son K y cuyos valores de propiedad son T. K puede ser una unión de tipos literales de cadena, tipos literales de número o un símbolo. Esto es perfecto para crear diccionarios o mapas.

Ejemplo:

Imagina que necesitas almacenar traducciones para la interfaz de usuario de tu aplicación. Puedes usar Record para definir un tipo para tus traducciones:

type Translations = Record<string, string>;

const enTranslations: Translations = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our platform!"
};

const frTranslations: Translations = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre plateforme !"
};

function translate(key: string, language: string): string {
  const translations = language === "en" ? enTranslations : frTranslations; //Simplificado
  return translations[key] || key; // Se recurre a la clave si no se encuentra una traducción
}

console.log(translate("hello", "en")); // Salida: Hello
console.log(translate("hello", "fr")); // Salida: Bonjour
console.log(translate("nonexistent", "en")); // Salida: nonexistent

Exclude

Exclude construye un tipo excluyendo de T todos los miembros de la unión que son asignables a U. Es útil para filtrar tipos específicos de una unión.

Ejemplo:

Podrías tener un tipo que represente diferentes tipos de eventos:

type EventType = "concert" | "conference" | "workshop" | "webinar";

Si quieres crear un tipo que excluya los eventos de tipo "webinar", puedes usar Exclude:

type PhysicalEvent = Exclude<EventType, "webinar">;

// PhysicalEvent es ahora "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Attending a ${event}`);
}

// attendPhysicalEvent("webinar"); // Error: El argumento de tipo '"webinar"' no es asignable al parámetro de tipo '"concert" | "conference" | "workshop"'.

attendPhysicalEvent("concert"); // Válido

Extract

Extract construye un tipo extrayendo de T todos los miembros de la unión que son asignables a U. Es lo opuesto a Exclude.

Ejemplo:

Usando el mismo EventType, puedes extraer el tipo de evento webinar:

type OnlineEvent = Extract<EventType, "webinar">;

// OnlineEvent es ahora "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Attending a ${event} online`);
}

attendOnlineEvent("webinar"); // Válido
// attendOnlineEvent("concert"); // Error: El argumento de tipo '"concert"' no es asignable al parámetro de tipo '"webinar"'.

NonNullable

NonNullable construye un tipo excluyendo null y undefined de T.

Ejemplo:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString es ahora string

function processString(str: DefinitelyString): void {
  console.log(str.toUpperCase());
}

// processString(null); // Error: El argumento de tipo 'null' no es asignable al parámetro de tipo 'string'.
// processString(undefined); // Error: El argumento de tipo 'undefined' no es asignable al parámetro de tipo 'string'.
processString("hello"); // Válido

ReturnType

ReturnType construye un tipo que consiste en el tipo de retorno de la función T.

Ejemplo:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type Greeting = ReturnType<typeof greet>;

// Greeting es ahora string

const message: Greeting = greet("World");

console.log(message);

Parameters

Parameters construye un tipo tupla a partir de los tipos de los parámetros de un tipo de función T.

Ejemplo:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Event: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams es ahora [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters

ConstructorParameters construye un tipo tupla o array a partir de los tipos de los parámetros de un tipo de función constructora T. Infiere los tipos de los argumentos que deben pasarse al constructor de una clase.

Ejemplo:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams es ahora [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // Salida: Hello, World

Required

Required construye un tipo que consiste en todas las propiedades de T establecidas como requeridas. Hace que todas las propiedades opcionales sean requeridas.

Ejemplo:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile es ahora { name: string; age: number; email: string; }

const completeProfile: RequiredUserProfile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Error: La propiedad 'age' falta en el tipo '{ name: string; }' pero es requerida en el tipo 'Required'.

Tipos de Utilidad Avanzados

Tipos Literales de Plantilla

Los tipos literales de plantilla te permiten construir nuevos tipos literales de cadena concatenando tipos literales de cadena existentes, tipos literales de número y más. Esto permite una potente manipulación de tipos basada en cadenas.

Ejemplo:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL es ahora "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

function makeRequest(url: RequestURL): void {
  console.log(`Making request to ${url}`);
}

makeRequest("GET /api/users"); // Válido
// makeRequest("INVALID /api/users"); // Error

Tipos Condicionales

Los tipos condicionales te permiten definir tipos que dependen de una condición expresada como una relación de tipos. Usan la palabra clave infer para extraer información de tipo.

Ejemplo:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// Si T es una Promise, entonces el tipo es U; de lo contrario, el tipo es T.

async function fetchData(): Promise<number> {
  return 42;
}


type Data = UnwrapPromise<ReturnType<typeof fetchData>>;

// Data es ahora number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Requerido
  city?: string; // Opcional
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Valores iniciales del formulario (campos opcionales)
type InitialFormValues = Partial<FormData>;

// Valores actualizados del formulario (algunos campos pueden faltar)
type UpdatedFormValues = Partial<FormData>;

// Campos requeridos para el envío
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Usa estos tipos en tus componentes de formulario
function initializeForm(initialValues: InitialFormValues): void { }
function updateForm(updates: UpdatedFormValues): void {}
function submitForm(data: RequiredForSubmission): void {}


const initialForm: InitialFormValues = { newsletterSubscription: true };

const updateFormValues: UpdatedFormValues = {
    firstName: "John",
    lastName: "Doe"
};

// const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test" }; // ERROR: Falta 'country' 
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //OK

interface APIResponse {
  user_id: string;
  first_name: string;
  last_name: string;
  email_address: string;
  profile_picture_url: string;
  is_active: boolean;
}

// Transforma la respuesta de la API a un formato más legible
type UserData = {
  id: string;
  fullName: string;
  email: string;
  avatar: string;
  active: boolean;
};

function transformApiResponse(response: APIResponse): UserData {
  return {
    id: response.user_id,
    fullName: `${response.first_name} ${response.last_name}`,
    email: response.email_address,
    avatar: response.profile_picture_url,
    active: response.is_active
  };
}

function fetchAndTransformData(url: string): Promise<UserData> {
    return fetch(url)
        .then(response => response.json())
        .then(data => transformApiResponse(data));
}


// Incluso puedes forzar el tipo mediante:

function saferTransformApiResponse(response: APIResponse): UserData {
    const {user_id, first_name, last_name, email_address, profile_picture_url, is_active} = response;
    const transformed: UserData = {
        id: user_id,
        fullName: `${first_name} ${last_name}`,
        email: email_address,
        avatar: profile_picture_url,
        active: is_active
    };

    return transformed;
}

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // URL de API opcional para diferentes entornos
  timeout?: number;  //Opcional
}

// Configuración por defecto
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Función para fusionar la configuración del usuario con la configuración por defecto
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Usa la configuración fusionada en tu aplicación
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);