19

If most directories of a project contain no more than 2-3 TypeScript files and all of their exports should be accessible when importing the containing directory somewhere else, this results in a lot of index.ts files with predictable content.

Example

Directory: my-component

my-component-config.ts
my-component.ts
index.ts

What does index.ts contain? Of course, it contains

export * from "./my-component-config"
export * from "./my-component"

Which is obvious.

For 10 component directories, that means: 10 index.ts files containing 100% redundant information.

How can I make TypeScript(/Node) implicitly create index.ts files on the fly, that need not be stored on the hard disk?

ideaboxer
  • 3,863
  • 8
  • 43
  • 62

2 Answers2

16

Component isn't a well defined concept in TypeScript & node.js, but module and package are.

In general, module is a source file, let's ignore the exceptions. So by creating index.ts files per directory, you are generating façade modules aggregating only a few file/modules each. If all you are looking to do is organize your source files into logical components, you don't need the per-directory façade, you can simply import each file individually rather than a directory at a time.

At a higher level, if you have a package that consists of a number of different directories, it can have a single index.ts façade at package-level. That file would exported each file/module just once, no need for index.ts per directory. So this might look like (assuming each is a .ts file): 

export * from './IntStream';
export * from './misc/Interval';
export * from './misc/IntervalSet';
export * from './Lexer';
...
Burt_Harris
  • 6,415
  • 2
  • 29
  • 64
  • I see. Oftentimes I even import files individually rather than a directory at a time. But since I prefer dealing with short paths, usually no more than 2 segments, I prefer importing directories. I give you an example: Thanks to an `index.ts` file, I can import `lib/dialog/dialog.ts` using `import { Dialog } from "lib/dialog"` rather than `import { Dialog } from "lib/dialog/dialog"`. See the difference? And now imagine I do suchlike imports in hundreds of TypeScript files. – ideaboxer Jun 18 '17 at 08:34
  • Did you mean `from "./lib/dialog/dialog"`. I this its safest to use at least one façade so that any consuming module doesn't have any knowledge of the internal directory structure. – Burt_Harris Jun 18 '17 at 11:51
  • I mean `from "lib/dialog/dialog"`, since its parent folder is specified as a modules directory. Going without any façades does not burden me with a considerable safety loss. But using façades for small components burdens me with a considerable efficiency loss. I can guarantee safety by the use of access modifiers and `readonly`. – ideaboxer Jun 18 '17 at 12:09
  • It's personal opinion, but I would recommend you **not** have external references that that dig into the directory structure (e.g. `from "lib/dialog/dialog"`. IMHO, that exposes too much of package `lib`'s internal structure. Its not a hard-and-fast rule, if you'd like to share a specific project on GitHub or something, I'd be happy to review and comment on your specific case. – Burt_Harris Jun 27 '17 at 15:59
  • Also recognize that your package-level façade may contain more than just the re-export statements. E.g. it might be good to expose a higher-level function that uses your `dialog` class, rather than (or in addition to) exposing the class itself. – Burt_Harris Jun 27 '17 at 16:01
  • Usually, a component like my `lib/dialog` contains not much code: one class, some interfaces, some types. The class must be exported and there is no need to hide any of the interfaces/types because they are passive. If one of the components in `lib` has something to hide: exceptions are ok. But most components are like `lib/dialog`. – ideaboxer Jun 28 '17 at 19:12
3

I don't think there's a way to import a directory in TS without and index file

check these questions if you haven't

How to import all modules from a directory in TypeScript?

Typescript 1.8 modules: import all files from folder

I think the best approach is to write a script to generate index.ts that imports all files in the directory, and run that script every time you add/remove a file.

gafi
  • 12,113
  • 2
  • 30
  • 32