How can I import classes from external module on T

问题:

We are creating an npm module from .net entities. But I'm not able to use it on my angular2 component.

That's the structure module: enter image description here

I want to import from index.d.ts (into npm) we decide to create a module in order to satisfy the types referenced

declare module cio {
export class Address {
    addressLine1: string;
    addressLine2: string;
    city: string;
    state: string;
    country: string;
    postalCode: string;
}

. . .

declare module cio {
 export class Business {
    id: string;
    typeName: string;
    createdDate: Date;
    lastModifiedDate: Date;
    createdBy: string;
    lastModifiedBy: string;
    isTest: boolean;
    isDeleted: boolean;
    taxId: string;
    businessType: BusinessType;
    businessName: string;
    address: Address;
    phone: string;
    mobile: string;
    fax: string;
    email: string;
}
enum BusinessType {
    Individual = 1,
    Company = 2,
}

}

I tried to import using

import { Address, ... } from 'npm_module_name/index';

and create an object like

let testAddress : Address = new Address();

Error:(31, 16) TS2304:Cannot find name 'Address'.

I tried to import using

import { cio } from 'npm_module_name/index/';

and create an object like

let testAddress : cio.Address = new cio.Address();

Error:(31, 20) TS2694:Namespace ''*'' has no exported member 'Address'.

I tried to replace module by namespace but didn't work

How is the best way to import on my component? Thanks

回答1:

I recently had the need to do this, and here is what I have done.

First of all, make sure you are using the correct TypeScript configuration (tsconfig.json) for npm package; most important stuffs are shown below:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true, // this is needed to generate the type definitions (*.d.ts)
        "moduleResolution": "node",
        "sourceMap": true,
        "lib": ["es6", "es2017", "dom"]
    }
}

Next, the idea is to use the npm package name as module. So you can do something like following while using this package.

import {stuffs} from "YourAwesomePackage"

The name of the npm module comes naturally from you package.json file. There you can also mention your main file in the distribution as well as the location of your type definitions. An example is shown below (this does not include other information such as licences, repository etc. for brevity).

{
  "name": "YourAwesomePackage",        // this is your npm package name.
  "version": "2.0.0",                  // version is needed to publish
  "main": "dist/index.js",             // Your main script.
  "typings": "dist/definitions/index", // location of your type definitions
  "typescript": {
    "definition": "dist/definitions/index"
  }
}

I chose to generate the ./index.ts in my build step (using gulp) that just exports everything from my package, and for this I have used gulp-create-tsindex. Using this you can generate a index.ts which looks like follows:

export * from "./dir1/file1";
export * from "./dir1/file2";
export * from "./dir2/file1";
export * from "./dir2/file2";
...

Note that gulp-create-tsindex flattens the folder structure. Thus, even if stuffs is in dir1/subdir2/somestuffs.ts, you still need to import it using the above mentioned import syntax (import {stuffs} from "YourAwesomePackage").

Using this a minimal build task looks as follows:

const ts = require("gulp-typescript");
const tsProject = ts.createProject("path/to/tsconfig");
const tsindex = require('gulp-create-tsindex');
const merge = require('merge2');

gulp.task("build-ts", function() {

    const tsResult = tsProject.src()
        .pipe(tsindex('path/to/src/folder/index.ts')) // location of your new index.ts file
        .pipe(tsProject());

    return merge([
        tsResult.dts.pipe(gulp.dest('path/to/dist/folder/definitions')), //location of your type definitions (don't use a separate 'definitions' folder if you don't like it.
        tsResult.js.pipe(
            gulp.dest('path/to/dist/folder')
        )
    ]);
});

Hope this helps.