typescript - 如何创建与特定文件映射一起使用的自定义 d 文件

Question

我已经为内部 javascript 库声明了一个模块，因此我可以在我的 typescript 项目中使用该库。假设这个库有 3 个 React 组件。

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

这按预期工作。现在，当我在打字稿文件上使用这个库时，我有了完整的类型

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

但是当像这样直接导入时，ComponentA,ComponentB并且ComponentC会在生成构建时被捆绑，即使我没有使用ComponentB. 我想避免这种情况。

ComponentA解决方案是直接导入ComponentC。但是，ComponentA并ComponentC不再键入。Typescript 不再识别它们的类型。

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

解决方法是：

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

但是现在执行以下操作不再有效：

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

我怎样才能优雅地编写我的定义文件，以便两者都internal-js-library/lib/ComponentX/ComponentX可以internal-js-library工作？

起初我想做这样的事情，但我想不通。似乎不对

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
}

标签： typescripttypescript-typings