Custom TypeScript definitions file not picked up by compiler?

Question

I'd like to use the Scrollable UI tool from the jQuery Tools library in my web application, which is using TypeScript. As there is unfortunately no corresponding definitions file on the DefinitelyTyped GitHub repository, I've created my own:

/// <reference path="./jquery-1.8.d.ts"/>

declare module JQueryTools {

    interface ScrollableOptions {
        clonedClass?: string;
        disabledClass?: string;
        easing?: string;
        items?: string;
        keyboard?: any; // boolean or string
        circular?: any // boolean
        next?: string;
        prev?: string;
        speed?: number;
        vertical?: any; // boolean
    }

    interface ScrollableUIParams {

    }

    interface ScrollableEvent {
        (event: Event, ui: ScrollableUIParams): void;
    }

    interface ScrollableEvents {
        onBeforeSeek?: ScrollableEvent;
        onSeek?: ScrollableEvent;
        onAddItem?: ScrollableEvent;
    }

    interface Scrollable extends ScrollableOptions, ScrollableEvents {
    }
}

interface JQuery {
    scrollable(): JQuery;
    scrollable(methodName: string): JQuery;
    scrollable(options: JQueryTools.ScrollableOptions): JQuery;
    scrollable(optionLiteral: string, optionName: string): any;
    scrollable(optionLiteral: string, options: JQueryTools.ScrollableOptions): any;
    scrollable(optionLiteral: string, optionName: string, optionValue: any): JQuery;
}

In my .ts file, I have the following call:

$(".scrollableWrapper").scrollable({vertical: true});

On compile, I get the following error:

error TS2094: The property 'scrollable' does not exist on value of type 'JQuery'.

If I cut all the code out of my definitions file and paste it into the the jquery-1.8.d.ts file, everything appears to work fine with no compile errors. My question, then, is: why is my custom-made d.ts file not being picked up by the typescript compiler?

Answer 1

Your definition looked okay to me, so I grabbed the jQuery.d.ts from Definitely Typed and added your code to scrollable.d.ts and it all worked fine... as long as I referenced your definitions...

/// <reference path="scrollable.d.ts" />

$('#id').scrollable({ vertical: true });

This made me think that maybe you hadn't referenced your definition file (I called it scrollable.d.ts, but you might have called it jquery.scrollable.d.ts or something like that).