0Pricing
Frontend Academy · Lección

Tipos primitivos, uniones y alias de tipos

Anote variables con string, number, boolean y arrays. Cree tipos de unión con | y asígneles nombres legibles mediante alias de tipos.

Tipos primitivos, uniones y alias de tipos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Anotación de variables

Añada anotaciones de tipo con dos puntos después del nombre de la variable. TypeScript infiere los tipos cuando es posible; añada anotaciones explícitas cuando la inferencia no sea clara o con fines de documentación.

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Tipos primitivos

Los tipos primitivos de TypeScript corresponden a los primitivos de JavaScript: string, number (sin distinción entre enteros y decimales), boolean, null, undefined, symbol, bigint.

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

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Arrays

Defina el tipo de un array con Type[] o con el genérico Array<Type>. Ambos son equivalentes.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Tipos unión: |

Los tipos unión permiten que una variable contenga uno de varios tipos. Utilice el operador pipe |. TypeScript restringe el tipo dentro de las condicionales.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Tipos literales

Puede utilizar valores literales de tipo string, number o boolean como tipos. Combinados con uniones, crean un conjunto fijo de valores permitidos, similar a un enum.

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Alias de tipos: type

La palabra clave type crea un alias de tipo: un nombre reutilizable para cualquier tipo. Los alias funcionan con primitivos, uniones, objetos, tuplas y tipos compuestos complejos.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Tipos de objeto con type

Describa las estructuras de los objetos con alias de tipos. Marque las propiedades como opcionales con ? y como de solo lectura con readonly.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Tipos intersección: &

Combine varios tipos con el operador &. El tipo resultante tiene todas las propiedades de ambos. Es útil para ampliar tipos.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

El tipo any — vía de escape

any excluye un valor de la comprobación de tipos. Es contagioso: los valores derivados de any también son any. Utilícelo como último recurso durante una migración, nunca como solución a largo plazo.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

El tipo unknown — alternativa segura a any

unknown es la contraparte con seguridad de tipos de any. No puede utilizar un valor unknown sin restringir primero su tipo. Esto le obliga a validar los datos externos.

Tuplas — arrays de longitud fija

Una tupla es un array de longitud fija en el que cada posición tiene un tipo conocido.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Comprobación rápida

¿Qué característica de TypeScript permite que una función acepte un string o un number?

Resumen: tipos primitivos, uniones y alias

Tipos primitivos: string, number, boolean, null, undefined. Arrays: Type[]. Tipos unión: A | B. Tipos literales para conjuntos fijos de valores. Alias type para nombres de tipos reutilizables. Propiedades opcionales con ?. readonly para propiedades inmutables. Prefiera unknown en lugar de any para los datos externos.

Preguntas frecuentes

¿La lección «Tipos primitivos, uniones y alias de tipos» es gratis?

Sí — el texto completo de «Tipos primitivos, uniones y alias de tipos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Tipos primitivos, uniones y alias de tipos»?

Anote variables con string, number, boolean y arrays. Cree tipos de unión con | y asígneles nombres legibles mediante alias de tipos. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Tipos primitivos, uniones y alias de tipos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Por qué TypeScript: los tipos detectan errores en compilación
  2. Tipos primitivos, uniones y alias de tipos
  3. Interfaces y tipos de objeto
  4. Compilar TS y tsconfig.json
← Volver a Frontend Academy