TypeScript - export library with 'namespaces'

Question

Ok, so for example I have a project with following file structure:

file structure

Let the project be called 'my-module'

I'd like import this library to other project like that:

import { User, Home } from 'my-module/Models'
import { BaseWindow } from 'my-module/View'

How I can do that? How to prepare .d.ts file?

EDIT:

Project

Content of the above files are simple for example:

interface IUser {
  name: string;
  age: number;
}

type UserOptions = IUser & {
  foo: string
}

class User implements IUser {
  private foo: string;
  name: string;
  age: number;
  constructor(options: UserOptions) {
    this.name = options.name;
    this.age = options.age;
    this.foo = options.foo;
  }
}

export { User, UserOptions };

If these imports have runtime content (e.g., a class and not just an interface), you'll need a .ts file, not just a .d.ts file. Its location needs to match the import path you want to use. I.e., you'd create src/Models/index.ts and src/View/index.ts files that import the necessary items from the source files shown in the picture and re-export them as named exports. I can provide the content of the wrapper .ts file for you if you add the exports of your existing source files to the question. — Matt McCutchen
– Matt McCutchen, Commented Oct 25, 2018 at 15:14

Matt McCutchen · Accepted Answer · 2018-10-27 00:46:04Z

2

I'm guessing what you want in src/Models/index.ts is:

export * from "./User";
export * from "./Home";

Then, assuming you have module resolution set up appropriately, you can write:

import { User, UserOptions } from "my-module/Models";

and User and UserOptions will refer to the class and the type alias from src/Models/User.ts, respectively. If src/Models/User.ts and src/Models/Home.ts declare a symbol with the same name, I believe the first export * statement wins.

Module resolution issue

If an import of my-module/ is giving you completions of src and dist, then you would need to import the full relative path to the .js and .d.ts files (which should be next to each other). I assume these files are under dist. If you don't like the dist in your import path, you have a few options, none of them great:

Don't use src and dist directories; arrange all files starting from the root of the project.
Use a module bunder or loader that you can customize so that import "my-module/Models" looks in the dist folder. If your bundler or loader doesn't already integrate with TypeScript, use TypeScript's path mapping options to make TypeScript's module resolution behavior mirror that of your bundler or loader.
Redirect each import path individually to the proper files under dist by manually creating either a pair of .js and .d.ts files that import the real paths or a package.json file with main and types fields that refer to the real paths.

edited Oct 27, 2018 at 0:46

answered Oct 26, 2018 at 13:18

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WybornyWypiek Over a year ago

I suppose I have problem with module resolution (it's new topic for me) because in other project when I type my-module/ I see folders dist, node_modules and src. I also do not know what I should type in src/index.ts. Is import './Models enough?

Matt McCutchen Over a year ago

I updated the answer to discuss module resolution. You don't have to put anything in src/index.ts unless you want to import from it, in which case what you put there would depend on how you want to write the imports.

Collectives™ on Stack Overflow

TypeScript - export library with 'namespaces'

1 Answer 1

Module resolution issue

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Module resolution issue

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related