Typescript在本地聲明第三方模塊

Question

我正在構建一個打字稿項目並使用非打字稿庫調用'draggabilly';

所以我試圖自己聲明。

這裏是文件結構：

├── @types 
│ └── draggabilly 
│  └──index.d.ts 
├── node_modules 
├── package.json 
├── README.md 
├── src 
│ ├── index.ts 
│ └── application.ts 
└── tsconfig.json 

的src/application.ts

import * as Draggabilly from 'draggabilly'; 

new Draggabilly('#dragItem', { 
    // options... 
}); 

...... 

它表明

找不到聲明文件模塊 'draggabilly'。 '/node_modules/draggabilly/draggabilly.js' 隱含地具有'任何'類型。

所以我嘗試創建本地聲明文件：@類型/ draggabilly/index.d.ts：

export as namespace draggabilly; 

export = Draggabilly; 

declare class Draggabilly { 
    constructor(selector: string, options: any); 
} 

則包括tsconfig.json類型的路徑：

{ 
    "compilerOptions": { 
     ...... 
     "typeRoots": [ 
      "./node_modules/@types", 
      "./@types" 
     ] 
    } 
} 

但錯誤仍然存​​在。所以我想知道什麼是錯在這裏，什麼是構建第三方模塊申報文件在本地

我創建了一個示範庫的這個問題在GitHub上的正確方法： https://github.com/ZheFeng/test-ts-types

問題不僅是如何我們在.d.ts文件內部定義，但打字稿根本找不到聲明文件。

Answer 1

的問題是該行export = Draggabilly; - 你必須使用特定的打字稿語法import let = require("module")將其導入：

從TypeScript documentation：

當使用導出導入模塊=，打字稿必須使用特定的import let = require("module")導入模塊。

所以，你的進口應該是：

import Draggabilly = require("draggabilly");

---

如果你想使用ES6式導入，您可以修改您 index.d.ts象下面這樣：

export as namespace draggabilly; 

export class Draggabilly { 
    constructor(selector: string, options: any); 
} 

...和進口它是這樣的：

import * as draggabilly from 'draggabilly'; 

new draggabilly.Draggabilly('#dragItem', { 
    // options... 
}); 

Answer 2

Wh en作爲第三方模塊，該模塊提供聲明文件非打字稿爲主，申報模塊必須在全球範圍內，和申報模塊之外沒有進口或出口。

// @types/draggabilly/index.d.ts 
declare module "draggabilly" { 
    class Draggabilly { 
     constructor(selector: string, options: any); 
    } 

    export = Draggabilly; 
} 

// src/application.ts 
import Draggabilly = require("draggabilly"); 

new Draggabilly("#dragItem", { 
    // options... 
});