简体   繁体   中英

TypeScript - export library with 'namespaces'

Ok, so for example I have a project with following 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 };

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:

  1. Don't use src and dist directories; arrange all files starting from the root of the project.
  2. 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.
  3. 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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM