在打字稿中声明模块,同时包含默认导出和命名导出

时间:2019-11-26 23:14:21

标签: reactjs typescript

我正在使用一个名为“ react-images”的库,它没有最新的类型定义。结果,我需要打开命名空间并创建它们。问题是,该库既具有默认导出又具有命名导出功能,而我很难让打字稿正确处理两种导出。

带名称的导入可以直接使用,您需要做的就是声明类。但是,如果要使用默认导出,则需要使用the export syntax discussed here。不幸的是,当我添加行export = Carousel时,命名的导入中断了。

我需要能够做到这一点:

// project.tsx

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

这是到目前为止我得到的:

// 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
}

2 个答案:

答案 0 :(得分:0)

试试这个:

export { Modal, ModalGateway };
export default Carousel;

答案 1 :(得分:0)

由于我没有在任何地方找到任何解决方案,我想分享我的解决方案。关键是创建一个默认匿名方法的接口,并导出这个接口的一个变量实例。

示例

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;
}

然后在代码中都有效:

import geoTz from 'geo-tz';

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