<p dir="auto">Method/accessor decorators use <code class="notranslate">defineProperty</code> and <code class="notranslate">getOwnPropertyDescriptor</code>, which are not allowed in ES3. But class and property decorators don't use them. So class/property decorators can be allowed when targeting ES3.</p>
<p dir="auto">It would be helpful. E.g. I must support old browsers and I use the property like methods instead of pure properties:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="value(v?) {
    if (arguments.length) {
        // setter
    } else {
        // getter
    }
}"><pre class="notranslate"><span class="pl-en">value</span><span class="pl-kos">(</span><span class="pl-s1">v</span>?<span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">arguments</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// setter</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
        <span class="pl-c">// getter</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I have the factory function that creates such method:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface Accessor&lt;T&gt; {
    (): T;
    (v: T): void;
}

function accessor&lt;T&gt;(propName: string): Accessor&lt;T&gt;;
function accessor&lt;T&gt;(propName: string) {
    return function (v?: T) {
        // if (arguments.length) and bla-bla-bla
    }
}"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">Accessor</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">T</span><span class="pl-kos">;</span>
    <span class="pl-kos">(</span><span class="pl-s1">v</span>: <span class="pl-smi">T</span><span class="pl-kos">)</span>: <span class="pl-smi"><span class="pl-k">void</span></span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-s1">accessor</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">propName</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span>: <span class="pl-smi">Accessor</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-k">function</span> <span class="pl-en">accessor</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">propName</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">v</span>?: <span class="pl-smi">T</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// if (arguments.length) and bla-bla-bla</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Currently I have to set such properties in the class prototype explicitly:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Foo {
    value: Accessor&lt;string&gt;;
}
Foo.prototype.value = accessor&lt;string&gt;(&quot;value&quot;);"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Foo</span> <span class="pl-kos">{</span>
    <span class="pl-c1">value</span>: <span class="pl-smi">Accessor</span><span class="pl-kos">&lt;</span><span class="pl-smi">string</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-smi">Foo</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-en">accessor</span><span class="pl-kos">&lt;</span><span class="pl-smi">string</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-s">"value"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">With decorators I could write more cleaner code:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function Accessor(proto, propName: string) {
    proto[propName] = accessor(propName);
}

class Foo {
    @Accessor
    value: Accessor&lt;string&gt;;
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-smi">Accessor</span><span class="pl-kos">(</span><span class="pl-s1">proto</span><span class="pl-kos">,</span> <span class="pl-s1">propName</span>: <span class="pl-smi">string</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">proto</span><span class="pl-kos">[</span><span class="pl-s1">propName</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">accessor</span><span class="pl-kos">(</span><span class="pl-s1">propName</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-smi">Foo</span> <span class="pl-kos">{</span>
    @<span class="pl-smi">Accessor</span>
    <span class="pl-c1">value</span>: <span class="pl-smi">Accessor</span><span class="pl-kos">&lt;</span><span class="pl-smi">string</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Also there is no need to duplicate the property name (<code class="notranslate">"value"</code> in the example above).</p>
<p dir="auto">Update: This issue is now only for the following collections:</p>
<ul dir="auto">
<li>MediaList</li>
<li>StyleSheetList</li>
<li>CSSRuleList</li>
</ul>
<p dir="auto">Originally it was about NodeList as well, but that was fixed (along with DOMTokenList) in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="85519980" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/3393" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/TypeScript/pull/3393/hovercard" href="https://github.com/microsoft/TypeScript/pull/3393">#3393</a></p>
<hr>
<p dir="auto">Original:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var paragraphs = document.querySelectorAll(&quot;p&quot;);
for (let p of paragraphs) {
    console.log(p);
}"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">paragraphs</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">"p"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">p</span> <span class="pl-k">of</span> <span class="pl-s1">paragraphs</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">p</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="foo.ts(2,15): error TS2488: The right-hand side of a 'for...of' statement must have a '[Symbol.iterator]()' method that returns an iterator."><pre class="notranslate"><code class="notranslate">foo.ts(2,15): error TS2488: The right-hand side of a 'for...of' statement must have a '[Symbol.iterator]()' method that returns an iterator.
</code></pre></div>
<p dir="auto">Seems it just needs an update to lib.es6.d.ts to add the <code class="notranslate">[Symbol.iterator()]</code> to all the collections that have an indexer and length property. <del>The ones I found that have it in Nightly are below. The rest were either IE-only or didn't exist.</del> Removed my list since it seems FF has more than the specs allow. See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="118683757" data-permission-text="Title is private" data-url="https://github.com/zloirock/core-js/issues/137" data-hovercard-type="issue" data-hovercard-url="/zloirock/core-js/issues/137/hovercard?comment_id=159531781&amp;comment_type=issue_comment" href="https://github.com/zloirock/core-js/issues/137#issuecomment-159531781">zloirock/core-js#137 (comment)</a> for a more accurate list.</p>