CODEWITHSUNDEEP
typescriptbrowserifytsd
Simon
Simon

Reputation: 2623

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]);
    });

Upvotes: 2

Views: 4269

Answers (2)

Iryna
Iryna

Reputation: 1

I had the same problem and my solution:

let slider = document.getElementById('slider') as noUiSlider.target;

Upvotes: 0

Nitzan Tomer
Nitzan Tomer

Reputation: 164129

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
    }
}

Upvotes: 6

Related Questions