LAS PREGUNTAS MÁS COMUNES DE TYPESCRIPT EXPLICADAS

November 13, 2025

Introducción a las preguntas comunes de TypeScript

TypeScript, un superconjunto tipado de JavaScript, ha ganado popularidad en el desarrollo web por su capacidad para detectar errores en tiempo de compilación y mejorar la mantenibilidad del código. Sin embargo, su sistema de tipos puede generar dudas, especialmente para los principiantes. Este tutorial aborda las preguntas más recurrentes sobre TypeScript en plataformas como Stack Overflow, ofreciendo explicaciones claras y ejemplos prácticos para profundizar en su uso. Desde la diferencia entre interfaces y tipos hasta la asignación dinámica de propiedades, este artículo está diseñado para programadores que buscan dominar TypeScript en proyectos reales.

Diferencia entre interfaces y tipos en TypeScript

Una de las dudas más comunes es diferencia entre interfaces y tipos. Aunque ambos se usan para definir estructuras de datos, tienen diferencias clave. Las interfaces están diseñadas específicamente para describir la forma de objetos, mientras que los tipos (o alias de tipo) son más flexibles y pueden representar primitivos, uniones y tuplas.

Por ejemplo, considera la definición de un tipo Humano:

type Humano = {
    nombre: string;
    piernas: number;
    cabeza: number;
};

interface Humano {
    nombre: string;
    piernas: number;
    cabeza: number;
}

Ambas definiciones son válidas, pero los tipos permiten mayor versatilidad. Por ejemplo, un tipo puede definir un primitivo o una unión:

type Nombre = string;
type SexoHumano = { nombre: string } | { piernas: number };

Las interfaces, en cambio, solo describen objetos. Otra diferencia importante es que las interfaces pueden extenderse al declararlas múltiples veces, combinando sus propiedades:

interface Humano {
    nombre: string;
}

interface Humano {
    piernas: number;
}

Esto resulta en una interfaz Humano con nombre y piernas. Con los tipos, esto genera un error de identificador duplicado, por lo que se debe usar una intersección:

type HumanoConNombre = { nombre: string };
type HumanoConPiernas = { piernas: number };
type Humano = HumanoConNombre & HumanoConPiernas;

Las interfaces usan la palabra clave extends, mientras que los tipos requieren intersecciones (&). Por ejemplo, extender una interfaz:

interface HumanoConNombre {
    nombre: string;
}

interface Humano extends HumanoConNombre {
    piernas: number;
    ojos: number;
}

En general, los tipos son preferibles por su flexibilidad, aunque las interfaces son útiles para extender objetos de forma declarativa. La elección depende de las necesidades del proyecto, pero mantener consistencia es clave.

Operador de exclamación en TypeScript

El operador !, conocido como operador de no nulo, se utiliza para afirmar que un valor no es null ni undefined. Esto es útil cuando el compilador de TypeScript detecta que una variable podría ser null o undefined, pero el desarrollador sabe que no lo es.

Considera este ejemplo:

function duplicar(texto: string | null) {
    return texto.concat(texto);
}

Aquí, TypeScript genera un error porque texto podría ser null. Una solución rápida, aunque no siempre recomendada, es usar !:

function duplicar(texto: string | null) {
    return texto!.concat(texto!);
}

Sin embargo, esto puede ocultar errores si texto efectivamente es null. Una mejor práctica es verificar explícitamente:

function duplicar(texto: string | null) {
    if (texto) {
        return texto.concat(texto);
    }
    return "";
}

En componentes de React, el operador ! aparece frecuentemente con referencias. Por ejemplo:

const MiComponente = () => {
    const ref = React.createRef<HTMLInputElement>();
    const irAInput = () => ref.current!.scrollIntoView();
    return (
        <div>
            <input ref={ref} />
            <button onClick={irAInput}>Ir al input</button>
        </div>
    );
};

Aquí, ref.current! asume que ref.current no es null. Una alternativa más segura es:

const irAInput = () => {
    if (ref.current) {
        ref.current.scrollIntoView();
    }
};

Si el uso de ! es inevitable, considera lanzar un error para mayor seguridad:

const irAInput = () => {
    if (!ref.current) {
        throw new Error("Referencia de input no encontrada");
    }
    ref.current.scrollIntoView();
};

El operador ! no genera código adicional en JavaScript; simplemente silencia al compilador. Úsalo con precaución y prefiere soluciones que verifiquen explícitamente los valores.

Archivos .d.ts en TypeScript

Los archivos .d.ts, o archivos de declaración de tipos, describen la estructura de módulos sin incluir implementación. Estos archivos son esenciales para que TypeScript entienda las APIs de bibliotecas y objetos nativos como Math o window.

Por ejemplo, el método Math.ceil está definido en un archivo lib.es5.d.ts:

interface Math {
    ceil(x: number): number;
}

Esto permite a TypeScript detectar errores como:

const cantidad = Math.ceil(14.99); // Válido
const otraCantidad = Math.ciil(14.99); // Error: 'ciil' no existe

