Question

我们正在从.net实体创建一个npm模块。但是我无法在我的angular2组件上使用它。

我想从index.d.ts导入（进入npm）我们决定创建一个模块以满足引用的类型

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,
}

}

我尝试使用

导入

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

并创建一个像

这样的对象

let testAddress : Address = new Address();

错误：（31,16）TS2304：找不到姓名＆＃39;地址＆＃39;。

我尝试使用

导入

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

并创建一个像

这样的对象

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

错误：（31,20）TS2694：命名空间＆＃39;＆＃39; *＆＃39;＆＃39;没有导出的会员＆＃39;地址＆＃39;。

我尝试按名称空间替换模块，但没有工作

如何在我的组件上导入最佳方式？感谢

Answer 1

我最近有必要这样做，这就是我所做的。

首先，确保为npm包使用正确的TypeScript配置（tsconfig.json）;最重要的东西如下所示：

{
    "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"]
    }
}

接下来，我们的想法是使用npm包名称作为模块。因此，在使用此软件包时，您可以执行以下操作。

import {stuffs} from "YourAwesomePackage"

npm模块的名称来自您package.json文件。在那里，您还可以在分发中提及您的主文件以及类型定义的位置。下面显示了一个示例（为简洁起见，这不包括许可证，存储库等其他信息）。

{
  "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"
  }
}

我选择在我的构建步骤中生成./index.ts（使用gulp），只导出我的包中的所有内容，为此我使用了gulp-create-tsindex。使用此功能，您可以生成index.ts，如下所示：

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

请注意，gulp-create-tsindex会使文件夹结构变平。因此，即使stuffs位于dir1/subdir2/somestuffs.ts，您仍然需要import使用上述import语法（import {stuffs} from "YourAwesomePackage"）。

使用此最小构建任务如下所示：

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')
        )
    ]);
});

希望这会有所帮助。

如何从Typescript

1 个答案: