Guía de estudio: Angular UFH

Guía para aprender TypeScript y Angular desde cero, siguiendo los proyectos del repositorio. No reemplaza la documentación oficial: explica qué problema resuelve cada concepto, cómo funciona por dentro y cómo se ve en el código del curso.

Regla de lectura: primero ejecuta el ejemplo del repositorio, después lee la teoría del módulo y al final intenta responder las preguntas de entrevista sin mirar la respuesta.

Cómo usar esta guía

1. Cada proyecto del repositorio tiene su propia página en esta wiki, con el mismo nombre que la carpeta (01-typescript-intro/ → 01-typescript-intro). Esta página es el índice.
2. Dentro de cada página, cada archivo de src/topics/ es un módulo. El número del módulo coincide con el número del archivo.
3. Cada módulo termina con preguntas de entrevista de nivel senior, cada una con su respuesta debajo. Intenta responder antes de leerla.
4. Si algo no te queda claro, cámbialo en el archivo del tópico, ejecuta npx tsc y mira qué error aparece. El compilador es el mejor profesor. (tsc es el compilador de TypeScript; la Introducción explica qué es y qué hace.)

Páginas

Página	Proyecto	Qué cubre
Parte 1: TypeScript sin framework	01-typescript-intro/	Qué es TypeScript, configuración del proyecto y los módulos 1 a 11
Parte 2: Angular	02-bases/	Qué es Angular, mitos, framework y bloques, ng new y estructura de carpetas
Hoja de atajos de Angular	—	Referencia rápida de sintaxis, con lo legacy y su forma actual

Mapa general

angular-ufh/
├── 01-typescript-intro/        Parte 1: TypeScript sin framework  → página 01-typescript-intro
│   └── src/topics/
│       ├── 01-basic-types.ts             Módulo 1: tipos básicos
│       ├── 02-object-interface.ts        Módulo 2: arrays e interfaces
│       ├── 03-functions.ts               Módulo 3: funciones
│       ├── 04-homework-types.ts          Módulo 4: tarea, interfaces anidadas
│       ├── 05-basic-destructuring.ts     Módulo 5: desestructuración
│       ├── 06-function-destructuring.ts  Módulo 6: parámetro objeto y tuplas
│       │                                 + Tipos de datos: primitivos, tuplas y enums
│       ├── 07-import-export-modules.ts   Módulo 7: módulos, import y export
│       ├── 08-classes.ts                 Módulo 8: clases
│       ├── 09-generics.ts                Módulo 9: genéricos
│       ├── 10-decorators.ts              Módulo 10: decoradores
│       └── 11-optional-chaining.ts       Módulo 11: encadenamiento opcional y !
└── 02-bases/                   Parte 2: Angular                   → página 02-bases
                                Qué es Angular y mitos
                                Módulo A1: framework y bloques fundamentales
                                Módulo A2: crear un proyecto con ng new
                                Módulo A3: estructura de carpetas por defecto
                                Módulo A4: temas puntuales
                                Módulo A5: desplegar en Coolify

Ruta recomendada

Parte 1: TypeScript (01-typescript-intro)

Etapa	Tema	Resultado esperado
0	Qué es TypeScript y cómo corre el proyecto	Saber qué hace tsc y qué hace Vite
0+	package.json, lockfile y tsconfig.json	Leer la configuración e instalar de forma reproducible
1	Tipos básicos, literales y uniones	Leer y escribir anotaciones de tipo sin dudar
2	Arrays tipados e interfaces	Describir la forma de un objeto y entender los errores
3	Funciones y parámetros	Tipar parámetros y retornos, opcionales y por defecto
4	Tarea: interfaces anidadas	Componer interfaces y nombrar tipos según convención
5	Desestructuración de objetos y arrays	Extraer, renombrar y anidar valores sin errores
6	Parámetro objeto y tuplas de retorno	Diseñar funciones con muchas entradas o salidas
6+	Tipos de datos: primitivos, tuplas, enums	Elegir entre array, tupla, enum, unión y diccionario
7	Módulos, import y export	Repartir código en archivos sin efectos inesperados
8	Clases, public y private	Crear objetos desde una clase y proteger su estado
9	Genéricos	Escribir código reutilizable sin perder los tipos
10	Decoradores	Entender qué hace un @ en una clase y en Angular
11	Encadenamiento opcional y !	Leer datos que pueden faltar sin que el programa falle

Parte 2: Angular (02-bases)

Etapa	Tema	Resultado esperado
A1	Angular: framework y bloques fundamentales	Reconocer cada pieza de Angular y su forma actual
A2	Crear un proyecto con ng new	Crear un proyecto y entender angular.json y los tsconfig
A3	Estructura de carpetas por defecto	Saber qué hay en cada carpeta, y estilos globales y de componente
A4	Temas puntuales	Navegar, @for/@if, input()/output(), servicios y efectos
A5	Desplegar en Coolify	Publicar la SPA con Docker, Nginx, Coolify y Cloudflare