Módulo 2 — Importación de elementos en TypeScript

1. Importación de datos

La importación desde archivos estáticos es necesaria para el desarrollo de aplicaciones, permitiendo una estructura más clara y sencilla, además de separar funcionalidades. Estos archivos pueden contener desde datos crudos como los .json hasta componentes de la aplicación web, como por ejemplo en frameworks modernos.

A continuación se verá como usar las importaciones desde un archivo typescript.

La sentencia import es la que permitirá el uso de elementos de otro documento en mi código, siempre y cuando el mismo se haya exportado con la sentencia export.

---

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; usar interface o type.
• No es necesario indicar la extensión .ts en 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.');