2017-08-17 60 views
1

我們從.net實體創建一個npm模塊。但是我無法在我的angular2組件上使用它。如何從Typescript上的外部模塊導入類

這就是結構模塊: 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:命名空間 '' * '' 沒有出口構件 '地址' 。

我試圖通過命名空間來替代模塊,但沒有奏效

如何導入我的組件的最佳方式?謝謝

+0

你能更具體地說明你試過的東西和你得到的錯誤嗎?這會幫助我們幫助你。謝謝。 – DeborahK

+0

帶有類的模塊必須對包含要導入它的組件的模塊可見。它是應用程序模塊中的進口數組的一部分嗎? –

+0

@DeborahK我向我的帖子添加更多信息,謝謝。 – nailujpeloz

回答

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平展的文件夾結構。因此,即使stuffsdir1/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') 
     ) 
    ]); 
}); 

希望這有助於。

+0

感謝您的幫助,我們決定基於Swagger生成模型 – nailujpeloz

相關問題