typescriptbrowserifytsd

Property 'noUiSlider' does not exist on type 'HTMLElement'


This is a road block. What am I doing wrong?

....
/// <reference path="../../../typings/tsd.d.ts" />
var slider:HTMLElement = document.getElementById('slider');

noUiSlider.create(slider, {
    start: +$input.val(),
    step: +$input.prop('step'),
    behaviour: 'tap',
    range: {
        'min': +$input.prop('min'),
        'max': +$input.prop('max')
    },
    format: wNumb({
        decimals: 0,
        thousand: ','
    })
});

// this barfs in TS — error in as title of this post
slider.noUiSlider.on('update', (values, handle) => {
    $input.val(values[0]);
});

// this does too.
<HTMLElement>slider.noUiSlider.on('update', (values, handle) => {
    $input.val(values[0]);
});

My TSD file contains the nouislider typing from https://github.com/retyped/nouislider-tsd-ambient/blob/master/nouislider.d.ts

Error details:

{ [TypeScript error: resources/assets/typescript/common.ts(44,25): Error TS2339: Property 'noUiSlider' does not exist on type 'HTMLElement'.]
    message: 'resources/assets/typescript/common.ts(44,25): Error TS2339: Property \'noUiSlider\' does not exist on type \'HTMLElement\'.',
    fileName: 'resources/assets/typescript/common.ts',
    line: 44,
    column: 25,
    name: 'TypeScript error' }

Thoughts?

Edit: My IDE (PHPStorm) is hinting that there could be an error. enter image description here That points to lib.es6.d.ts and of course noUiSlideraint going to be there. enter image description here

Edit (solution):

var slider = document.getElementById('slider') as noUiSlider.Instance;

    noUiSlider.create(slider, {
      //...blah...
    });

    slider.noUiSlider.on('update', (values, handle) => {
        $input.val(values[0]);
    });

Solution

  • Based on the linked d.ts it seems that you need to do:

    var slider: noUiSlider.Instance = document.getElementById('slider') as noUislider.Instance;
    

    They don't seem to change the HTMLElement interface, instead they extend it with noUiSlider.Instance:

    declare module noUiSlider {
        ...
        interface noUiSlider {
            ...
        }
    
        interface Instance extends HTMLElement {
            noUiSlider: noUiSlider
        }
    }