Saltar al contenido

Ampliar un espacio de nombres a partir de tipos de paquetes

Linda, miembro de nuestro equipo, nos hizo el favor de escribir esta crónica porque conoce perfectamente este tema.

Solución:

Podemos importar un espacio de nombres en una no declaración .tsy expórtela de nuevo como un tipo extendido:

// custom-fc.ts : enhances declaration of FC namespace
import * as origFC from "fullcalendar";

declare namespace Complimentary 
    class TimeGrid 
        prepareHits(): void;
    
    let views: any;


// apply additional types to origFc and export again
export const FC: (typeof Complimentary & typeof origFC) = origFC as any;

// use-fc.ts : consumer of extended declaration
import  FC  from "./custom-fc";

console.log(FC.TimeGrid);
console.log(FC.views);

(Esto de alguna manera difiere de su escenario, ya que estoy usando @types/ paquetes y paquete web ts-loaderpero debería poder hacer algo similar).

Puede extender fácilmente el ‘calendario completo’ o cualquier otro espacio de nombres de TypeScript.

Ejemplo: crear el archivo fullcalendar-extension.d.ts

/// 

declare module 'fullcalendar' 

  export interface TimeGrid 

    customField: string;

    customMethod(arg1: number, arg2: boolean): boolean;

    prepareHits();
  

  namespace customNamespace 

    export interface AnotherTimeGrid 
      customField1: string;
      customField2: boolean;
    
  

Nota: asegúrese de que el compilador de TypeScript recoja este archivo.

Use los tipos recién definidos del módulo extendido.

// one way
import  TimeGrid  from 'fullcalendar';

const timeGrid: TimeGrid;

// second way
import * as fc from 'fullcalendar';

const timeGrid: fc.TimeGrid;
const anotherTimeGrid: fc.customNamespace.AnotherTimeGrid;

Para obtener más información sobre módulos y espacios de nombres, puede consultar la documentación de TypeScript sobre módulos y espacios de nombres y usarlos juntos.

¡Salud!

Sección de Reseñas y Valoraciones

No se te olvide dar recomendación a este artículo si te fue de ayuda.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *