Is this a valid typescript declaration file?

2
votes

i am trying to import a ReactCrop component from ReactCrop package.

it's index.d.ts file is as follows

export as namespace ReactCrop;

declare namespace ReactCrop {
  interface Crop {

 } 
  //other interfaces....
}

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

export = ReactCrop;

i checked the typescript manual about declaration merging, it says, when merging a class and namespace, the namespace has to export the class. like below 

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

But the ReactCrop type definition, does not export the ReactCrop class.

So how can i import the Component when the same name "ReactCrop" is an alias for Class and Namespace?

2
typescript

2 Answers

1
votes

Avoid export = ReactCrop;. Instead, I suggest export class ReactCrop {...}.

Second thing: you cannot export two items with the same name *. You can export the namespace with the class by:

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

Also I suggest that you change the names of one class or namespace to avoid mistakes.

---Edited---

  • You can export the namespace and class with the same name in one file. TS based on usage will choose correct one.
0
votes

There is nothing semantically wrong with this declaration, but it doesn't mean it's valid (meaning it describes what is actually happening in the library).

In general, namespaces can be used to extend definitions (functions, classes, enums) by adding either just types or executable code inside. The guide to authoring declaration recommends keeping the exported class within the namespace, but that's a convention, not a technical requirement.

In this case, the namespace ReactCrop includes some interfaces like Crop. This only means you can consume everything this library offers by importing a single exportable.

import ReactCrop from 'whatever';

type Crop = ReactCrop.Crop

<ReactCrop />