Tutorial TypeScript: Tipos de datos, variables y constantes

Tipos primitivos (string, number, boolean)

Los tipos primitivos en TypeScript constituyen los bloques fundamentales para construir aplicaciones. A diferencia de JavaScript, donde los tipos son dinámicos, TypeScript nos permite definir explícitamente el tipo de cada valor, lo que proporciona mayor seguridad y ayuda a prevenir errores comunes durante el desarrollo.

String

El tipo string representa datos textuales o cadenas de caracteres. En TypeScript, podemos definir strings utilizando comillas simples, dobles o backticks (template literals).

// Declaración explícita de tipo string
let firstName: string = "John";
let lastName: string = 'Doe';

// Template literals (permiten interpolación)
let greeting: string = `Hello, ${firstName} ${lastName}!`;

Los template literals son especialmente útiles cuando necesitamos insertar variables dentro de un texto o crear strings multilínea:

let multiLine: string = `Este es un texto
que ocupa varias
líneas sin necesidad de concatenación`;

let age: number = 30;
let profile: string = `Nombre: ${firstName}
Edad: ${age} años`;

Number

TypeScript utiliza un único tipo number para representar tanto enteros como números decimales. Internamente, todos los números en TypeScript son valores de punto flotante.

// Enteros
let age: number = 30;
let negativeValue: number = -42;

// Decimales
let price: number = 19.99;
let pi: number = 3.14159;

// Notación científica
let largeNumber: number = 1.23e6; // 1,230,000

// Binarios, hexadecimales y octales
let binary: number = 0b1010;  // 10 en decimal
let hexadecimal: number = 0xFF; // 255 en decimal
let octal: number = 0o744;    // 484 en decimal

TypeScript también incluye valores especiales como NaN (Not a Number), Infinity y -Infinity:

let notANumber: number = NaN;
let infiniteValue: number = Infinity;

Boolean

El tipo boolean es uno de los más simples en TypeScript y solo puede tener dos valores: true o false. Es fundamental para expresiones condicionales y control de flujo.

let isActive: boolean = true;
let hasPermission: boolean = false;

// Uso en expresiones condicionales
if (isActive && hasPermission) {
    console.log("Usuario activo con permisos");
}

Los valores booleanos suelen ser el resultado de operaciones de comparación:

let age: number = 25;
let isAdult: boolean = age >= 18; // true

let name: string = "TypeScript";
let isLongName: boolean = name.length > 10; // false

Inferencia de tipos primitivos

Aunque TypeScript permite declarar tipos explícitamente, también puede inferir el tipo basándose en el valor asignado:

// TypeScript infiere automáticamente los tipos
let message = "Hello"; // Tipo inferido: string
let count = 10;        // Tipo inferido: number
let isEnabled = true;  // Tipo inferido: boolean

// Una vez inferido, el tipo no puede cambiar
message = "World";     // Correcto, sigue siendo string
// message = 42;       // Error: Type 'number' is not assignable to type 'string'

Tipo literal

TypeScript también permite definir tipos literales, que son subtipos específicos de los primitivos:

// El tipo de direction solo puede ser "north", "south", "east" o "west"
let direction: "north" | "south" | "east" | "west" = "north";

// Más adelante solo podemos asignar uno de esos valores específicos
direction = "west";    // Correcto
// direction = "up";   // Error: Type '"up"' is not assignable to type...

El problema de null y undefined

En TypeScript, null y undefined son tipos distintos, pero por defecto son subtipos de todos los demás tipos (a menos que se active la opción strictNullChecks):

// Sin strictNullChecks
let username: string = "admin";
username = null;      // Permitido por defecto
username = undefined; // Permitido por defecto

// Con strictNullChecks (recomendado)
// username = null;      // Error
// username = undefined; // Error

Es una buena práctica activar strictNullChecks en el archivo tsconfig.json para evitar errores relacionados con valores nulos.

Conversión entre tipos primitivos

A veces necesitamos convertir entre diferentes tipos primitivos:

// De string a number
let strValue: string = "42";
let numValue: number = parseInt(strValue); // 42
let floatValue: number = parseFloat("3.14"); // 3.14

// De number a string
let count: number = 100;
let countStr: string = count.toString(); // "100"
// Alternativa
let priceStr: string = String(19.99); // "19.99"

