Headroom.js 使用 Typescript 找不到模块

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

确实正确导入了类型文件。

IDE是说可以找到目录：

我做错了什么？

编辑 2015 年 8 月 13 日

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

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

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

肯定有。

Answer 1

Headroom 不包括任何打字。这就是 TypeScript 找不到 "the directory" 的原因。你可以做两件事：

(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 2

搜索 Headroom.js 的类型：

typings search headroom

找到一组需要用这个命令安装的声明：

typings install dt~headroom --global

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

要使用已安装的类型，您必须使用 require 导入模块，然后需要设置一个与类型中声明的 class 相匹配的全局（您提到过您我正在使用 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 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 (...);
}

Headroom.js 使用 Typescript 找不到模块

Headroom.js with Typescript can't find the module

browserify

typescript

headroom.js