Question

我正在构建一个打字稿项目并使用非打字的lib调用＆＃39; draggabilly＆＃39;;

所以我试图自己宣布。

这是文件结构：

├── @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...
});

......

它显示

无法找到模块＆＃39; draggabilly＆＃39;的声明文件。＆＃39; /node_modules/draggabilly/draggabilly.js' 隐含地有一个“任何”的类型。

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

Answer 1

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

来自TypeScript documentation：

使用export =导入模块时，必须使用特定于TypeScript的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

为非基于TypeScript的第三方模块提供声明文件时，声明模块必须位于全局范围内，并且不能导入或导出 声明模块。

// @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...
});

Typescript在本地声明第三方模块

2 个答案: