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)**
......@@ -6,28 +6,31 @@
## 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
const nombre = 'Hospital Central';
```ts
const nombre: string = 'Hospital Central';
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
let usuario = 'María';
* Tipado estático opcional
* 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.`);
// Tipado débil
let recursos = '10';
let total = cantidad * 2;
let recursos: number = 10;
let total: number = recursos * 2;
console.log(`Total de recursos disponibles: ${total}`);
```
......@@ -35,16 +38,15 @@ console.log(`Total de recursos disponibles: ${total}`);
## 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.
- `console.info()` — información detallada.
- `console.warn()` — advertencias.
- `console.error()` — errores.
- `console.table()` — muestra datos en formato tabla.
```ts
interface RecursoResumen {
tipo: string;
cantidad: number;
}
```javascript
let recursos = [
const recursos: RecursoResumen[] = [
{ tipo: 'Enfermeros', cantidad: 200 },
{ tipo: 'Ambulancias', cantidad: 40 },
];
......@@ -58,202 +60,142 @@ console.table(recursos);
---
## 4. Declaración de variables
JavaScript permite declarar variables con `var`, `let` o `const`, cada una con distinto **alcance (scope)**:
## 4. Declaración de variables y modificadores de acceso
- `var` → alcance de **función**, se puede redeclarar.
- `let` → alcance de **bloque**, más seguro y moderno.
- `const` → alcance de **bloque**, su valor no puede reasignarse (aunque sus propiedades sí).
En TypeScript se utilizan `let` y `const` (no se recomienda `var`). Además, **las clases sí soportan modificadores de acceso explícitos**:
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).
- El prefijo real `#nombre` → define **propiedades privadas reales** (accesibles solo dentro de la clase).
- Por defecto, todas las propiedades y métodos son **públicos**.
```ts
type TipoRecurso = 'HUMANO' | 'MATERIAL';
```javascript
class Recurso {
#id; // Propiedad privada
unidad;
tipoRecurso;
private id: string;
public unidad: string;
public tipoRecurso: TipoRecurso;
constructor({ id = null, unidad = '', tipoRecurso = '' }) {
this.#id = id;
constructor(id: string, unidad: string, tipoRecurso: TipoRecurso) {
this.id = id;
this.unidad = unidad;
this.tipoRecurso = tipoRecurso; // "HUMANO" o "MATERIAL"
}
// Getters y setters para id
get id() {
return this.#id;
this.tipoRecurso = tipoRecurso;
}
set id(nuevoId) {
this.#id = nuevoId;
}
mostrar() {
console.log(`Recurso [id=${this.#id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
public mostrar(): void {
console.log(`Recurso [id=${this.id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
}
}
let idObjeto = '2jfn49cn2s8ad8cn2a2f342da';
const UNIDADObjeto = 'JMAPER';
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
const recurso = new Recurso('2jfn49cn2s8ad8cn2a2f342da', 'JMAPER', 'HUMANO');
recurso.mostrar();
```
---
## 5. Tipos primitivos
Son los valores básicos: `string`, `number`, `boolean`, `undefined`, `null`, `bigint`, `symbol`.
TypeScript define explícitamente los tipos:
```javascript
let id = '12ERC7DFJG94KGLS045JD7';
let cantidad = 32;
let activo = true;
let unidad = undefined;
let otrosDatos = null;
```ts
let id: string = '12ERC7DFJG94KGLS045JD7';
let cantidad: number = 32;
let activo: boolean = true;
let unidad: undefined = undefined;
let otrosDatos: null = null;
```
---
## 6. Operadores
### Aritméticos
Los operadores funcionan igual que en JavaScript, pero TypeScript evita combinaciones peligrosas mediante el tipado.
`+`, `-`, `*`, `/`, `%`
- `+` concatena si hay strings.
- Resta o multiplicación con strings numéricos convierte a números.
- `/` 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
```ts
console.log(10 + 5);
console.log(10 / 3);
console.log(10 % 3);
```
### Lógicos
`&&`, `||`, `!`
- Un solo `&` o `|` → bit a bit.
- Doble `&&` o `||` → lógico.
```javascript
let enfermeros = 10;
let ambulancias = 5;
```ts
let enfermeros: number = 10;
let ambulancias: number = 5;
console.log(enfermeros > 0 && ambulancias > 0); // true
console.log(enfermeros > 0 || ambulancias === 0); // true
console.log(!(enfermeros > 0)); // false
console.log(enfermeros > 0 && ambulancias > 0);
console.log(!(enfermeros > 0));
```
### Comparativos
`==` compara solo valores, `===` compara valores **y tipos**.
```javascript
console.log(10 == '10'); // true
console.log(10 === '10'); // false
```ts
console.log(10 === 10); // true
```
---
## 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
let recursosMixtos = [
'Ambulancia',
10,
true,
const recursos: RecursoInventario[] = [
{ 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
let ambulancias = ['ET 101467', 'ET 101468', 'ET 101469'];
ambulancias.push('ET 101470'); // añadir
ambulancias.pop(); // eliminar último
console.log(ambulancias.length);
const ambulancias: string[] = ['ET 101467', 'ET 101468', 'ET 101469'];
ambulancias.push('ET 101470');
ambulancias.pop();
for (let i = 0; i < ambulancias.length; i++) {
console.log(`ambulancias disponibles: ${ambulancias[i]}`);
}
ambulancias.forEach(a => console.log(a));
```
> Nota: aunque sea posible mezclar tipos, se recomienda mantener arrays homogéneos cuando representen lo mismo.
---
## 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
function calcularAmbulanciasOperativas(total, inoperativas) {
```ts
function calcularAmbulanciasOperativas(total: number, inoperativas: number): number {
return total - inoperativas;
}
console.log(`Ambulancias operativas: ${calcularAmbulanciasOperativas(50, 38)}`);
```
### Parámetros por defecto
```javascript
function registrarRecurso(tipo = 'HUMANO', id = '1AJS8DF9J4GJ80DJS2NSJD', unidad: 'JMAPER') {
```ts
function registrarRecurso(
tipo: TipoRecurso = 'HUMANO',
id: string = '1AJS8DF9J4GJ80DJS2NSJD',
unidad: string = 'JMAPER'
): void {
console.log(`Recurso: ${tipo}, Unidad: ${unidad}`);
}
registrarRecurso('Mascarillas', '1JDS7DSF9DHEC334BFH345E', 'ACING');
registrarRecurso(); // Usa los valores por defecto
```
### Funciones anidadas y ámbito
```javascript
function gestionarRecurso() {
const tipo = 'Materal';
```ts
function gestionarRecurso(): void {
const tipo: TipoRecurso = 'MATERIAL';
function mostrarTipo() {
// función anidada
console.log(`Tipo de recurso: ${tipo}`); // accede al ámbito externo
function mostrarTipo(): void {
console.log(`Tipo de recurso: ${tipo}`);
}
mostrarTipo();
}
gestionarRecurso();
```
### Funciones flecha
Las funciones flecha (`=>`) simplifican la sintaxis y **no crean su propio** `this`, por lo que son útiles en callbacks o eventos.
```javascript
const reporteRecursos = (enfermeros, ambulancias) => {
```ts
const reporteRecursos = (enfermeros: number, ambulancias: number): void => {
console.log(`Enfermeros: ${enfermeros}, Ambulancias: ${ambulancias}`);
};
```
......@@ -262,103 +204,87 @@ const reporteRecursos = (enfermeros, ambulancias) => {
## 9. Estructuras de control
- **Condicionales:** `if`, `else`, `switch` (para múltiples casos).
- **Bucles:** `for`, `while`, `do...while`.
- **Manejo de errores:** `try...catch` captura errores de ejecución y evita que el programa se detenga.
```ts
let ambulanciasDisponibles: number = 12;
```javascript
let ambulancias = 12;
if (ambulancias > 0) {
if (ambulanciasDisponibles > 0) {
console.log('Hay ambulancias');
} else {
console.log('No hay camas disponibles');
console.log('No hay ambulancias disponibles');
}
try {
let resultado = ambulancias / 0;
let resultado = ambulanciasDisponibles / 0;
console.log(resultado);
} 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'];
for (let i = 0; i < ambulancias.length; i++) {
console.log(`Ambulancias: ${ambulancias[i]}`);
const listaAmbulancias: string[] = ['ET 101467', 'ET 101468', 'ET 101469'];
for (const amb of listaAmbulancias) {
console.log(`Ambulancia: ${amb}`);
}
```
---
## 10. Clases y objetos
## 10. Clases, interfaces y objetos
### Objetos literales
### Interfaces
```javascript
const recurso = {
id: '7d8giej2934b5kcn28xo8',
unidad: 'JMAPER',
tipoRecurso: 'HUMANO',
};
console.log(recurso.unidad);
```ts
interface RecursoDTO {
id: string;
unidad: string;
tipoRecurso: TipoRecurso;
}
```
### Clases y uso de objetos
```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;
}
### Clases
set id(nuevoId) {
this.#id = nuevoId;
}
```ts
class RecursoEntidad {
constructor(
private id: string,
public unidad: string,
public tipoRecurso: TipoRecurso
) {}
mostrar() {
console.log(`Recurso [id=${this.#id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
mostrar(): void {
console.log(`Recurso [id=${this.id}, tipo=${this.tipoRecurso}, unidad=${this.unidad}]`);
}
}
const datos = { id: '1j273hf83hd93j4f7gjd6', unidad: 'ACING', tipoRecurso: 'MATERIAL' };
const recurso = new Recurso(datos.id, datos.unidad, datos.tipoRecurso);
recurso.mostrar();
```
const datos: RecursoDTO = {
id: '1j273hf83hd93j4f7gjd6',
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
```javascript
let fechaHoy = new Date();
```ts
const fechaHoy: Date = new Date();
console.log('Fecha actual:', fechaHoy.toLocaleDateString());
let ultimaOperatividad = new Date(2025, 9, 22);
console.log('Ultima fecha de operatividad:', ultimaOperatividad.toLocaleDateString());
const ultimaOperatividad: Date = new Date(2025, 9, 22);
console.log('Última fecha de operatividad:', ultimaOperatividad.toLocaleDateString());
```
### Math
El objeto `Math` proporciona funciones matemáticas comunes.
```javascript
```ts
console.log('Número aleatorio:', Math.random());
console.log('Redondeo hacia arriba:', Math.ceil(4.3));
console.log('Valor absoluto:', Math.abs(-5));
console.log('Máximo:', Math.max(10, 20, 5));
```