带有 Typescript 的 Headroom.js 找不到模块

Question

有人在 Typescript 领域得到这个工作吗？谷歌搜索，似乎没有。

试图将此库合并到我的 Browserify 项目中，但没有任何运气。

我有这个 headroom.js v0.9.3 的分型文件

• https://github.com/retyped/headroom-tsd-ambient/blob/master/headroom.d.ts
• 节点模块安装为node_modules/headroom.js/（是的，它是一个文件夹；我以前从未见过以这种方式命名的节点模块。）
• headroom.js 根据 package.json 的主要条目是node_modules/headroom.js/dist/headroom.js

当我尝试将模块导入我的应用程序时，找不到它。

{ [TypeScript error: resources/assets/typescript/app.ts(12,24): Error TS2307: Cannot find module 'headroom.js'.]
  message: 'resources/assets/typescript/app.ts(12,24): Error TS2307: Cannot find module \'headroom.js\'.',
  fileName: 'resources/assets/typescript/app.ts',
  line: 12,
  column: 24,
  name: 'TypeScript error' }

已经尝试了所有这些排列：

import {Headroom} from "headroom.js";    //nope
import {Headroom} from "headroom\.js";   //nope
import {Headroom} from "Headroom\.js";   //nope
import {Headroom} from "headroomjs";     //nope
import {Headroom} from "headroomjs";     //nope
import {Headroom} from "headroom";       //nope
import {Headroom} from "Headroom";       //nope
import * as headroom from "headroom.js"; // nope

typings 文件肯定是按照正确使用的方式导入的。

IDE 说它可以找到目录：

我做错了什么？

编辑 13-08-2015

1。 app.ts 从typings 目录中提取类型，如下所示：

/// <reference path="../../../typings/index.d.ts" />

1. index.d.ts 包含这些类型 /// <reference path="bootstrap/bootstrap.d.ts" /> /// <reference path="custom.d.ts" /> /// ..etc... /// <reference path="Headroom/headroom.d.ts" />

肯定是有的。

Answer 1

搜索Headroom.js 的类型：

typings search headroom

查找需要使用此命令安装的一组声明：

typings install dt~headroom --global

安装坚持使用--global 选项，这是发生情况的第一个提示。安装的类型是global；它们不是模块的类型（.d.ts 中没有定义模块）。因此 TypeScript 将不会将它们与导入的或必需的模块相关联。

要使用安装的类型，你必须使用require 来导入模块，然后需要设置一个与类型中声明的类匹配的全局（你提到你正在使用 Browserify，所以你应该能够使用global；window 也可以）：

global["Headroom"] = require("headroom.js");
let h = new Headroom(...); // TypeScript should use the typings here

查看dist/headroom.js，很明显它可以通过 AMD、CommonJS 或纯 JavaScript 使用。为了反映这一点，我猜Headroom.js 的类型声明的作者已将它们设为全局。

Answer 2

净空不包括任何类型。这就是 TypeScript 找不到“目录”的原因。你可以做两件事：

(1) 添加您自己的 .d.ts 文件作为空间，并确保它在运行时可用。

(2) 使用const Headroom = require('headroom.js'); 导入。根据您的 browserify 配置，它应该在您构建项目时包含空间。请注意，您不会有任何类型的余量。

我们将 (2) 与 webpack 一起使用，它工作正常。当你写 require('foo') 时，webpack 会尝试找到一个名为“foo”的 npm 包并将其添加到你的项目中。 TypeScript 可以，使用 require 因为它是在包含的 .d.ts 文件之一中定义的（例如 node.js）。但当然，你会错过 TypeScript 的自动完成功能等。

Answer 3

我做了一些类似于@Sebastian 的回答来让它工作。在src/ 文件夹中，创建了一个名为headroom.js.d.ts 的新文件，其中仅包含：

declare module 'headroom.js';

这就解决了。在我的功能组件中，我能够做到这一点：

import Headroom from "headroom.js";

export const Navigation: React.FC = () => {
    React.useEffect(() => {
        let headroom = new Headroom(document.getElementById("navbar-main"));
        headroom.init();
    }, [classes]);

    return (...);
}