Typescript 1.8 modules: import all files from folder

Question

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?

Solution

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';
....

Comments

[zeroin]

Thanks this worked fine! I started applying this approach and faced another question: stackoverflow.com/questions/38168733/… maybe you know the answer to it too :)

[zeroin]

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?

[VadimB]

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.

[danwellman]

Actually, the .d.ts file inside @angular/core is called core.d.ts, not index.d.ts, at least in Angular 4

[Ciel]

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?