// A boolean
let emptyString: string = "";
let isEmptyString: boolean = Boolean(emptyString); // false
let nonZeroNumber: number = 42;
let isNonZero: boolean = Boolean(nonZeroNumber); // true

Los tipos primitivos en TypeScript proporcionan la base para construir tipos más complejos como arrays, objetos y clases, que exploraremos en las siguientes secciones.

Declarando variables con let y const

En TypeScript, la declaración de variables se realiza principalmente mediante dos palabras clave: let y const. Estas palabras clave, introducidas en ECMAScript 2015 (ES6), ofrecen ventajas significativas sobre el antiguo var y son fundamentales para escribir código TypeScript moderno y seguro.

La palabra clave let

La declaración con let permite crear variables cuyo valor puede ser modificado después de su inicialización. Su ámbito está limitado al bloque donde se declara, lo que evita problemas comunes de alcance que ocurrían con var.

let counter = 1;
counter = 2; // Permitido: podemos reasignar valores

if (true) {
    let scopedVariable = "Solo visible en este bloque";
    console.log(scopedVariable); // Funciona correctamente
}
// console.log(scopedVariable); // Error: scopedVariable no existe fuera del bloque

Podemos declarar variables con let especificando explícitamente su tipo:

let username: string = "developer123";
let score: number;

// Inicialización posterior
score = 85;

Una característica importante de let es que no permite redeclaraciones en el mismo ámbito:

let value = 10;
// let value = 20; // Error: no se puede redeclarar la variable 'value'

// Sin embargo, esto es válido en diferentes ámbitos
if (true) {
    let value = 20; // Esta es una variable diferente
    console.log(value); // 20
}
console.log(value); // 10

La palabra clave const

La declaración con const crea constantes, es decir, variables cuyo valor no puede ser reasignado después de su inicialización. Al igual que let, su ámbito está limitado al bloque donde se declara.

const API_KEY = "abc123xyz456";
// API_KEY = "newkey"; // Error: no se puede reasignar una constante

const MAX_ATTEMPTS: number = 3;
const DEFAULT_SETTINGS = {
    theme: "dark",
    notifications: true
};

Es importante entender que const solo impide la reasignación, pero no hace que los objetos sean inmutables:

const user = {
    name: "Alice",
    age: 28
};

// Esto es válido: modificamos una propiedad, no reasignamos la variable
user.age = 29;

// Esto no es válido: intentamos reasignar la variable completa
// user = { name: "Bob", age: 30 }; // Error

Para crear objetos verdaderamente inmutables, podemos usar utilidades como Object.freeze():

const FROZEN_CONFIG = Object.freeze({
    endpoint: "https://api.example.com",
    timeout: 3000
});

// FROZEN_CONFIG.timeout = 5000; // Error en tiempo de ejecución en modo estricto

Cuándo usar let vs const

La elección entre let y const depende de si necesitamos reasignar la variable:

• Usa const por defecto: Proporciona seguridad adicional al prevenir reasignaciones accidentales.
• Usa let cuando sea necesario: Solo cuando sepas que el valor de la variable cambiará.

// Uso recomendado de const
const PI = 3.14159;
const BASE_URL = "https://api.example.com";
const fetchData = () => {
    // Implementación...
};

// Casos donde let es apropiado
let currentScore = 0;
let isLoggedIn = false;

function countdown() {
    let seconds = 10;
    while (seconds > 0) {
        console.log(seconds);
        seconds--; // Necesitamos reasignar, así que usamos let
    }
}

Declaración e inicialización

En TypeScript, podemos separar la declaración de la inicialización cuando usamos let, pero const siempre requiere un valor inicial:

// Con let podemos declarar sin inicializar
let userId: string;
let isValid: boolean;

// Inicialización posterior
userId = "user_123";
isValid = true;

// Con const, la inicialización es obligatoria
// const apiVersion; // Error: falta el inicializador
const apiVersion: string = "v2.1";

Destructuración con let y const

La destructuración es una característica poderosa que funciona perfectamente con let y const:

// Destructuración de arrays
const coordinates = [10, 20];
const [x, y] = coordinates;
console.log(x); // 10

// Destructuración de objetos
const product = {
    id: "prod-123",
    price: 29.99,
    tags: ["electronics", "gadget"]
};

const { id, price } = product;
console.log(id); // "prod-123"

// Con let para variables que cambiarán
let { tags } = product;
tags = [...tags, "sale"]; // Creamos un nuevo array

Variables en bucles

En bucles, let es especialmente útil porque crea una nueva variable para cada iteración:

// Cada iteración tiene su propia variable 'i'
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

// Con arrays
const items = ["apple", "banana", "orange"];
for (let index = 0; index < items.length; index++) {
    const item = items[index]; // Usamos const porque no reasignamos
    console.log(`Item ${index + 1}: ${item}`);
}

Inferencia de tipos con let y const

TypeScript infiere los tipos de manera ligeramente diferente cuando usamos let versus const:

// Con let, infiere el tipo general
let direction = "north"; // tipo: string

// Con const para valores primitivos, puede inferir tipos literales
const direction = "north"; // tipo: "north" (tipo literal)

// Esto afecta a cómo podemos usar la variable después
direction = "south"; // Con let: permitido
// direction = "south"; // Con const: error, no se puede reasignar

Esta diferencia en la inferencia es especialmente útil cuando trabajamos con uniones de tipos literales y constantes.

Arrays, tuplas y objetos básicos

En TypeScript, las estructuras de datos como arrays, tuplas y objetos nos permiten organizar y manipular colecciones de valores de manera eficiente. Estas estructuras son fundamentales para desarrollar aplicaciones robustas y bien organizadas.

Arrays

Un array en TypeScript es una colección ordenada de elementos del mismo tipo o de tipos mixtos. Podemos definir arrays de varias formas:

// Array de números con tipo explícito
let numbers: number[] = [1, 2, 3, 4, 5];

// Sintaxis alternativa usando genéricos
let fruits: Array<string> = ["apple", "banana", "orange"];

// Array con inferencia de tipos
let scores = [85, 92, 78, 90]; // TypeScript infiere: number[]

Los arrays en TypeScript incluyen todos los métodos nativos de JavaScript para manipular sus elementos:

// Añadir elementos
numbers.push(6);       // [1, 2, 3, 4, 5, 6]
numbers.unshift(0);    // [0, 1, 2, 3, 4, 5, 6]

// Eliminar elementos
const lastNumber = numbers.pop();    // Elimina y devuelve 6
const firstNumber = numbers.shift(); // Elimina y devuelve 0

// Transformar arrays
const doubled = numbers.map(n => n * 2);  // [2, 4, 6, 8, 10]
const evenNumbers = numbers.filter(n => n % 2 === 0); // [2, 4]

// Buscar elementos
const hasThree = numbers.includes(3);  // true
const indexOfFour = numbers.indexOf(4); // 3

Arrays multidimensionales

TypeScript también soporta arrays multidimensionales, que son arrays de arrays:

// Matriz 2x3 (2 filas, 3 columnas)
let matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6]
];

// Acceder a elementos
const element = matrix[0][1]; // 2 (fila 0, columna 1)

// Recorrer una matriz
for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log(`Element at [${i}][${j}]: ${matrix[i][j]}`);
    }
}

Arrays de tipos mixtos

Podemos definir arrays que contengan elementos de diferentes tipos utilizando uniones:

// Array que puede contener números y strings
let mixed: (number | string)[] = [1, "two", 3, "four"];

// Array con tipos específicos en posiciones específicas
let userInfo: [number, string, boolean] = [1, "admin", true];
// Esto es en realidad una tupla, que veremos a continuación

Tuplas

Las tuplas son un tipo especial de array con un número fijo de elementos, donde cada elemento puede tener un tipo diferente. A diferencia de los arrays regulares, las tuplas definen exactamente qué tipo debe tener cada posición:

// Definición de una tupla: [id, nombre, activo]
let employee: [number, string, boolean] = [101, "John Doe", true];

// Acceso a elementos (con tipo correcto)
const id: number = employee[0];
const name: string = employee[1];
const isActive: boolean = employee[2];

Las tuplas son especialmente útiles cuando queremos representar un conjunto de valores relacionados con tipos diferentes pero en un orden específico:

// Tupla para representar coordenadas [x, y, z]
type Point3D = [number, number, number];
let position: Point3D = [10.5, 20.1, 15.0];

// Tupla para representar un registro [id, nombre, fecha]
type UserRecord = [number, string, Date];
let user: UserRecord = [1, "Alice", new Date()];

// Desestructuración de tuplas
const [userId, username, registrationDate] = user;
console.log(`Usuario ${username} registrado el ${registrationDate.toLocaleDateString()}`);

Tuplas con elementos opcionales

TypeScript permite definir tuplas con elementos opcionales utilizando el operador ?:

// Tupla con un elemento opcional al final
type Response = [number, string, boolean?];

// Ambas son válidas
const successResponse: Response = [200, "OK", true];
const errorResponse: Response = [404, "Not Found"]; // El tercer elemento es opcional

Tuplas de solo lectura

Para evitar modificaciones accidentales, podemos definir tuplas de solo lectura:

// Tupla inmutable
type ImmutableCoordinates = readonly [number, number];

const origin: ImmutableCoordinates = [0, 0];
// origin[0] = 10; // Error: no se puede asignar a '0' porque es una propiedad de solo lectura

Objetos básicos

Los objetos en TypeScript nos permiten agrupar datos relacionados en una estructura con propiedades nombradas. Podemos definir la forma de un objeto utilizando tipos o interfaces:

// Objeto con tipos inferidos
let product = {
    id: "prod-123",
    name: "Laptop",
    price: 999.99,
    inStock: true
};

// Objeto con tipo explícito usando type
type Product = {
    id: string;
    name: string;
    price: number;
    inStock: boolean;
};

let laptop: Product = {
    id: "prod-456",
    name: "Desktop",
    price: 1299.99,
    inStock: false
};

Propiedades opcionales

Podemos definir propiedades opcionales en objetos utilizando el operador ?:

type User = {
    id: number;
    name: string;
    email: string;
    phone?: string;    // Propiedad opcional
    address?: {        // Objeto anidado opcional
        street: string;
        city: string;
        zipCode: string;
    };
};

// Objeto válido sin propiedades opcionales
const user1: User = {
    id: 1,
    name: "John Smith",
    email: "john@example.com"
};

// Objeto con todas las propiedades
const user2: User = {
    id: 2,
    name: "Alice Johnson",
    email: "alice@example.com",
    phone: "555-1234",
    address: {
        street: "123 Main St",
        city: "Boston",
        zipCode: "02101"
    }
};

Propiedades de solo lectura

Para evitar modificaciones accidentales, podemos definir propiedades de solo lectura:

type Configuration = {
    readonly apiKey: string;
    readonly baseUrl: string;
    timeout: number;    // Esta propiedad sí puede modificarse
};

const config: Configuration = {
    apiKey: "abc123xyz",
    baseUrl: "https://api.example.com",
    timeout: 3000
};

// config.apiKey = "newkey"; // Error: no se puede asignar a 'apiKey' porque es de solo lectura
config.timeout = 5000;      // Esto sí está permitido

Objetos anidados

Los objetos pueden contener otros objetos, creando estructuras de datos jerárquicas:

type Department = {
    id: number;
    name: string;
};

type Employee = {
    id: number;
    name: string;
    department: Department;
    skills: string[];
    contact: {
        email: string;
        phone?: string;
    };
};

const developer: Employee = {
    id: 101,
    name: "Sarah Connor",
    department: {
        id: 3,
        name: "Engineering"
    },
    skills: ["TypeScript", "React", "Node.js"],
    contact: {
        email: "sarah@company.com",
        phone: "555-6789"
    }
};

// Acceso a propiedades anidadas
console.log(developer.department.name);  // "Engineering"
console.log(developer.skills[0]);        // "TypeScript"
console.log(developer.contact.email);    // "sarah@company.com"

Índices de firma

Los índices de firma permiten definir objetos con propiedades dinámicas:

// Objeto con propiedades string y valores number
type Dictionary = {
    [key: string]: number;
};

const scores: Dictionary = {
    math: 95,
    science: 88,
    history: 79
};

// Podemos añadir propiedades dinámicamente
scores.english = 92;

// Objeto con múltiples tipos de valores
type UserData = {
    id: number;
    name: string;
    [key: string]: string | number | boolean;
};

const userData: UserData = {
    id: 1,
    name: "John",
    age: 30,
    isAdmin: true,
    department: "IT"
};

Desestructuración de objetos

La desestructuración nos permite extraer propiedades de objetos de manera concisa:

const product = {
    id: "prod-789",
    name: "Smartphone",
    price: 699.99,
    specs: {
        cpu: "Octa-core",
        ram: "8GB",
        storage: "128GB"
    }
};

// Desestructuración básica
const { id, name, price } = product;
console.log(`${name}: $${price}`);  // "Smartphone: $699.99"

// Desestructuración con alias
const { name: productName, price: productPrice } = product;
console.log(`${productName} costs $${productPrice}`);

// Desestructuración anidada
const { specs: { cpu, ram } } = product;
console.log(`CPU: ${cpu}, RAM: ${ram}`);  // "CPU: Octa-core, RAM: 8GB"

Los arrays, tuplas y objetos son estructuras de datos fundamentales que nos permiten modelar información de manera organizada y tipada en TypeScript, proporcionando mayor seguridad y claridad en nuestro código.

Type inference: cómo TypeScript deduce tipos

La inferencia de tipos es una de las características más potentes de TypeScript, permitiendo escribir código más conciso sin sacrificar la seguridad de tipos. En lugar de declarar explícitamente cada tipo, TypeScript puede analizar el código y determinar automáticamente los tipos basándose en el contexto y los valores asignados.

Fundamentos de la inferencia de tipos

Cuando declaramos una variable sin especificar su tipo, TypeScript examina el valor inicial para determinar qué tipo debe tener:

// TypeScript infiere automáticamente el tipo 'string'
let message = "Hello, TypeScript";

// TypeScript infiere automáticamente el tipo 'number'
let count = 42;

// TypeScript infiere automáticamente el tipo 'boolean'
let isActive = true;

Una vez que TypeScript ha inferido un tipo para una variable, ese tipo se mantiene durante toda la vida de la variable, proporcionando las mismas garantías que si hubiéramos declarado el tipo explícitamente:

let username = "developer"; // Tipo inferido: string
username = "admin";         // Correcto: sigue siendo un string
// username = 123;          // Error: Type 'number' is not assignable to type 'string'

Inferencia en estructuras de datos complejas

TypeScript no se limita a inferir tipos primitivos; también puede deducir tipos en estructuras más complejas:

// Inferencia en arrays
let numbers = [1, 2, 3, 4];  // Tipo inferido: number[]

// Inferencia en objetos
let user = {
    id: 101,
    name: "Alice",
    isAdmin: false,
    joinDate: new Date()
};
// Tipo inferido: { id: number; name: string; isAdmin: boolean; joinDate: Date }

Para los objetos, TypeScript crea un tipo estructural que describe exactamente la forma del objeto, incluyendo el tipo de cada propiedad.

Inferencia contextual

La inferencia contextual ocurre cuando TypeScript usa el contexto en el que se encuentra una expresión para determinar su tipo:

// El parámetro 'event' se infiere como MouseEvent
document.addEventListener("click", event => {
    // TypeScript sabe que event.button es un número
    console.log(`Button clicked: ${event.button}`);
});

// El parámetro 'item' se infiere como string
["apple", "banana", "orange"].forEach(item => {
    // TypeScript sabe que item es un string
    console.log(item.toUpperCase());
});

Inferencia en funciones

TypeScript puede inferir los tipos de retorno de las funciones basándose en las sentencias return:

// Tipo de retorno inferido: number
function calculateTotal(price: number, quantity: number) {
    return price * quantity;
}

// Tipo de retorno inferido: string | undefined
function findUsername(id: number) {
    if (id < 0) {
        return undefined;
    }
    return `user_${id}`;
}

Sin embargo, los parámetros de función generalmente requieren anotaciones de tipo explícitas, ya que TypeScript no puede inferirlos solo desde el uso:

// Sin tipos explícitos, los parámetros se infieren como 'any'
function add(a, b) {
    return a + b;  // Podría ser concatenación de strings o suma de números
}

// Con tipos explícitos, el comportamiento es claro
function addNumbers(a: number, b: number) {
    return a + b;  // Siempre es una suma numérica
}

Inferencia de tipos literales

Cuando usamos const para declarar variables con valores primitivos, TypeScript infiere un tipo literal en lugar de un tipo general:

// Con let: tipo inferido es 'string'
let direction = "north";

// Con const: tipo inferido es el literal '"north"'
const direction = "north";

Esta diferencia es importante porque los tipos literales son más específicos y pueden usarse en contextos donde se requiere un valor exacto:

// Definimos una función que acepta solo direcciones específicas
function move(direction: "north" | "south" | "east" | "west") {
    // Implementación...
}

const dir = "north";  // Tipo: "north"
move(dir);            // Correcto

let someDir = "east"; // Tipo: string
// move(someDir);     // Error: Argument of type 'string' is not assignable to...

Inferencia en desestructuración

TypeScript infiere correctamente los tipos cuando usamos desestructuración:

// Desestructuración de objetos
const product = { id: "prod-1", price: 29.99, inStock: true };
const { id, price, inStock } = product;
// id se infiere como string, price como number, inStock como boolean

// Desestructuración de arrays
const coordinates = [10, 20] as const;
const [x, y] = coordinates;
// x e y se infieren como literales 10 y 20 respectivamente

Mejorando la inferencia con aserciones

A veces necesitamos ayudar a TypeScript a inferir un tipo más específico usando aserciones de tipo:

// TypeScript infiere 'HTMLElement | null'
const header = document.querySelector("header");

// Con aserción, especificamos un tipo más preciso
const header = document.querySelector("header") as HTMLHeaderElement;

También podemos usar el operador as const para convertir todo un objeto o array en un tipo literal inmutable:

// Sin as const: array de strings
const fruits = ["apple", "banana", "orange"];

// Con as const: tupla readonly de literales de string
const fruits = ["apple", "banana", "orange"] as const;
// Tipo: readonly ["apple", "banana", "orange"]

// Objeto con as const
const settings = {
    theme: "dark",
    fontSize: 16,
    showSidebar: true
} as const;
// Todas las propiedades se convierten en readonly con sus valores literales

Limitaciones de la inferencia

Aunque la inferencia de tipos es poderosa, tiene algunas limitaciones:

// La inferencia no funciona bien con arrays vacíos
let items = [];  // Tipo inferido: any[]

// Solución: proporcionar un tipo explícito
let items: string[] = [];

// O inicializar con valores
let items = ["initial"];
items = []; // Ahora items sigue siendo string[]

Otra limitación ocurre con objetos que se construyen progresivamente:

// Objeto vacío: TypeScript no puede inferir propiedades futuras
let config = {};  // Tipo: {}
// config.timeout = 3000;  // Error: Property 'timeout' does not exist on type '{}'

// Solución: definir el tipo completo desde el principio
let config: { timeout?: number; retries?: number } = {};
config.timeout = 3000;  // Correcto

Inferencia con genéricos

La inferencia también funciona con tipos genéricos, permitiendo que TypeScript deduzca los argumentos de tipo:

// Definimos una función genérica
function first<T>(array: T[]): T | undefined {
    return array[0];
}

// TypeScript infiere que T es 'number'
const num = first([1, 2, 3]);  // Tipo: number | undefined

// TypeScript infiere que T es 'string'
const str = first(["a", "b", "c"]);  // Tipo: string | undefined

Cuándo evitar la inferencia

Aunque la inferencia es conveniente, hay situaciones donde es mejor especificar los tipos explícitamente:

• APIs públicas: Para documentar claramente lo que espera y devuelve una función
• Tipos complejos: Cuando la inferencia podría ser ambigua o demasiado general
• Valores iniciales engañosos: Cuando el valor inicial no refleja todos los posibles valores futuros

// Mejor con tipo explícito para claridad de la API
function processData(data: UserData[]): ProcessedResult {
    // Implementación...
}

// Mejor con tipo explícito cuando el valor inicial no refleja todos los casos
let status: "idle" | "loading" | "success" | "error" = "idle";

La inferencia de tipos es una herramienta poderosa que permite escribir código TypeScript más limpio y conciso sin sacrificar la seguridad de tipos, encontrando un equilibrio entre la verbosidad de las anotaciones de tipo explícitas y la flexibilidad de JavaScript.