Para bibliotecas externas, los tipos pueden venir incluidos en el paquete o estar disponibles en el repositorio DefinitelyTyped bajo el alcance @types. Por ejemplo, para instalar tipos para react:

npm install --save-dev @types/react

Si una biblioteca no tiene tipos, puedes crear un archivo .d.ts para silenciar errores:

// untyped-module.d.ts
declare module "some-untyped-module";

Esto tipifica el módulo como any, perdiendo soporte de tipos, pero evita errores del compilador. La mejor práctica es contribuir con un archivo de declaración completo o reportar la falta de tipos al mantenedor de la biblioteca.

Asignar propiedades al objeto window en TypeScript

Para agregar propiedades personalizadas al objeto window, es necesario extender su interfaz. Por ejemplo, al intentar:

window.__MI_APLICACION__ = "nombre";

TypeScript reportará un error porque __MI_APLICACION__ no está definido en la interfaz Window. La solución es declarar una extensión en un archivo .d.ts:

// window.d.ts
interface Window {
    __MI_APLICACION__: string;
}

Luego, el código funciona sin errores:

window.__MI_APLICACION__ = "nombre";
console.log(window.__MI_APLICACION__);

Esto asegura que TypeScript reconozca la nueva propiedad y valide su tipo. Por ejemplo, asignar un número generará un error:

window.__MI_APLICACION__ = 42; // Error: Tipo incorrecto

Esta técnica aprovecha la capacidad de las interfaces para extenderse declarativamente, como se explicó anteriormente.

Funciones fuertemente tipadas como parámetros

TypeScript permite tipar funciones pasadas como parámetros, lo que garantiza seguridad en su uso. Por ejemplo, considera una función que acepta un callback:

function hablar(callback: (valor: string) => void) {
    const frase = "Hola mundo";
    alert(callback(frase));
}

Aquí, el callback está tipado para aceptar un string y no devolver nada (void). También puedes usar un alias de tipo:

type Callback = (valor: string) => void;

function hablar(callback: Callback) {
    const frase = "Hola mundo";
    alert(callback(frase));
}

Si el callback devuelve un valor, especifica el tipo de retorno:

type Callback = (valor: string) => { resultado: string };

function hablar(callback: Callback) {
    const frase = "Hola mundo";
    alert(callback(frase).resultado);
}

Evita usar any como tipo de retorno; en su lugar, usa void para funciones sin retorno o el tipo específico si devuelve algo. Esto mejora la claridad y seguridad del código.

Solucionar error de módulo sin declaración

El error módulo sin declaración ocurre cuando TypeScript no encuentra tipos para una biblioteca. La solución, como se mencionó en la sección de archivos .d.ts, es crear un archivo de declaración:

// untyped-module.d.ts
declare module "some-untyped-module";

Esto tipifica el módulo como any, silenciando el error, pero sin soporte de tipos. Para una solución más robusta, considera escribir un archivo de declaración detallado o buscar tipos en DefinitelyTyped:

npm install --save-dev @types/some-untyped-module

Si los tipos no existen, reporta el problema al mantenedor de la biblioteca o contribuye con un archivo .d.ts propio.

Asignar propiedades dinámicamente a objetos

Asignar propiedades dinámicamente a un objeto puede generar errores en TypeScript si el tipo no lo permite. Por ejemplo:

const organizacion = {};
organizacion.nombre = "Ejemplo"; // Error: 'nombre' no existe

TypeScript infiere que organizacion es de tipo {}, un objeto vacío sin propiedades. Para solucionar esto, puedes:

Tipar explícitamente al declarar:

type Org = { nombre: string };
const organizacion: Org = { nombre: "Ejemplo" };

Usar una firma de índice:

type Org = { [clave: string]: string };
const organizacion: Org = {};
organizacion.nombre = "Ejemplo";

Usar el tipo utilitario Record:

const organizacion: Record<string, string> = {};
organizacion.nombre = "Ejemplo";

El tipo Record<Claves, Tipo> es ideal para objetos con propiedades dinámicas, donde Claves define las claves permitidas (por ejemplo, string) y Tipo el tipo de los valores. La firma de índice ofrece flexibilidad similar, pero Record es más conciso y claro.

Conclusiones

TypeScript mejora la robustez del código JavaScript al introducir un sistema de tipos estáticos, pero su aprendizaje puede presentar desafíos. Este tutorial ha abordado las preguntas más comunes sobre TypeScript en Stack Overflow, desde la diferencia entre interfaces y tipos hasta la gestión de propiedades dinámicas. Con ejemplos prácticos, hemos explorado cómo usar el operador de no nulo, archivos de declaración, extensiones del objeto window, funciones tipadas y soluciones para errores de módulos. Al aplicar estas técnicas, los desarrolladores pueden escribir código más seguro y mantenible, aprovechando al máximo las capacidades de TypeScript. Mantener consistencia en la elección de tipos o interfaces y priorizar soluciones explícitas sobre atajos como el operador ! son prácticas recomendadas para proyectos robustos.