Preguntas y Respuestas de TypeScript: De Principiante a Experto

---

function sumar(a, b) {
  return a + b;
}
console.log(sumar(5, "10")); 
// Salida: "510" (No hay error, pero el resultado es inesperado)

function sumar(a: number, b: number): number {
  return a + b;
}
sumar(5, "10"); // Error de compilación: Argumento de tipo 'string' no es asignable a parámetro de tipo 'number'.

let nombre: string = "Juan";

let esActivo: boolean = true;

let valorAny: any = "hola";
valorAny.toUpperCase(); // Válido. No hay comprobación de tipo.
valorAny = 10;
valorAny.toFixed(2); // Válido.

let valorUnknown: unknown = "hola";
// valorUnknown.toUpperCase(); // Error: 'valorUnknown' es de tipo 'unknown'.
if (typeof valorUnknown === 'string') {
valorUnknown.toUpperCase(); // Válido tras la comprobación.
}

interface Coche {
marca: string;
modelo: string;
anio: number;
}

const miCoche: Coche = {
marca: "Toyota",
modelo: "Corolla",
anio: 2020,
};
// const cocheInvalido: Coche = { marca: "Ford" }; // Error: faltan propiedades 'modelo' y 'anio'.

type Id = string | number;
let userId: Id = 123;
let productId: Id = "abc-456";

interface Persona {
nombre: string;
}
interface Persona {
edad: number;
}
// La interfaz final 'Persona' tiene 'nombre' y 'edad'.
let p: Persona = { nombre: "Ana", edad: 30 };

let nombre = "Juan"; // TypeScript infiere que 'nombre' es de tipo 'string'.
// nombre = 123; // Error: Tipo 'number' no es asignable a tipo 'string'.

function multiplicar(a: number, b: number) {
return a * b; // TypeScript infiere que el tipo de retorno es 'number'.
}

function saludar(nombre: string): string {
return `Hola, ${nombre}!`;
}

function duplicar(num: number): number {
return num * 2;
}

let id: string | number;
id = 101; // Válido
id = "abc-123"; // Válido
// id = true; // Error: Tipo 'boolean' no es asignable a tipo 'string | number'.

function imprimirId(id: string | number) {
console.log(`El ID es: ${id}`);
}
imprimirId(5);
imprimirId("xyz");

let par: [string, number] = ["edad", 25];
// par = [25, "edad"]; // Error: Tipos en orden incorrecto.

let coordenadas: [number, number] = [40.7128, -74.0060];
// coordenadas.push("Error"); // Error: No se puede agregar un string a la tupla.

interface Usuario {
nombre: string;
edad?: number; // Propiedad opcional
email?: string; // Propiedad opcional
}

const usuario1: Usuario = { nombre: "Ana" }; // Válido
const usuario2: Usuario = { nombre: "Luis", edad: 30 }; // Válido
const usuario3: Usuario = { nombre: "María", edad: 25, email: "maria@example.com" }; // Válido

let dato: any = "Hola";
dato = 42;
dato = true;
dato.metodoInexistente(); // No hay error en tiempo de compilación

let dato: unknown = "Hola";
if (typeof dato === "string") {
console.log(dato.toUpperCase()); // Seguro después de la verificación
}

interface Animal {
nombre: string;
}
interface Animal { // Se puede extender
edad: number;
}
const perro: Animal = { nombre: "Rex", edad: 3 }; // Ambas propiedades requeridas

type ID = string | number; // Unión de tipos
type Usuario = {
id: ID;
nombre: string;
};
// type Usuario = { email: string }; // Error: No se puede redeclarar

{
"compilerOptions": {
  "target": "es5",
  "outDir": "./dist"
}
}

{
  "compilerOptions": {
  "strict": true
  }
}

const miCanvas = document.getElementById("main-canvas") as HTMLCanvasElement;

let algo: any = "esto es un string";
let longitud: number = (algo as string).length; // Indicamos al compilador que 'algo' es un string.

function procesar(valor: string | number) {
if (typeof valor === "string") {
  console.log(valor.toUpperCase()); // TypeScript sabe que es string
} else {
  console.log(valor.toFixed(2)); // TypeScript sabe que es number
}
}

interface Perro { ladrar(): void; }
interface Gato { maullar(): void; }

function esPerro(animal: Perro | Gato): animal is Perro {
return (animal as Perro).ladrar !== undefined;
}

function hacerSonido(animal: Perro | Gato) {
if (esPerro(animal)) {
  animal.ladrar(); // TypeScript sabe que es Perro
} else {
  animal.maullar(); // TypeScript sabe que es Gato
}
}

function imprimirLongitud(texto: string | string[]) {
if (typeof texto === "string") {
  console.log(texto.length); // Aquí 'texto' es un string.
} else {
  console.log(texto.join(" ").length); // Aquí 'texto' es un string[].
}
}

class Perro {}
class Gato {}
function esAnimal(animal: Perro | Gato) {
if (animal instanceof Perro) {
  console.log("Es un perro.");
} else {
  console.log("Es un gato.");
}
}

class Perro {}
class Gato {}
function esAnimal(animal: Perro | Gato) {
if (animal instanceof Perro) {
  console.log("Es un perro.");
} else {
  console.log("Es un gato.");
}
}

interface Punto {
readonly x: number;
readonly y: number;
}
let p1: Punto = { x: 10, y: 20 };
// p1.x = 5; // Error: No se puede asignar a 'x' porque es una propiedad de solo lectura.

class Usuario {
readonly id: string;
constructor(id: string) {
  this.id = id;
}
}
const usuario = new Usuario("user-123");
// usuario.id = "user-456"; // Error: No se puede modificar la propiedad 'id'.

interface Persona {
nombre: string;
edad: number;
}
const persona: Persona = { nombre: "Juan", edad: 30 };
const { nombre, edad } = persona; // TypeScript infiere los tipos de 'nombre' y 'edad'.

let numeros: [number, number] = [1, 2];
let [x, y] = numeros; // x: number, y: number.

function obtenerPrimerElemento<T>(arr: T[]): T {
return arr[0];
}
const primerNumero = obtenerPrimerElemento([1, 2, 3]); // Tipo 'number'.
const primeraLetra = obtenerPrimerElemento(["a", "b", "c"]); // Tipo 'string'.

interface Caja<T> {
contenido: T;
}
const cajaNumero: Caja<number> = { contenido: 100 };
const cajaTexto: Caja<string> = { contenido: "Hola" };

// archivo 'util.ts'
export function sumar(a: number, b: number): number {
return a + b;
}

// archivo 'main.ts'
import { sumar } from "./util";
console.log(sumar(2, 3));

namespace Matematicas {
export function sumar(a: number, b: number) {
  return a + b;
}
}
// Matematicas.sumar(2, 3);

function HolaMundo(target: Function) {
console.log("Hola desde el decorador!");
}
@HolaMundo
class MiClase {}

function log(target: any, key: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
  console.log(`Llamando al método ${key} con argumentos:`, args);
  return originalMethod.apply(this, args);
};
return descriptor;
}
class Servicio {
@log
imprimir(mensaje: string) {
  console.log(mensaje);
}
}
new Servicio().imprimir("Hola!");

// Con "strictNullChecks": false
let miString: string = "hola";
miString = null; // Válido.

// Con "strictNullChecks": true
let miString: string = "hola";
// miString = null; // Error: El tipo 'null' no es asignable al tipo 'string'.
let miStringOpcional: string | null = "hola"; // Válido, se usa una unión de tipos.
miStringOpcional = null;