📘 Clase 1 — Variables base

TypeScript · 2026-07-11 · Carpeta: 02-Ejercicios/Variable_base ⬅️ Volver al índice de clases

🎯 Qué aprendí

• Cómo compilar y ejecutar TypeScript: tsc → genera .js → node lo corre.
• Declarar variables con tipo: let nombre: string = "Styp".
• Los 3 tipos base: string, number, boolean.
• Diferencia entre null (vacío a propósito) y undefined (sin asignar).
• Union types con | (string | undefined).
• Template strings con backticks y ${...}.
• Para qué sirve el tsconfig.json y cómo compilar usándolo (tsc a secas).

---

📖 PARTE TEÓRICA

🅰️ 1. Variables con tipo

En TypeScript declaro con let y anoto el tipo con : tipo:

let nombre: string = "Styp";        // texto
let edad: number = 30;              // números (enteros o decimales)
let esDesarrollador: boolean = true; // verdadero / falso

El : tipo es una promesa al compilador: esa variable solo guardará ese tipo. Si metes otra cosa (edad = "treinta"), TS avisa antes de ejecutar.

Tipo	Guarda	Ejemplo
string	Texto	"hola"
number	Números	30, 3.14
boolean	Verdadero/falso	true, false

🕳️ 2. null vs undefined

let mes: string | undefined;   // declarada SIN valor → vale undefined solo
let variableNull: null = null; // vacío puesto A PROPÓSITO por mí

Valor	Significa	Quién lo pone
undefined	"Sin definir": declaré pero no asigné	JavaScript solo
null	"Vacío intencional"	Yo, a mano

⚠️ Una variable sin valor sí se imprime: sale la palabra undefined, no queda en blanco. console.log(mes) → undefined. Eso NO es un error.

🧩 3. Union types (|)

El | significa "o": la variable puede ser un tipo u otro.

let mes: string | undefined;  // puede ser "Julio" o undefined
mes = "Julio";                // ✅
mes = 30;                     // ❌ number no está en la unión

🔤 4. Template strings

console.log("Hola, " + nombre + "!");   // 1) concatenación con +
console.log(`Hola, ${nombre}!`);        // 2) template string (más limpia)

Las dos imprimen Hola, Styp!. La 2ª usa backticks (`) y ${variable}. Más legible.

💡 ${...} solo funciona dentro de backticks, no en "..." ni '...'.

⚙️ 5. Compilar con tsconfig.json

TypeScript no corre directo: se traduce a JavaScript, y Node ejecuta ese JS.

  main.ts  ──tsc──▶  main.js  ──node──▶  salida en pantalla

Ya con tsconfig.json en la carpeta, se compila con tsc a secas (sin nombre de archivo). Ver el camino inicial completo.

---

💻 PARTE PRÁCTICA

Archivos: 02-Ejercicios/Variable_base/main.ts y ejercicio2.ts

// main.ts
let nombre: string = "Styp";
let mes: string | undefined;

console.log(`Hola, ${nombre}!`);           // Hola, Styp!
console.log(`Mes inicial: ${mes}`);        // Mes inicial: undefined
mes = "Enero";
console.log(`Mes actualizado: ${mes}`);    // Mes actualizado: Enero

cd 02-Ejercicios/Variable_base
tsc && node main.js

💡 ejercicio2.ts demostró que tsc compila todos los .ts a la vez y que reusar let nombre en dos archivos NO choca (cada archivo es un módulo con su propio espacio).

---

🏋️ EJERCICIOS CON SOLUCIÓN

Ejercicio 1 — Ficha de una ciudad

Declara ciudad (string), poblacion (number) y esCapital (boolean), e imprímelos en una sola línea con template string.

Ver solución

let ciudad: string = "Lima";
let poblacion: number = 10000000;
let esCapital: boolean = true;
console.log(`${ciudad} tiene ${poblacion} hab. ¿Capital? ${esCapital}`);
// Lima tiene 10000000 hab. ¿Capital? true

Terminal esperada:

zsh · ejercicio-ciudad.ts

$ tsc ejercicio-ciudad.ts
$ node ejercicio-ciudad.js
Lima tiene 10000000 hab. ¿Capital? true

Ejercicio 2 — Un ID que cambia de tipo

Declara id que pueda ser string o number. Asígnale primero un número, imprímelo, luego un texto, e imprímelo otra vez.

Ver solución

let id: string | number = 123;
console.log(`ID: ${id}`);   // ID: 123
id = "ABC-123";
console.log(`ID: ${id}`);   // ID: ABC-123

Terminal esperada:

zsh · ejercicio-id.ts

$ tsc ejercicio-id.ts
$ node ejercicio-id.js
ID: 123
ID: ABC-123

Ejercicio 3 — De undefined a valor

Declara apodo como string | undefined sin asignar. Imprímelo (sale undefined), luego asígnale un valor y vuelve a imprimir.

Ver solución

let apodo: string | undefined;
console.log(`Apodo: ${apodo}`);   // Apodo: undefined
apodo = "Styp";
console.log(`Apodo: ${apodo}`);   // Apodo: Styp

Terminal esperada:

zsh · ejercicio-apodo.ts

$ tsc ejercicio-apodo.ts
$ node ejercicio-apodo.js
Apodo: undefined
Apodo: Styp

---

❓ Preguntas y respuestas (autoevaluación)

1. ¿Qué pasa si declaro let x: string y luego hago x = 42?

TS da error: 42 es number, no string. El tipo es una promesa que TS verifica.

2. ¿Diferencia entre null y undefined?

undefined = declarada sin asignar (lo pone JS). null = vacío puesto a propósito por ti.

3. ¿Qué significa string | number?

Union type: la variable puede ser un string o un number (cualquiera de los dos).

4. ¿Por qué console.log(Hola ${nombre}) funciona pero console.log("Hola ${nombre}") no?

${...} solo se interpola dentro de backticks (`), no dentro de comillas normales.

5. Ya con tsconfig.json, ¿cómo se compila?

Con tsc a secas. Poner tsc main.ts (con nombre) ignora la config y da TS5112.

---

🐞 Errores que resolví en esta clase

Error	Causa	Fix
TS6053 file not found	Terminal en carpeta equivocada	cd a la carpeta del archivo
command not found: ts	Typo, era tsc	Escribir tsc
No imprime nada	.js viejo / sin guardar	Guardar + recompilar (tsc && node)
No se puede volver a declarar	Faltaba tsconfig.json	Crear tsconfig.json
TS5112 config no cargado	Usé tsc main.ts (con nombre)	Usar tsc a secas

📎 Apuntes relacionados

• Comandos
• Conceptos: variables, tipos, null/undefined

➡️ Siguiente

Clase 2 — Tipos especiales (any, unknown, void, never).