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

Question

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

想把这个库合并到我的 Browserify 项目中，但没有任何运气。

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

https://github.com/retyped/headroom-tsd-ambient/blob/master/headroom.d.ts
节点模块安装为node_modules/headroom.js/（是的，它是一个文件夹；我以前从未见过以这种方式命名的节点模块。）
根据 package.json，headroom.js 的主要条目是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说它可以找到目录：

我究竟做错了什么？

编辑 13-08-2015

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" />

它肯定在那里。

score 0 · Accepted Answer

搜索类型Headroom.js：

typings search headroom

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

typings install dt~headroom --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 使用。为了反映这一点，我猜 types 声明的作者Headroom.js已经使它们成为全球性的。

score 0 · Accepted Answer

净空不包括任何类型。这就是 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 的自动完成功能等。

score 0 · Accepted Answer

我做了类似于@Sebastian answer的东西来让它工作。在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 (...);
}

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

3 回答 3

Related

Reference