Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • E ECMAscript-Typescript
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 11
    • Issues 11
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Metrics
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • imunnic
  • ECMAscript-Typescript
  • Wiki
  • Modulo 2

Last edited by imunnic Dec 19, 2025
Page history

Modulo 2

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; 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.');
Clone repository

Índice

  • Inicio
  • Modulo 0. Instalaciones inciales
  • Modulo 1. Sitaxis básica
  • Modulo 2. Importaciones en Javascript
  • Modulo 3. Interacción con el BOM y con el DOM
  • Modulo 4. Uso de servicios y API REST