<p dir="auto">I have following structure</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="└───src
    ├───external
    │   └───lib
    └───App
        ├───Class"><pre class="notranslate"><code class="notranslate">└───src
    ├───external
    │   └───lib
    └───App
        ├───Class
</code></pre></div>
<p dir="auto"><code class="notranslate">src/external/lib/</code> contains 2 files, <code class="notranslate">lib.js</code> and <code class="notranslate">lib.d.ts</code>.<br>
In <code class="notranslate">src/App/Class/Class.ts</code> I am importing <code class="notranslate">../../external/lib/lib</code> and it works fine, but generates following structure:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="└───dist
    └───App
        ├───Class"><pre class="notranslate"><code class="notranslate">└───dist
    └───App
        ├───Class
</code></pre></div>
<p dir="auto">With JS files in <code class="notranslate">dist/App/Class</code>. My config is:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;compilerOptions&quot;: {
    &quot;module&quot;: &quot;commonjs&quot;,
    &quot;sourceMap&quot;: false,
    &quot;target&quot;: &quot;ES5&quot;,
    &quot;noImplicitAny&quot;: true,
    &quot;outDir&quot;: &quot;./dist&quot;,
    &quot;rootDir&quot;: &quot;./src&quot;
  },
  &quot;files&quot;: [
    &quot;src/main.ts&quot;
  ]
}"><pre class="notranslate">{
  <span class="pl-ent">"compilerOptions"</span>: {
    <span class="pl-ent">"module"</span>: <span class="pl-s"><span class="pl-pds">"</span>commonjs<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"sourceMap"</span>: <span class="pl-c1">false</span>,
    <span class="pl-ent">"target"</span>: <span class="pl-s"><span class="pl-pds">"</span>ES5<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"noImplicitAny"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"outDir"</span>: <span class="pl-s"><span class="pl-pds">"</span>./dist<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"rootDir"</span>: <span class="pl-s"><span class="pl-pds">"</span>./src<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"files"</span>: [
    <span class="pl-s"><span class="pl-pds">"</span>src/main.ts<span class="pl-pds">"</span></span>
  ]
}</pre></div>
<p dir="auto">So I thought what <code class="notranslate">rootDir</code> property should solve this problem and transfer entire structure to <code class="notranslate">dist</code> folder. Am I doing something wrong?</p>
<p dir="auto">Copied from CodePlex#1369</p>
<p dir="auto">The current ES6 and TypeScript syntax for classes makes it difficult to perform any meaningful modifications to a function that is a member of a class without extreme effort. Libraries such as ember.js added additional properties to the Function prototype to augment the function with additional capabilities, but this is not feasible in the class syntax.</p>
<p dir="auto">Something like Python decorators provide a possible mechanism to solve this problem. As per PEP-318, decorators allow you to define a function that can be applied to another function in place. For example, a naïve logging decorator might look like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// decorator
function log(fn: Function, metadata: DecoratorMetadata) {
  return function(...args: any[]) {
    console.log(metadata.name);
    return fn.apply(this, args);
  }
}

class A {
  // decorator application
  @log foo() {
  }
}

// execution
var a = new A();
a.foo(); // LOG: foo "><pre class="notranslate"><span class="pl-c">// decorator</span>
<span class="pl-k">function</span> <span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">fn</span>: <span class="pl-smi">Function</span><span class="pl-kos">,</span> <span class="pl-s1">metadata</span>: <span class="pl-smi">DecoratorMetadata</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">args</span>: <span class="pl-smi">any</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">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">metadata</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">fn</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-s1">args</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">class</span> <span class="pl-smi">A</span> <span class="pl-kos">{</span>
  <span class="pl-c">// decorator application</span>
  @<span class="pl-s1">log</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-c">// execution</span>
<span class="pl-k">var</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">A</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">a</span><span class="pl-kos">.</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-c">// LOG: foo </span></pre></div>
<p dir="auto">This provides a capability that allows for very expressive development against the class syntax that is far beyond C#-style attributes and allows for a number of uses including (but not limited to): logging, binding, composition, testing, control over ES5 property descriptors, AOP-like join-points, etc.</p>
<p dir="auto">In addition to the general syntax borrowed from Python, a TypeScript decorator would accept an additional piece of metadata in the form of a DecoratorMetadata object, which contains contextual information about the target that is being decorated (such as a function, class, method, getter, setter, or even fields and parameters).</p>