如何从Typescript上的外部模块导入类

Question

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

这就是结构模块： enter image description here

我想从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：找不到名称“地址”。

我尝试使用

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

导入并创建一个对象像

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

错误：（31，20）TS2694：命名空间 '' * '' 没有出口构件 '地址' 。

我试图通过命名空间来替代模块，但没有奏效

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

Answer 1

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

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

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

希望这有助于。