2017-02-28 77 views
0

我有以下package.json打字稿泛型函數和索引參數

{ 
    "name": "browserify-test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "dist/index.js", 
    "typings": "dist/index.d.ts", 
    "scripts": { 
     "build:tsc": "tsc --outDir dist", 
     "build:browser": "browserify src/index.ts -p tsify --standalone MyLib > dist/myLib.js" 
    }, 
    "devDependencies": { 
     "browserify": "^14.0.0", 
     "tsify": "^3.0.0", 
     "typescript": "^2.1.5" 
    } 
} 

tsconfig.json

{ 
    "compilerOptions": { 
     "noImplicitAny": true, 
     "module": "commonjs", 
     "target": "ES5", 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "sourceMap": true, 
     "declaration": true 
    } 
} 

文件src/evets.d.ts

export interface MyEvent { 
    name: string 
} 

最後切入點src/index.js

import * as events from './events'; 

export class MyLibrary { 
    public test(eventInstance: events.MyEvent) { 
     console.log(eventInstance); 
     console.log(events); 
    } 
} 

構建純打字稿版本的作品。 SO命令npm run build:tsc作品完美,但努力建立與browserify,所以調用npm run build:browser我得到以下錯誤:

> [email protected] build /home/aszmyd/tmp/browserify-test 
> browserify src/index.ts -p tsify --standalone MyLib > dist/myLib.js 

Error: Cannot find module './events' from '/home/aszmyd/tmp/browserify-test/src' 

似乎browserify不能正常消耗與d.ts擴展類型定義文件。


上面的例子在兩種情況下WORKS

  1. index.ts我導入像這樣:import * as events from './events.d;(注意結束.D

  2. 在i除去console.log(events);行(?!) - 它如何使用events.***類型但不能使用整個集合(別名)?


我想我在這裏失蹤的東西假,但即時通訊缺乏創意。

回答

1

運行

import * as events from './events'; 

嘗試導入稱爲打字稿文件「events.ts」位於同一目錄中導入文件。那是因爲它是一個相對路徑。

(進口./events.d將在同一目錄中導入events.d.ts,解釋了爲什麼「它的工作原理」)

要導入外部模塊,import語句是使用模塊名(不是路徑)製成。因此,對於一個被稱爲「事件」模塊,import語句會

import * as events from 'events' 

當導入外部模塊,編譯器會尋找一個定義文件「輸入」模塊。根據模塊的結構,這個文件可能是一個內部模塊定義,看起來像你的'event.d.ts'或外部模塊定義文件,它更可能看起來像

declare module 'events' { 
    export interface MyEvent { 
     name: string 
    } 
} 
+0

謝謝!這是有道理的。但是,如果可以使用其他文件夾中的內部模塊定義,請告訴我。即當'module.d.ts'文件不在同一個文件夾中時,我可以從'module'進行'導入*'嗎?我假設編譯器會查找'module.d.ts',然後查找'node_modules/module','../ node_modules/module'等,直到找到它。 –

+0

當然。使用以模塊名稱命名的子文件夾創建一個'typings'目錄。將模塊定義文件粘貼在該子文件夾中。在'tsconfig.json'中,確保'typings'不被排除在編譯路徑之外(即包括在內)。這就對了 –