How to create custom d file that works with specific file mapping

Viewed 27

I have declared a module for an internal javascript library so I can use said library in my typescript project. Let's say this library has 3 React components.

declare module 'internal-js-library' {
  import { FC } from 'react';

  type ComponentAProps = { ... };
  type ComponentBProps = { ... };
  type ComponentCProps = { ... };

  export const ComponentA: FC<ComponentAProps>;
  export const ComponentB: FC<ComponentCProps>;
  export const ComponentC: FC<ComponentBProps>;
}

This works as expected. Now I have full types when I use this library on a typescript file

import { ComponentA, ComponentC } from 'internal-js-library' ;

But when importing directly like this, ComponentA, ComponentB and ComponentC will be bundled when generating a build, even if I am not using ComponentB. I want to avoid that.

The solution would be to import ComponentA and ComponentC directly. However, ComponentA and ComponentC are no longer typed. Typescript no longer recognizes their type.

import ComponentA from 'internal-js-library/lib/ComponentA/ComponentA';
import ComponentC from 'internal-js-library/lib/ComponentC/ComponentC';

A workaround for this would be:

declare module 'internal-js-library/lib/ComponentA/ComponentA' {
  import { FC } from 'react';

  type ComponentAProps = { ... };

  const ComponentA: FC<ComponentAProps>;

  export default ComponentA;
}

declare module 'internal-js-library/lib/ComponentC/ComponentC' {
  import { FC } from 'react';

  type ComponentCProps = { ... };

  const ComponentC: FC<ComponentCProps>;

  export default ComponentC;
}

But now doing the following no longer works:

import { ComponentA, ComponentC } from 'internal-js-library'

How can I elegantly write my definition file so both internal-js-library/lib/ComponentX/ComponentX and internal-js-library can work?

At first I thought of doing something like this, but I can't figure it out. Doesn't seems right

declare module 'internal-js-library/lib/ComponentA/ComponentA' {
  import { FC } from 'react';

  type ComponentAProps = { ... };

  const ComponentA: FC<ComponentAProps>;

  export default ComponentA;
}

declare module 'internal-js-library/lib/ComponentB/ComponentB' {
  import { FC } from 'react';

  type ComponentBProps = { ... };

  const ComponentB: FC<ComponentBProps>;

  export default ComponentB;
}

declare module 'internal-js-library/lib/ComponentC/ComponentC' {
  import { FC } from 'react';

  type ComponentCProps = { ... };

  const ComponentC: FC<ComponentCProps>;

  export default ComponentC;
}

declare module 'internal-js-library' {
  import ComponentA from 'internal-js-library/lib/ComponentA/ComponentA';
  import ComponentB from 'internal-js-library/lib/ComponentA/ComponentA';
  import ComponentC from 'internal-js-library/lib/ComponentA/ComponentA';

  export ComponentA; // this gives an error

  export ComponentA: typeof ComponentA; // I'd have to rename the ComponentA on the import
}
0 Answers
Related