<p dir="auto">IDBKeyRange has defined <strong>variable only member</strong> (except the prototype).<br>
This <strong>type can not be declare nor cast</strong>.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Example of other definition.
interface SVGFEMorphologyElement extends SVGElement, SVGFilterPrimitiveStandardAttributes {
    operator: SVGAnimatedEnumeration; // interface only
    radiusX: SVGAnimatedNumber; // interface only
    radiusY: SVGAnimatedNumber; // interface only
    in1: SVGAnimatedString; // interface only
    SVG_MORPHOLOGY_OPERATOR_UNKNOWN: number; // common
    SVG_MORPHOLOGY_OPERATOR_ERODE: number; // common
    SVG_MORPHOLOGY_OPERATOR_DILATE: number; // common
}
declare var SVGFEMorphologyElement: {
    prototype: SVGFEMorphologyElement;
    new(): SVGFEMorphologyElement;
    SVG_MORPHOLOGY_OPERATOR_UNKNOWN: number; // common
    SVG_MORPHOLOGY_OPERATOR_ERODE: number; // common
    SVG_MORPHOLOGY_OPERATOR_DILATE: number; // common
}"><pre class="notranslate"><span class="pl-c">// Example of other definition.</span>
<span class="pl-k">interface</span> <span class="pl-smi">SVGFEMorphologyElement</span> <span class="pl-k">extends</span> <span class="pl-smi">SVGElement</span><span class="pl-kos">,</span> <span class="pl-smi">SVGFilterPrimitiveStandardAttributes</span> <span class="pl-kos">{</span>
    <span class="pl-c1">operator</span>: <span class="pl-smi">SVGAnimatedEnumeration</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c1">radiusX</span>: <span class="pl-smi">SVGAnimatedNumber</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c1">radiusY</span>: <span class="pl-smi">SVGAnimatedNumber</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c1">in1</span>: <span class="pl-smi">SVGAnimatedString</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c1">SVG_MORPHOLOGY_OPERATOR_UNKNOWN</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span> <span class="pl-c">// common</span>
    <span class="pl-c1">SVG_MORPHOLOGY_OPERATOR_ERODE</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span> <span class="pl-c">// common</span>
    <span class="pl-c1">SVG_MORPHOLOGY_OPERATOR_DILATE</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span> <span class="pl-c">// common</span>
<span class="pl-kos">}</span>
<span class="pl-k">declare</span> <span class="pl-k">var</span> <span class="pl-smi">SVGFEMorphologyElement</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">prototype</span>: <span class="pl-smi">SVGFEMorphologyElement</span><span class="pl-kos">;</span>
    <span class="pl-k">new</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">SVGFEMorphologyElement</span><span class="pl-kos">;</span>
    <span class="pl-c1">SVG_MORPHOLOGY_OPERATOR_UNKNOWN</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span> <span class="pl-c">// common</span>
    <span class="pl-c1">SVG_MORPHOLOGY_OPERATOR_ERODE</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span> <span class="pl-c">// common</span>
    <span class="pl-c1">SVG_MORPHOLOGY_OPERATOR_DILATE</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span> <span class="pl-c">// common</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// IDBKeyRange definition has variable only member.
interface IDBKeyRange {
    upper: any; // interface only
    upperOpen: boolean; // interface only
    lower: any; // interface only
    lowerOpen: boolean; // interface only
    // After definition is not defined.
    // Must be modified to suit the W3C definition.
    //bound(lower: any, upper: any, lowerOpen?: boolean, upperOpen?: boolean): IDBKeyRange;
    //only(value: any): IDBKeyRange;
    //lowerBound(bound: any, open?: boolean): IDBKeyRange;
    //upperBound(bound: any, open?: boolean): IDBKeyRange;
}
declare var IDBKeyRange: {
    prototype: IDBKeyRange;
    new(): IDBKeyRange;
    bound(lower: any, upper: any, lowerOpen?: boolean, upperOpen?: boolean): IDBKeyRange; // VARIABLE ONLY!!
    only(value: any): IDBKeyRange; // VARIABLE ONLY!!
    lowerBound(bound: any, open?: boolean): IDBKeyRange; // VARIABLE ONLY!!
    upperBound(bound: any, open?: boolean): IDBKeyRange; // VARIABLE ONLY!!
}"><pre class="notranslate"><span class="pl-c">// IDBKeyRange definition has variable only member.</span>
<span class="pl-k">interface</span> <span class="pl-smi">IDBKeyRange</span> <span class="pl-kos">{</span>
    <span class="pl-c1">upper</span>: <span class="pl-smi">any</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c1">upperOpen</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c1">lower</span>: <span class="pl-smi">any</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c1">lowerOpen</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span> <span class="pl-c">// interface only</span>
    <span class="pl-c">// After definition is not defined.</span>
    <span class="pl-c">// Must be modified to suit the W3C definition.</span>
    <span class="pl-c">//bound(lower: any, upper: any, lowerOpen?: boolean, upperOpen?: boolean): IDBKeyRange;</span>
    <span class="pl-c">//only(value: any): IDBKeyRange;</span>
    <span class="pl-c">//lowerBound(bound: any, open?: boolean): IDBKeyRange;</span>
    <span class="pl-c">//upperBound(bound: any, open?: boolean): IDBKeyRange;</span>
<span class="pl-kos">}</span>
<span class="pl-k">declare</span> <span class="pl-k">var</span> <span class="pl-smi">IDBKeyRange</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">prototype</span>: <span class="pl-smi">IDBKeyRange</span><span class="pl-kos">;</span>
    <span class="pl-k">new</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">IDBKeyRange</span><span class="pl-kos">;</span>
    <span class="pl-c1">bound</span><span class="pl-kos">(</span><span class="pl-s1">lower</span>: <span class="pl-smi">any</span><span class="pl-kos">,</span> <span class="pl-s1">upper</span>: <span class="pl-smi">any</span><span class="pl-kos">,</span> <span class="pl-s1">lowerOpen</span>?: <span class="pl-smi">boolean</span><span class="pl-kos">,</span> <span class="pl-s1">upperOpen</span>?: <span class="pl-smi">boolean</span><span class="pl-kos">)</span>: <span class="pl-smi">IDBKeyRange</span><span class="pl-kos">;</span> <span class="pl-c">// VARIABLE ONLY!!</span>
    <span class="pl-c1">only</span><span class="pl-kos">(</span><span class="pl-s1">value</span>: <span class="pl-smi">any</span><span class="pl-kos">)</span>: <span class="pl-smi">IDBKeyRange</span><span class="pl-kos">;</span> <span class="pl-c">// VARIABLE ONLY!!</span>
    <span class="pl-c1">lowerBound</span><span class="pl-kos">(</span><span class="pl-s1">bound</span>: <span class="pl-smi">any</span><span class="pl-kos">,</span> <span class="pl-s1">open</span>?: <span class="pl-smi">boolean</span><span class="pl-kos">)</span>: <span class="pl-smi">IDBKeyRange</span><span class="pl-kos">;</span> <span class="pl-c">// VARIABLE ONLY!!</span>
    <span class="pl-c1">upperBound</span><span class="pl-kos">(</span><span class="pl-s1">bound</span>: <span class="pl-smi">any</span><span class="pl-kos">,</span> <span class="pl-s1">open</span>?: <span class="pl-smi">boolean</span><span class="pl-kos">)</span>: <span class="pl-smi">IDBKeyRange</span><span class="pl-kos">;</span> <span class="pl-c">// VARIABLE ONLY!!</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><a href="http://www.w3.org/TR/IndexedDB/#range-concept" rel="nofollow">http://www.w3.org/TR/IndexedDB/#range-concept</a></p>
