Los tipos básicos en TypeScript son anotaciones que le dicen al compilador qué clase de dato puede guardar una variable.
Con ellos, el compilador detecta errores antes de que ejecutes tu código. Esto evita fallos en producción que son difíciles de rastrear.
Los cuatro tipos fundamentales
TypeScript incluye varios tipos primitivos. Los más usados en proyectos reales son cuatro: string, number, boolean y array.
| Tipo | Descripción | Ejemplo de valor |
|---|---|---|
string |
Texto | "Liverpool" |
number |
Número entero o decimal | 18500 |
boolean |
Verdadero o falso | true |
array |
Lista de valores | [1, 2, 3] |
any |
Cualquier tipo (evítalo) | "hola", 42, true |
void |
Sin valor de retorno | Funciones sin return |
Cada tipo tiene un propósito claro. Mezclarlos sin control genera bugs silenciosos.
Sintaxis para declarar tipos
La forma general es:
nombreVariable: Tipo = valor;
El : Tipo se llama anotación de tipo. Va entre el nombre de la variable y el signo =.
let empresa: string = "Bimbo";
let salario: number = 18500;
let activo: boolean = true;
let productos: string[] = ["Pan Blanco", "Gansito", "Marinela"];
Eso es todo. La sintaxis no es complicada.
Ejemplos prácticos
Ejemplo 1 — Variables simples
Imagina que trabajas en el área de recursos humanos de FEMSA. Necesitas guardar datos de un empleado.
let nombreEmpleado: string = "Carlos Mendoza";
let puesto: string = "Analista de Logística";
let salarioMensual: number = 22000;
let esDePlanta: boolean = true;
console.log(nombreEmpleado); // Carlos Mendoza
console.log(salarioMensual); // 22000
console.log(esDePlanta); // true
Si intentas asignar un número donde se espera texto, TypeScript te detiene:
nombreEmpleado = 99; // ❌ Error: Type 'number' is not assignable to type 'string'
Ese error aparece en tu editor antes de compilar. Ahorras tiempo de depuración.
Ejemplo 2 — Arrays tipados
Mercado Libre maneja catálogos de productos. Un array tipado garantiza que cada elemento sea del tipo correcto.
let categorias: string[] = ["Electrónica", "Ropa", "Hogar", "Deportes"];
let precios: number[] = [1200, 350, 890, 650];
let disponible: boolean[] = [true, false, true, true];
console.log(categorias[0]); // Electrónica
console.log(precios[2]); // 890
Si agregas un valor del tipo incorrecto, el compilador lo rechaza:
categorias.push(404); // ❌ Error: Argument of type 'number' is not assignable to parameter of type 'string'
Así proteges la integridad de tus listas desde el principio.
Ejemplo 3 — Función con tipos en parámetros y retorno
En Liverpool, una función puede calcular el precio con descuento. Tipas los parámetros y el valor de retorno.
function calcularDescuento(precio: number, porcentaje: number): number {
return precio - (precio * porcentaje / 100);
}
let precioFinal: number = calcularDescuento(3500, 15);
console.log("Precio con descuento: $" + precioFinal); // Precio con descuento: $2,975
El : number al final de los paréntesis indica el tipo de retorno. Si la función devuelve un string por error, TypeScript lo detecta.
function calcularDescuento(precio: number, porcentaje: number): number {
return "gratis"; // ❌ Error: Type 'string' is not assignable to type 'number'
}
El tipo any y por qué debes evitarlo
any desactiva la revisión de tipos para esa variable. Es como apagar el antivirus: puedes hacerlo, pero asumes todos los riesgos.
let dato: any = "texto";
dato = 123; // No hay error
dato = true; // No hay error
dato = [1,2,3]; // No hay error
El problema es que TypeScript deja de protegerte. Los errores solo aparecen en tiempo de ejecución, no durante la compilación.
Usa any únicamente cuando migras código JavaScript antiguo y aún no conoces el tipo correcto. En código nuevo, siempre define el tipo explícito.
Inferencia de tipos
TypeScript puede inferir el tipo automáticamente si asignas un valor al declarar la variable.
let ciudad = "Monterrey"; // TypeScript infiere: string
let codigo = 64000; // TypeScript infiere: number
let abierto = false; // TypeScript infiere: boolean
No necesitas escribir la anotación si el valor inicial es claro. Aun así, en equipos grandes es mejor ser explícito. Facilita la lectura del código.
El tipo void en funciones
Cuando una función no devuelve ningún valor, su tipo de retorno es void.
function mostrarBienvenida(nombre: string): void {
console.log("Bienvenido, " + nombre);
}
mostrarBienvenida("Ana"); // Bienvenido, Ana
Si intentas usar el resultado de una función void, TypeScript te avisa:
let resultado = mostrarBienvenida("Ana");
console.log(resultado); // ❌ 'resultado' es de tipo 'void'
Esto previene errores lógicos donde usas el retorno de una función que no devuelve nada útil.
Errores comunes
Error 1 — Mezclar tipos sin querer
let totalVentas: number = 45000;
totalVentas = "cuarenta y cinco mil"; // ❌ Error de tipo
Esto ocurre cuando recibes datos de una fuente externa y no los conviertes antes de asignarlos. Usa Number() o parseInt() para convertir strings a números.
let valorTexto: string = "45000";
let totalVentas: number = Number(valorTexto); // ✅ Correcto
Error 2 — Declarar arrays sin tipo y luego mezclar valores
let precios = [100, 200, "trescientos"]; // ❌ TypeScript infiere (number | string)[]
Si no defines el tipo del array desde el inicio, TypeScript acepta una mezcla. Eso genera comportamientos inesperados al procesar los datos.
Declara siempre el tipo explícito del array:
let precios: number[] = [100, 200, 300]; // ✅ Solo números
Error 3 — Olvidar el tipo de retorno en funciones
function obtenerSalario(empleadoId: number) {
if (empleadoId === 1) return 18500;
return "no encontrado"; // TypeScript infiere (number | string)
}
Cuando una función puede devolver tipos distintos, el compilador infiere una unión. Eso complica el código que usa la función. Define el tipo de retorno desde el principio y maneja los casos de error con excepciones o valores centinela del mismo tipo.
function obtenerSalario(empleadoId: number): number {
if (empleadoId === 1) return 18500;
return 0; // ✅ Siempre devuelve number
}
Tabla de referencia rápida
| Situación | Tipo correcto | Ejemplo |
|---|---|---|
| Nombre de persona o empresa | string |
"FEMSA" |
| Precio o cantidad | number |
12500 |
| Activar o desactivar algo | boolean |
false |
| Lista de textos | string[] |
["a", "b"] |
| Lista de números | number[] |
[1, 2, 3] |
| Función sin retorno | void |
— |
| Tipo desconocido (evitar) | any |
— |
Usa esta tabla como referencia mientras escribes tus primeros archivos .ts.