Headroom.js with Typescript can't find the module

Question

Anyone got this working in Typescript land? Googling around and it appears not.

Tying to incorporate this library into my Browserify project without any luck.

I have this typings file for v0.9.3 of headroom.js

• https://github.com/retyped/headroom-tsd-ambient/blob/master/headroom.d.ts
• node module installed as node_modules/headroom.js/ (yes it's a folder; I have never seen a node module named this way before.)
• headroom.js's main entry as per package.json is node_modules/headroom.js/dist/headroom.js

When I try to import the module into my app, it can't be found.

{ [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' }

Have tried all these permutations:

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

The typings file is definitely being imported as used correctly.

IDE is saying that it can find the directory:

What am I doing wrong?

Edit 13-08-2015

1. app.ts pulls in the typings from the typings dir like this:

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

2. index.d.ts contains these typings /// <reference path="bootstrap/bootstrap.d.ts" /> /// <reference path="custom.d.ts" /> /// ..etc... /// <reference path="Headroom/headroom.d.ts" />

It's definitely there.

Answer 1

A search for typings for Headroom.js:

typings search headroom

Finds one set of declarations that needs to be installed with this command:

typings install dt~headroom --global

The installation insists upon the --global option and that's the first hint at what's going on. The installed typings are global; they are not typings for a module (there is no module defined in the .d.ts). So TypeScript will not associate them with an imported or required module.

To use the installed typings, you will have to use require to import the module and will then need to set up a global that matches the class declared in the typings (you mentioned you're using Browserify, so you should be able to use global; window would also work):

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

Looking at dist/headroom.js, it's apparent that it can be consumed via AMD, CommonJS or plain JavaScript. To reflect that, I guess the author of the typings declarations for Headroom.js has made them global.

Answer 2

Headroom does not include any typings. That's why TypeScript can not find "the directory". You can do two things:

(1) Add your own .d.ts file for headroom and make sure it is available on runtime.

(2) Use const Headroom = require('headroom.js'); to import it. Depending on your browserify configuration, it should include headroom when you build your project. Note that you will not have any typings for headroom.

We're using (2) with webpack and it works fine. When you're writing require('foo') webpack will try to find a npm package called "foo" and add it to your project. TypeScript is ok, with using require because it is defined in one of the included .d.ts files (node.js for example). But of course, you'll be missing the autocompletion features etc of TypeScript.

Answer 3

I made something similar to @Sebastian answer to get it working. In the src/ folder, created a new file called headroom.js.d.ts containing just:

declare module 'headroom.js';

And that fixed it. In my functional component, I was able to do this:

import Headroom from "headroom.js";

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

    return (...);
}