Question

我正在尝试从ReactCrop包中导入ReactCrop组件。

它的index.d.ts文件如下

export as namespace ReactCrop;

declare namespace ReactCrop {
  interface Crop {

 } 
  //other interfaces....
}

declare class ReactCrop extends Component<ReactCrop.ReactCropProps> {
   .....
}

export = ReactCrop;

我检查了有关声明合并的打字稿手册，它说，当合并一个类和名称空间时，名称空间必须导出该类。像下面的

class Album {
  label: Album.AlbumLabel;
}
namespace Album {
  export class AlbumLabel { }
}

但是ReactCrop类型定义不会导出ReactCrop类。

那么当同名“ ReactCrop”是类和命名空间的别名时，如何导入组件？

Answer 1

避免使用export = ReactCrop;而不是我建议export class ReactCrop {...

第二件事：您不能导出2个具有相同名称*的项目。您可以通过

用类导出名称空间

export namespace ReactCrop {
   export class Triangle { }
}
// and 
new ReactCrop.ReactCrop();

我还建议更改一个类或名称空间的名称，以免出错。

---编辑---

您可以在一个文件中导出具有相同名称的名称空间和类。 TS将根据使用情况选择正确的TS。

Answer 2

此声明在语义上没有任何问题，但这并不意味着它是有效的（意味着它描述了库中实际发生的事情）。

通常，名称空间可通过在其中添加类型或可执行代码来扩展定义（函数，类，枚举）。编写声明的指南建议将导出的类保留在名称空间中，但这只是一个约定，而不是技术要求。

在这种情况下，名称空间ReactCrop包含一些接口，例如Crop。这仅意味着您可以通过导入单个可导出内容来使用此库提供的所有内容。

import ReactCrop from 'whatever';

type Crop = ReactCrop.Crop

<ReactCrop />

这是有效的打字稿声明文件吗？

2 个答案: