Skip to content

GitLab

Modulo 1 · Changes

Page history
adaptacion sin revision a typescript authored by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 204 deletions
Modulo-1.md
View page @ bd3be2ea
# Módulo 1 — Fundamentos y Sintaxis de JavaScript # Módulo 1 — Fundamentos y Sintaxis de TypeScript
**Aplicación práctica: Sistema de gestión de recursos sanitarios (Humanos y materiales)** **Aplicación práctica: Sistema de gestión de recursos sanitarios (Humanos y materiales)**
...@@ -6,28 +6,31 @@ ...@@ -6,28 +6,31 @@
## 1. Qué es ECMAScript ## 1. Qué es ECMAScript
ECMAScript es el **estándar que define el lenguaje JavaScript**, desarrollado por Ecma International. Cada versión de ECMAScript introduce mejoras (por ejemplo, ES6 en 2015 incorporó `let`, `const`, clases, funciones flecha, entre otros). Gracias a este estándar, el código JavaScript es **compatible entre navegadores y plataformas**. ECMAScript es el **estándar que define el lenguaje JavaScript**, desarrollado por Ecma International. TypeScript es un **superset de JavaScript**, lo que significa que todo código JavaScript válido también es válido en TypeScript, pero añade **tipado estático**, decoradores y otras capacidades avanzadas.
```javascript ```ts
const nombre = 'Hospital Central'; const nombre: string = 'Hospital Central';
console.log(`Bienvenido a la app de gestión de ${nombre}`); console.log(`Bienvenido a la app de gestión de ${nombre}`);
``` ```
--- ---
## 2. Qué es JavaScript ## 2. Qué es TypeScript
JavaScript es un **lenguaje de programación interpretado** (no se compila antes de ejecutarse, el intérprete lo lee línea a línea). Es además **débilmente tipado**, lo que significa que **no requiere especificar el tipo de dato** y puede convertir automáticamente entre tipos, lo que da flexibilidad pero exige cuidado. TypeScript es un **lenguaje de programación fuertemente tipado y transpilado**. El código TypeScript se **compila a JavaScript**, permitiendo detectar errores **en tiempo de desarrollo**.
JavaScript es **multiparadigma** (soporta programación funcional, orientada a objetos y procedimental) y se usa para desarrollar **aplicaciones web dinámicas**, como un sistema de gestión sanitaria. Ventajas clave:
```javascript * Tipado estático opcional
let usuario = 'María'; * Mejor autocompletado y refactorización
* Código más mantenible y escalable
```ts
let usuario: string = 'María';
console.log(`Hola ${usuario}, bienvenida al sistema de gestión.`); console.log(`Hola ${usuario}, bienvenida al sistema de gestión.`);
// Tipado débil let recursos: number = 10;
let recursos = '10'; let total: number = recursos * 2;
let total = cantidad * 2;
console.log(`Total de recursos disponibles: ${total}`); console.log(`Total de recursos disponibles: ${total}`);
``` ```
...@@ -35,16 +38,15 @@ console.log(`Total de recursos disponibles: ${total}`); ...@@ -35,16 +38,15 @@ console.log(`Total de recursos disponibles: ${total}`);
## 3. Impresión por consola ## 3. Impresión por consola
El objeto `console` permite **mostrar información** para depuración y control del flujo: El objeto `console` funciona igual que en JavaScript, pero con mayor control gracias al tipado.
- `console.log()` — información general. ```ts
- `console.info()` — información detallada. interface RecursoResumen {
- `console.warn()` — advertencias. tipo: string;
- `console.error()` — errores. cantidad: number;
- `console.table()` — muestra datos en formato tabla. }
```javascript const recursos: RecursoResumen[] = [
let recursos = [
{ tipo: 'Enfermeros', cantidad: 200 }, { tipo: 'Enfermeros', cantidad: 200 },
{ tipo: 'Ambulancias', cantidad: 40 }, { tipo: 'Ambulancias', cantidad: 40 },
]; ];
...@@ -58,202 +60,142 @@ console.table(recursos); ...@@ -58,202 +60,142 @@ console.table(recursos);
--- ---
## 4. Declaración de variables ## 4. Declaración de variables y modificadores de acceso
JavaScript permite declarar variables con `var`, `let` o `const`, cada una con distinto **alcance (scope)**:
- `var` → alcance de **función**, se puede redeclarar. En TypeScript se utilizan `let` y `const` (no se recomienda `var`). Además, **las clases sí soportan modificadores de acceso explícitos**:
- `let` → alcance de **bloque**, más seguro y moderno.
- `const` → alcance de **bloque**, su valor no puede reasignarse (aunque sus propiedades sí).
Además, a partir de ES2022, **las clases** pueden definir propiedades **públicas** y **privadas**. En JavaScript moderno no existen palabras reservadas como `public` o `private` al estilo de otros lenguajes (como Java o C#), pero se usan **convenciones**: * `public` (por defecto)
* `private`
* `protected`
* `readonly`
- Prefijo `_nombre` → indica que debería tratarse como privado (por convención). ```ts
- El prefijo real `#nombre` → define **propiedades privadas reales** (accesibles solo dentro de la clase). type TipoRecurso = 'HUMANO' | 'MATERIAL';
- Por defecto, todas las propiedades y métodos son **públicos**.
```javascript
class Recurso { class Recurso {
#id; // Propiedad privada private id: string;
unidad; public unidad: string;
tipoRecurso; public tipoRecurso: TipoRecurso;
constructor({ id = null, unidad = '', tipoRecurso = '' }) { constructor(id: string, unidad: string, tipoRecurso: TipoRecurso) {
this.#id = id; this.id = id;
this.unidad = unidad; this.unidad = unidad;
this.tipoRecurso = tipoRecurso; // "HUMANO" o "MATERIAL" this.tipoRecurso = tipoRecurso;
}
// Getters y setters para id
get id() {
return this.#id;
} }
set id(nuevoId) { public mostrar(): void {
this.#id = nuevoId; console.log(`Recurso [id=${this.id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
}
mostrar() {
console.log(`Recurso [id=${this.#id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
} }
} }
let idObjeto = '2jfn49cn2s8ad8cn2a2f342da'; const recurso = new Recurso('2jfn49cn2s8ad8cn2a2f342da', 'JMAPER', 'HUMANO');
const UNIDADObjeto = 'JMAPER'; recurso.mostrar();
var tipoRecursoObjeto = 'HUMANO';
// Ejemplo:
recurso = new Recurso({
id: idObjeto,
unidad: UNIDADObjeto,
tipoRecurso: tipoRecursoObjeto,
});
console.log(recurso.mostrar());
console.log(recurso.unidad);
//console.log(recurso.#id) mostraría un error
``` ```
--- ---
## 5. Tipos primitivos ## 5. Tipos primitivos
Son los valores básicos: `string`, `number`, `boolean`, `undefined`, `null`, `bigint`, `symbol`. TypeScript define explícitamente los tipos:
```javascript ```ts
let id = '12ERC7DFJG94KGLS045JD7'; let id: string = '12ERC7DFJG94KGLS045JD7';
let cantidad = 32; let cantidad: number = 32;
let activo = true; let activo: boolean = true;
let unidad = undefined; let unidad: undefined = undefined;
let otrosDatos = null; let otrosDatos: null = null;
``` ```
--- ---
## 6. Operadores ## 6. Operadores
### Aritméticos Los operadores funcionan igual que en JavaScript, pero TypeScript evita combinaciones peligrosas mediante el tipado.
`+`, `-`, `*`, `/`, `%` ```ts
console.log(10 + 5);
- `+` concatena si hay strings. console.log(10 / 3);
- Resta o multiplicación con strings numéricos convierte a números. console.log(10 % 3);
- `/` divide, `%` obtiene el resto.
```javascript
console.log('10' + 5); // "105"
console.log('10' - '5'); // 5
console.log(10 / 3); // 3.33
console.log(10 % 3); // 1
``` ```
### Lógicos ```ts
let enfermeros: number = 10;
`&&`, `||`, `!` let ambulancias: number = 5;
- Un solo `&` o `|` → bit a bit.
- Doble `&&` o `||` → lógico.
```javascript
let enfermeros = 10;
let ambulancias = 5;
console.log(enfermeros > 0 && ambulancias > 0); // true console.log(enfermeros > 0 && ambulancias > 0);
console.log(enfermeros > 0 || ambulancias === 0); // true console.log(!(enfermeros > 0));
console.log(!(enfermeros > 0)); // false
``` ```
### Comparativos ```ts
console.log(10 === 10); // true
`==` compara solo valores, `===` compara valores **y tipos**.
```javascript
console.log(10 == '10'); // true
console.log(10 === '10'); // false
``` ```
--- ---
## 7. Arrays ## 7. Arrays y genéricos
Un **array** puede contener **elementos de distintos tipos**: números, strings, booleanos, objetos e incluso otros arrays. Los arrays en TypeScript suelen ser **homogéneos** y tipados:
El orden de los arrays empieza en 0. ```ts
interface RecursoInventario {
id: string;
unidad: string;
tipoRecurso: TipoRecurso;
}
```javascript const recursos: RecursoInventario[] = [
let recursosMixtos = [
'Ambulancia',
10,
true,
{ id: '18HFHSK2J3H123H412KH3', unidad: 'JMAPER', tipoRecurso: 'HUMANO' }, { id: '18HFHSK2J3H123H412KH3', unidad: 'JMAPER', tipoRecurso: 'HUMANO' },
]; ];
console.log(recursosMixtos);
console.log(recursosMixtos[3].unidad); // "JMAPER"
let inventario = [
['Enfermeros', 300],
['Ambulancias', 20],
];
console.log(inventario[1][1]); // 20
// Operaciones comunes const ambulancias: string[] = ['ET 101467', 'ET 101468', 'ET 101469'];
let ambulancias = ['ET 101467', 'ET 101468', 'ET 101469']; ambulancias.push('ET 101470');
ambulancias.push('ET 101470'); // añadir ambulancias.pop();
ambulancias.pop(); // eliminar último
console.log(ambulancias.length);
for (let i = 0; i < ambulancias.length; i++) { ambulancias.forEach(a => console.log(a));
console.log(`ambulancias disponibles: ${ambulancias[i]}`);
}
``` ```
> Nota: aunque sea posible mezclar tipos, se recomienda mantener arrays homogéneos cuando representen lo mismo.
--- ---
## 8. Funciones ## 8. Funciones
Las funciones permiten **reutilizar código** y organizar la lógica. Su **firma** incluye el nombre, los parámetros y el valor de retorno. Las funciones definen tipos de parámetros y retorno.
```javascript ```ts
function calcularAmbulanciasOperativas(total, inoperativas) { function calcularAmbulanciasOperativas(total: number, inoperativas: number): number {
return total - inoperativas; return total - inoperativas;
} }
console.log(`Ambulancias operativas: ${calcularAmbulanciasOperativas(50, 38)}`);
``` ```
### Parámetros por defecto ### Parámetros por defecto
```javascript ```ts
function registrarRecurso(tipo = 'HUMANO', id = '1AJS8DF9J4GJ80DJS2NSJD', unidad: 'JMAPER') { function registrarRecurso(
tipo: TipoRecurso = 'HUMANO',
id: string = '1AJS8DF9J4GJ80DJS2NSJD',
unidad: string = 'JMAPER'
): void {
console.log(`Recurso: ${tipo}, Unidad: ${unidad}`); console.log(`Recurso: ${tipo}, Unidad: ${unidad}`);
} }
registrarRecurso('Mascarillas', '1JDS7DSF9DHEC334BFH345E', 'ACING');
registrarRecurso(); // Usa los valores por defecto
``` ```
### Funciones anidadas y ámbito ### Funciones anidadas y ámbito
```javascript ```ts
function gestionarRecurso() { function gestionarRecurso(): void {
const tipo = 'Materal'; const tipo: TipoRecurso = 'MATERIAL';
function mostrarTipo() { function mostrarTipo(): void {
// función anidada console.log(`Tipo de recurso: ${tipo}`);
console.log(`Tipo de recurso: ${tipo}`); // accede al ámbito externo
} }
mostrarTipo(); mostrarTipo();
} }
gestionarRecurso();
``` ```
### Funciones flecha ### Funciones flecha
Las funciones flecha (`=>`) simplifican la sintaxis y **no crean su propio** `this`, por lo que son útiles en callbacks o eventos. ```ts
const reporteRecursos = (enfermeros: number, ambulancias: number): void => {
```javascript
const reporteRecursos = (enfermeros, ambulancias) => {
console.log(`Enfermeros: ${enfermeros}, Ambulancias: ${ambulancias}`); console.log(`Enfermeros: ${enfermeros}, Ambulancias: ${ambulancias}`);
}; };
``` ```
...@@ -262,103 +204,87 @@ const reporteRecursos = (enfermeros, ambulancias) => { ...@@ -262,103 +204,87 @@ const reporteRecursos = (enfermeros, ambulancias) => {
## 9. Estructuras de control ## 9. Estructuras de control
- **Condicionales:** `if`, `else`, `switch` (para múltiples casos). ```ts
- **Bucles:** `for`, `while`, `do...while`. let ambulanciasDisponibles: number = 12;
- **Manejo de errores:** `try...catch` captura errores de ejecución y evita que el programa se detenga.
```javascript if (ambulanciasDisponibles > 0) {
let ambulancias = 12;
if (ambulancias > 0) {
console.log('Hay ambulancias'); console.log('Hay ambulancias');
} else { } else {
console.log('No hay camas disponibles'); console.log('No hay ambulancias disponibles');
} }
try { try {
let resultado = ambulancias / 0; let resultado = ambulanciasDisponibles / 0;
console.log(resultado); console.log(resultado);
} catch (error) { } catch (error) {
console.error('Error en el cálculo:', error); console.error('Error en el cálculo', error);
} }
let ambulancias = ['ET 101467', 'ET 101468', 'ET 101469']; const listaAmbulancias: string[] = ['ET 101467', 'ET 101468', 'ET 101469'];
for (let i = 0; i < ambulancias.length; i++) { for (const amb of listaAmbulancias) {
console.log(`Ambulancias: ${ambulancias[i]}`); console.log(`Ambulancia: ${amb}`);
} }
``` ```
--- ---
## 10. Clases y objetos ## 10. Clases, interfaces y objetos
### Objetos literales ### Interfaces
```javascript ```ts
const recurso = { interface RecursoDTO {
id: '7d8giej2934b5kcn28xo8', id: string;
unidad: 'JMAPER', unidad: string;
tipoRecurso: 'HUMANO', tipoRecurso: TipoRecurso;
}; }
console.log(recurso.unidad);
``` ```
### Clases y uso de objetos ### Clases
```javascript
class Recurso {
#id; // Propiedad privada
unidad;
tipoRecurso;
constructor({ id = null, unidad = '', tipoRecurso = '' }) {
this.#id = id;
this.unidad = unidad;
this.tipoRecurso = tipoRecurso; // "HUMANO" o "MATERIAL"
}
// Getters y setters para id
get id() {
return this.#id;
}
set id(nuevoId) { ```ts
this.#id = nuevoId; class RecursoEntidad {
} constructor(
private id: string,
public unidad: string,
public tipoRecurso: TipoRecurso
) {}
mostrar() { mostrar(): void {
console.log(`Recurso [id=${this.#id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`); console.log(`Recurso [id=${this.id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
} }
} }
const datos = { id: '1j273hf83hd93j4f7gjd6', unidad: 'ACING', tipoRecurso: 'MATERIAL' }; const datos: RecursoDTO = {
const recurso = new Recurso(datos.id, datos.unidad, datos.tipoRecurso); id: '1j273hf83hd93j4f7gjd6',
recurso.mostrar(); unidad: 'ACING',
``` tipoRecurso: 'MATERIAL',
};
> Un objeto literal puede inicializar una clase, pero no puede convertirse directamente en una instancia sin pasar sus propiedades al constructor. const recursoEntidad = new RecursoEntidad(datos.id, datos.unidad, datos.tipoRecurso);
recursoEntidad.mostrar();
```
--- ---
## 11. Otros objetos: Fechas y más ## 11. Otros objetos
### Date ### Date
```javascript ```ts
let fechaHoy = new Date(); const fechaHoy: Date = new Date();
console.log('Fecha actual:', fechaHoy.toLocaleDateString()); console.log('Fecha actual:', fechaHoy.toLocaleDateString());
let ultimaOperatividad = new Date(2025, 9, 22); const ultimaOperatividad: Date = new Date(2025, 9, 22);
console.log('Ultima fecha de operatividad:', ultimaOperatividad.toLocaleDateString()); console.log('Última fecha de operatividad:', ultimaOperatividad.toLocaleDateString());
``` ```
### Math ### Math
El objeto `Math` proporciona funciones matemáticas comunes. ```ts
```javascript
console.log('Número aleatorio:', Math.random()); console.log('Número aleatorio:', Math.random());
console.log('Redondeo hacia arriba:', Math.ceil(4.3)); console.log('Redondeo hacia arriba:', Math.ceil(4.3));
console.log('Valor absoluto:', Math.abs(-5)); console.log('Valor absoluto:', Math.abs(-5));
console.log('Máximo:', Math.max(10, 20, 5)); console.log('Máximo:', Math.max(10, 20, 5));
``` ```