<blockquote>
<p dir="auto">interface IDBKeyRange {<br>
readonly attribute any lower;<br>
readonly attribute any upper;<br>
readonly attribute boolean lowerOpen;<br>
readonly attribute boolean upperOpen;<br>
<strong>static IDBKeyRange only (any value);<br>
static IDBKeyRange lowerBound (any lower, optional boolean open);<br>
static IDBKeyRange upperBound (any upper, optional boolean open);<br>
static IDBKeyRange bound (any lower, any upper, optional boolean lowerOpen, optional boolean upperOpen);</strong><br>
};</p>
</blockquote>
<p dir="auto">I encountered a few problems while debugging a HTML + Typescript project in visual studio 2013 and 2015 (running ts 1.7 on both). The <code class="notranslate">this</code> context of an arrow function is mapped to the wrong <code class="notranslate">this</code>, the actual <code class="notranslate">this</code> which I expect is stored in a local variable <code class="notranslate">_this</code> which is not visible in TS and should not be visible while debugging.</p>
<h2 dir="auto">Reproducing</h2>
<p dir="auto">It is actually visible in the demo app which comes with the <code class="notranslate">HTML application with template</code> project type. In both cases I compile to ecma5, in ecma6 this bug should not even exists because arrow functions are compiled 1 to 1.</p>
<p dir="auto">I will post the example code below for completeness.</p>
<p dir="auto">What you will see is if we set a breakpoint on <code class="notranslate">this.span.innerHTML = new Date().toUTCString()</code> and inspect <code class="notranslate">this.span</code>, it will be <code class="notranslate">undefined</code>. This is because the <code class="notranslate">this</code> is wrongly set to the <code class="notranslate">this</code> passed on by <code class="notranslate">setInterval</code> and the actual <code class="notranslate">this</code> of the <code class="notranslate">Greeter</code> instance is stored in a variable named <code class="notranslate">_this</code>.</p>
<p dir="auto">The weird thing is that if I started a nodejs typescript project, and do the same thing (without the DOM part), everything works as expected. I expect that the IE sourcemapping causes this issue, but I have no idea how to resolve or work around it.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += &quot;The time is: &quot;;
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() =&gt; this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }
}
window.onload = () =&gt; {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Greeter</span> <span class="pl-kos">{</span>
    <span class="pl-c1">element</span>: <span class="pl-smi">HTMLElement</span><span class="pl-kos">;</span>
    <span class="pl-c1">span</span>: <span class="pl-smi">HTMLElement</span><span class="pl-kos">;</span>
    <span class="pl-c1">timerToken</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span>

    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">element</span>: <span class="pl-smi">HTMLElement</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">element</span> <span class="pl-c1">=</span> <span class="pl-s1">element</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">element</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">+=</span> <span class="pl-s">"The time is: "</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">span</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'span'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">element</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">span</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">span</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Date</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toUTCString</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">timerToken</span> <span class="pl-c1">=</span> <span class="pl-en">setInterval</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">span</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Date</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toUTCString</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">500</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">stop</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">timerToken</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">onload</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">el</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'content'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">greeter</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Greeter</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">greeter</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Environments</h2>
<table role="table">
<thead>
<tr>
<th></th>
<th>VS2013</th>
<th>VS2015</th>
</tr>
</thead>
<tbody>
<tr>
<td>Visual studio version</td>
<td>VS2013</td>
<td>VS2015</td>
</tr>
<tr>
<td>Typescript Version</td>
<td>1.7.5</td>
<td>1.7</td>
</tr>
<tr>
<td>IE version</td>
<td>11.20.x</td>
<td>11.20.x</td>
</tr>
<tr>
<td>NTVS version</td>
<td>1.1</td>
<td>1.1</td>
</tr>
</tbody>
</table>