Typescript 在本地声明第三方模块

Question

我正在构建一个 typescript 项目并使用一个非 typescript 库调用“draggabilly”；

所以我想自己声明一下。

文件结构如下:

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

源/应用程序.ts

import * as Draggabilly from 'draggabilly';

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

......

这表明

Could not find a declaration file for module 'draggabilly'. '/node_modules/draggabilly/draggabilly.js' implicitly has an 'any' type.

所以我尝试创建本地声明文件:@types/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 文件中定义，而且 typescript 根本找不到声明文件。

Answer 1

问题出在 export = Draggabilly; 行——你必须使用特定于 TypeScript 的语法 import let = require("module") 来导入它:

来自TypeScript documentation :

When importing a module using export =, TypeScript-specific import let
= require("module") must be used to import the 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...
});