Search code examples
typescriptbrowserifyheadroom.js

Headroom.js with Typescript can't find the module

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

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:

enter image description here

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

enter image description here

Solution

  • 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.