<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function decorator(container, key) {}

class A {
    @decorator // OK
    fn(){}
}

let a = {
    b: class B {
        @decorator // Error TS1206: Decorators are not valid here
        fn(){}
    }
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">decorator</span><span class="pl-kos">(</span><span class="pl-s1">container</span><span class="pl-kos">,</span> <span class="pl-s1">key</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">A</span> <span class="pl-kos">{</span>
    @<span class="pl-s1">decorator</span> <span class="pl-c">// OK</span>
    <span class="pl-en">fn</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>

<span class="pl-k">let</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">b</span>: <span class="pl-k">class</span> <span class="pl-smi">B</span> <span class="pl-kos">{</span>
        @<span class="pl-s1">decorator</span> <span class="pl-c">// Error TS1206: Decorators are not valid here</span>
        <span class="pl-en">fn</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>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">My use case is a controller class in an Angular 1.5 component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const MyComponent = {
  bindings: {...},
  template: `...`,
  controller: class MyComponentController extends BaseComponent {
    @override
    foo() {...}
  }
}

abstract class BaseComponent {
  protected foo() {...}
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-smi">MyComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">bindings</span>: <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`...`</span><span class="pl-kos">,</span>
  <span class="pl-c1">controller</span>: <span class="pl-k">class</span> <span class="pl-smi">MyComponentController</span> <span class="pl-k">extends</span> <span class="pl-smi">BaseComponent</span> <span class="pl-kos">{</span>
    @<span class="pl-s1">override</span>
    <span class="pl-en">foo</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>
<span class="pl-kos">}</span>

<span class="pl-k">abstract</span> <span class="pl-k">class</span> <span class="pl-smi">BaseComponent</span> <span class="pl-kos">{</span>
  <span class="pl-k">protected</span> <span class="pl-en">foo</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>
<p dir="auto"><strong>TypeScript Version:</strong> 1.8.10</p>
<p dir="auto"><strong>Code</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default new class Foo {
  @someDecorator
  someMethod() {}
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">new</span> <span class="pl-k">class</span> <span class="pl-smi">Foo</span> <span class="pl-kos">{</span>
  @<span class="pl-s1">someDecorator</span>
  <span class="pl-en">someMethod</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>
<p dir="auto">Will result in an error on <code class="notranslate">@someDecorator</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="error TS1206: Decorators are not valid here."><pre class="notranslate"><code class="notranslate">error TS1206: Decorators are not valid here.
</code></pre></div>
<hr>
<p dir="auto">It can be worked around via</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Foo {
  @someDecorator
  someMethod() {}
}
export default new Foo();"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Foo</span> <span class="pl-kos">{</span>
  @<span class="pl-s1">someDecorator</span>
  <span class="pl-en">someMethod</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>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">new</span> <span class="pl-smi">Foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>