declare module in typescript with both default and named exports

Question

I am using a library called "react-images" which doesn't have up-to-date type definitions. As a result, I need to open up the namespace and create them. The problem is, the library has both default and named exports and I'm having trouble getting typescript to handle both kinds of exports correctly.

Named imports work out of the box, all you need to do is declare the classes. If you want a default export though, you need to use the export syntax discussed here. Unfortunately, when I added the line export = Carousel, the named imports broke.

I need to be able to do this:

// project.tsx

import Carousel, { Modal, ModalGateway } from "react-images";

Here's what I've got so far:

// reactImages.d.ts

import React from "react";

declare module "react-images" {
  interface ModalProps {
    onClose: () => void;
  }

  declare class Modal extends React.Component<ModalProps> {
    public constructor(props: ModalProps);
  }

  declare class ModalGateway extends React.Component<> {
    public constructor(props: ModalGatewayProps);
  }

  interface CarouselProps {
    currentIndex: number;
    views: { source: string }[];
  }

  declare class Carousel extends React.Component<CarouselProps> {
    public constructor(props: CarouselProps);
  }
  export = Carousel
}

Did you find a solution to this?

creerow
– creerow

2020-09-22 19:46:28 +00:00
Commented Sep 22, 2020 at 19:46 — creerow
– creerow, Commented Sep 22, 2020 at 19:46
nope, I did not find a solution

williamcodes
– williamcodes

2020-09-23 11:45:10 +00:00
Commented Sep 23, 2020 at 11:45 — williamcodes
– williamcodes, Commented Sep 23, 2020 at 11:45

Jon Sakas · Accepted Answer · 2021-04-16 05:06:01Z

4

Try this:

export { Modal, ModalGateway };
export default Carousel;

answered Apr 16, 2021 at 5:06

Jon Sakas

2,2921 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marek Dorda · Accepted Answer · 2021-07-11 10:59:21Z

Since I haven't found any solution anywhere, I would like to share my solution. The key is to create an interface with default anonymous method and export a variable instance of this interface.

Example

module.d.ts

interface GeoTz {
    /**
     * Get TZ ids for lat/lon. It can throw an exception if coordinates are invalid.
     *
     * @param lat Latitude
     * @param lon Longitude
     * @returns TZ ids for coordinates, e.g. ['Asia/Shanghai', 'Asia/Urumqi']
     * @throws An exception if coordinates are invalid
     */
    (lat: string | number, lon: string | number): string[];

    /**
     * Can change the cache behavior, such as preload everything into memory or use custom get/set store functions
     *
     * @param opts Custom options for cache
     */
    setCache(opts: {
        preload?: boolean;
        store?: {
            get: (key: string) => import('geojson').GeoJSON;
            set: (key: string, data: import('geojson').GeoJSON) => void;
        };
    }): void;
}

declare module 'geo-tz' {
    const geoTz: GeoTz;
    export = geoTz;
}

Then in code both works:

import geoTz from 'geo-tz';

geoTz.setCache({ preload: true });
geoTz('49.000', '14.000');

Collectives™ on Stack Overflow

declare module in typescript with both default and named exports

2 Answers 2

Comments

Example

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Example

Comments

Your Answer

Sign up or log in

Post as a guest

Related