Módulo 2 — Importación de elementos en TypeScript
1. Importación de datos
TypeScript utiliza el sistema de módulos ES igual que JavaScript, pero añade tipado explícito, lo que permite validar la estructura de los datos en tiempo de desarrollo.
En este módulo los ejemplos se adaptan a la estructura real de tu API: recursos humanos, recursos materiales y activaciones.
Ejemplo: Importación desde otro archivo TypeScript
Archivo data/recursos.ts:
// data/recursos.ts
export type TipoRecurso = 'Humano' | 'Material';
export interface RecursoBase {
id: number;
nombreRecurso: string;
tipoRecurso: TipoRecurso;
unidad: string;
comunidadAutonoma: string;
provincia: string;
localidad: string;
base: string;
servicioMedicoReferencia?: string; // opcional
}
export const recursosHumanos: RecursoBase[] = [
{
id: 1,
nombreRecurso: 'Laura Gómez',
tipoRecurso: 'Humano',
unidad: 'AGRUSAN',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti',
servicioMedicoReferencia: 'Hospital La Paz',
},
{
id: 2,
nombreRecurso: 'Javier Ruiz',
tipoRecurso: 'Humano',
unidad: 'NAS 11',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti',
servicioMedicoReferencia: 'Hospital Infanta Sofía',
},
];
export const recursosMateriales: RecursoBase[] = [
{
id: 10,
nombreRecurso: 'ET 117928',
tipoRecurso: 'Material',
unidad: 'AGRUSAN',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti',
},
{
id: 11,
nombreRecurso: 'ET 117929',
tipoRecurso: 'Material',
unidad: 'AGRUSAN',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti',
},
];
Archivo gestion/mostrarRecursos.ts:
// gestion/mostrarRecursos.ts
import { recursosHumanos, recursosMateriales, RecursoBase } from '../data/recursos';
console.log('Listado de recursos humanos:');
recursosHumanos.forEach((r: RecursoBase) => {
console.log(`- ${r.nombreRecurso} (${r.unidad})`);
});
console.log('\nListado de recursos materiales:');
recursosMateriales.forEach((r: RecursoBase) => {
console.log(`- ${r.nombreRecurso} [${r.base}]`);
});
Ejemplo: Importación desde un archivo JSON
En TypeScript, los datos JSON suelen mapearse a interfaces.
Archivo data/activaciones.json (sin cambios):
[
{
"id": 100,
"recursoId": 1,
"fechaHoraInicio": "2025-01-05T08:00:00",
"fechaHoraFin": "2025-01-05T15:00:00",
"tipoJornada": "COMPLETA",
"tipoSituacion": "ACTIVIDAD",
"observaciones": "Servicio programado"
}
]
Archivo models/Activacion.ts:
// models/Activacion.ts
export interface Activacion {
id: number;
recursoId: number;
fechaHoraInicio: string;
fechaHoraFin: string;
tipoJornada: 'COMPLETA' | 'PARCIAL';
tipoSituacion: 'ACTIVIDAD' | 'NO_OPERATIVO';
observaciones?: string;
}
Archivo gestion/activaciones.ts:
// gestion/activaciones.ts
import activaciones from '../data/activaciones.json';
import { Activacion } from '../models/Activacion';
function cargarActivaciones(): void {
console.log('Activaciones registradas:');
(activaciones as Activacion[]).forEach((a) => {
console.log(`- Activación #${a.id}: recurso ${a.recursoId} (${a.tipoSituacion}, ${a.tipoJornada})`);
});
}
cargarActivaciones();
2. Importación de funciones
Archivo utils/calculos.ts:
// utils/calculos.ts
export function calcularPorcentajeActividad(total: number, enActividad: number): string {
return ((enActividad / total) * 100).toFixed(1);
}
export function formatearSituacion(situacion: string): string {
return situacion
.toLowerCase()
.replace('_', ' ')
.replace(/^\w/, (c) => c.toUpperCase());
}
Archivo informes/actividadRecursos.ts:
// informes/actividadRecursos.ts
import { calcularPorcentajeActividad, formatearSituacion } from '../utils/calculos';
const totalRecursos: number = 20;
const recursosActivos: number = 15;
console.log(
`Porcentaje de recursos en ACTIVIDAD: ${calcularPorcentajeActividad(totalRecursos, recursosActivos)}%`
);
console.log(`Situación formateada: ${formatearSituacion('BAJA_MEDICA')}`);
3. Importación de clases
Archivo models/RecursoHumano.ts:
// models/RecursoHumano.ts
export class RecursoHumano {
constructor(
public id: number,
public nombreRecurso: string,
public unidad: string,
public tipoSituacion: string
) {}
readonly tipoRecurso: string = 'Humano';
mostrarFicha(): void {
console.log(
`Recurso Humano #${this.id}: ${this.nombreRecurso} - Unidad: ${this.unidad} (${this.tipoSituacion})`
);
}
}
Archivo gestion/personal.ts:
// gestion/personal.ts
import { RecursoHumano } from '../models/RecursoHumano';
const tecnico = new RecursoHumano(1, 'Laura Gómez', 'AGRUSAN', 'ACTIVIDAD');
const medico = new RecursoHumano(2, 'Javier Ruiz', 'NAS 11', 'COMISION_SERVICIO');
tecnico.mostrarFicha();
medico.mostrarFicha();
4. Buenas prácticas en TypeScript
- Evitar
any; usarinterfaceotype. - No es necesario indicar la extensión
.tsen los imports. - Usar barrel files (
index.ts) para agrupar exports. - Separar modelos (
/models), utilidades (/utils) y lógica (/gestion).
Ejemplo con exportación por defecto:
// utils/logger.ts
export default function log(mensaje: string): void {
console.log(`[Sistema Recursos]: ${mensaje}`);
}
// main.ts
import log from './utils/logger';
log('Sistema de activaciones inicializado.');