36

I am building a big library with Typescript with like 100 separate ts files. Previously I used export module XXX (renamed to export namespace XXX later) for all my classes, but as books say, this is not a recommended way, I should use import instead.

So I tried importing. This worked fine:

import * as mylib from "./source/source.ts";

But as I have 100 files, I don't want to add such a line for all of them. And I want all my classes to be accessible through mylib variable.

So I tried this:

import * as mylib from "./source/";

But as soon as I do this, I get: Cannot find module './source/'

Is there a way to import all the classes from a folder with multiple files with a single line?

Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
zeroin
  • 5,863
  • 6
  • 31
  • 42
  • You could concatenate all those files. That way you only have to import a single module. Alternatively you could list all files in a directory `fs.readdir('sources')` and then `require()` then in a for each loop. – zoran404 Jul 04 '18 at 15:55

1 Answers1

43

Both module resolution strategies that tsc provides don't support such a behavior. What your desired import statement 

import * as mylib from "./source/";

is actually doing is to perform checks in this order:

1. (does package.json have a typings key? If so, import this file)
2. import * as mylib from "./source/index.ts";
3. import * as mylib from "./source/index.tsx";
4. import * as mylib from "./source/index.d.ts";

I'm assuming you're using node-style module resolution here, which you probably are since it's the recommended way. Check the typescript docs for more details on how module resolution is done in typescript.

Usually, what you're trying to accomplish is by creating an index.d.ts file, which serves as the entry point from which you're exporting the rest of your modules. I'm using angular2 as an example: Your common angular2 import looks like this:

import { Injectable } from '@angular/core'

core is just a directory that lives inside the @angular directory. Just like your source directory. However, in the core directory resides a index.d.ts file:

/**
 * @module
 * @description
 * Starting point to import all public core APIs.
 */
export * from './src/metadata';
export * from './src/util';
export * from './src/di';
....
Georg Grab
  • 2,271
  • 1
  • 18
  • 28
  • 1
    Thanks this worked fine! I started applying this approach and faced another question: http://stackoverflow.com/questions/38168733/typescript-export-all-functions-in-a-namespace maybe you know the answer to it too :) – zeroin Jul 03 '16 at 09:55
  • 1
    And another related question - within my own project, can I import all the classes (using index.d.ts maybe?) instead of importing one by one those which I use in my class? Or this is wrong idea? – zeroin Jul 03 '16 at 10:40
  • I think this is not good idea as your webpack/browserify script loader is unable to detect strict source boundaries for different configurations. For example admin module and its dependencies, public website and its dependencies. You always will download all sources even some of them will not used for special pages. – VadimB Nov 04 '16 at 16:29
  • Actually, the `.d.ts` file inside `@angular/core` is called `core.d.ts`, not `index.d.ts`, at least in Angular 4 – danwellman Jun 19 '17 at 13:57
  • Is there a logical business decision involved in this limitation or is it just a matter of performance/no one has created the feature outright? – Ciel Apr 01 '19 at 11:39