<p dir="auto">I uncovered this general issue while testing loading JavaScript files from <code class="notranslate">node_modules</code>, but realized (and confirmed) this applies to TypeScript files also.</p>
<p dir="auto">Basically, when we search the <code class="notranslate">node_modules</code> folder, we <a href="https://github.com/Microsoft/TypeScript/blob/release-1.8/src/compiler/program.ts#L139">look for all supported extensions</a> and add them to the compilation. Currently this means that if we find a TypeScript file in a Node module (e.g. someone published their package including the source), then we compile this also.</p>
<p dir="auto">For example, if module <code class="notranslate">sausages</code> was published as follows (with the original source besides the compiler files):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" - node_modules
 |- sausages
   |- package.json
   |- core.ts
   |- core.js"><pre class="notranslate"><code class="notranslate"> - node_modules
 |- sausages
   |- package.json
   |- core.ts
   |- core.js
</code></pre></div>
<p dir="auto">Then we get the benefit of loading the <code class="notranslate">.ts</code> and getting the types from this. However on compiling an app which uses the <code class="notranslate">sausages/core</code> module, with <code class="notranslate">outDir: "out"</code>, I get the resulting output (notice how <code class="notranslate">core.js</code> from the <code class="notranslate">sausages</code> package has been compiled into a <code class="notranslate">node_modules</code> folder in my <code class="notranslate">outDir</code>).</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/993909/12893862/7ec807b8-ce48-11e5-9b00-15608d67d28c.png"><img width="133" alt="screen shot 2016-02-08 at 9 42 56 am" src="https://cloud.githubusercontent.com/assets/993909/12893862/7ec807b8-ce48-11e5-9b00-15608d67d28c.png" style="max-width: 100%;"></a></p>
<p dir="auto">I already added a flag to denote if a file was found by searching Node modules in <a href="https://github.com/Microsoft/TypeScript/pull/6928/files#diff-08a3cc4f1f9a51dbb468c2810f5229d3R72">this pull request</a>. I can refactor this to eliminate this issue if that seems reasonable.</p>
<p dir="auto"><strong>TypeScript Version:</strong></p>
<p dir="auto">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="interface TNode {
    Kids?: (TNode | string)[];
}

function foo(node: TNode) { }

foo({
    Kids: [ { Kids: [ { c: 1 } ]} ]
});"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">TNode</span> <span class="pl-kos">{</span>
    <span class="pl-c1">Kids</span>?: <span class="pl-kos">(</span><span class="pl-smi">TNode</span> <span class="pl-c1">|</span> <span class="pl-smi">string</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">function</span> <span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-s1">node</span>: <span class="pl-smi">TNode</span><span class="pl-kos">)</span> <span class="pl-kos">{</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-c1">Kids</span>: <span class="pl-kos">[</span> <span class="pl-kos">{</span> <span class="pl-c1">Kids</span>: <span class="pl-kos">[</span> <span class="pl-kos">{</span> <span class="pl-c1">c</span>: <span class="pl-c1">1</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-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior:</strong><br>
The error message should contains something like "Object literal may only specify known properties, and 'c' does not exist in type 'TNode | string' "</p>
<p dir="auto"><strong>Actual behavior:</strong><br>
The error message is</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="error TS2345: Argument of type '{ Kids: { Kids: { c: number; }[]; }[]; }' is not assignable to parameter of type 'TNode'.
  Types of property 'Kids' are incompatible.
    Type '{ Kids: { c: number; }[]; }[]' is not assignable to type '(TNode | string)[]'.
      Type '{ Kids: { c: number; }[]; }' is not assignable to type 'TNode | string'.
        Type '{ Kids: { c: number; }[]; }' is not assignable to type 'string'."><pre class="notranslate"><code class="notranslate">error TS2345: Argument of type '{ Kids: { Kids: { c: number; }[]; }[]; }' is not assignable to parameter of type 'TNode'.
  Types of property 'Kids' are incompatible.
    Type '{ Kids: { c: number; }[]; }[]' is not assignable to type '(TNode | string)[]'.
      Type '{ Kids: { c: number; }[]; }' is not assignable to type 'TNode | string'.
        Type '{ Kids: { c: number; }[]; }' is not assignable to type 'string'.
</code></pre></div>
<p dir="auto">The misleading part is "Type '{ Kids: { c: number; }[]; }' is not assignable to type 'string' ".</p>
<p dir="auto">If I change <code class="notranslate">TNode | string</code> to <code class="notranslate">TNode | Element</code>, the error message becomes</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="error TS2345: Argument of type '{ Kids: { Kids: { c: number; }[]; }[]; }' is not assignable to parameter of type 'TNode'.
  Types of property 'Kids' are incompatible.
    Type '{ Kids: { c: number; }[]; }[]' is not assignable to type '(TNode | Element)[]'.
      Type '{ Kids: { c: number; }[]; }' is not assignable to type 'TNode | Element'.
        Type '{ Kids: { c: number; }[]; }' is not assignable to type 'Element'.
          Property 'classList' is missing in type '{ Kids: { c: number; }[]; }'."><pre class="notranslate"><code class="notranslate">error TS2345: Argument of type '{ Kids: { Kids: { c: number; }[]; }[]; }' is not assignable to parameter of type 'TNode'.
  Types of property 'Kids' are incompatible.
    Type '{ Kids: { c: number; }[]; }[]' is not assignable to type '(TNode | Element)[]'.
      Type '{ Kids: { c: number; }[]; }' is not assignable to type 'TNode | Element'.
        Type '{ Kids: { c: number; }[]; }' is not assignable to type 'Element'.
          Property 'classList' is missing in type '{ Kids: { c: number; }[]; }'.
</code></pre></div>
<p dir="auto">Which is also misleading.</p>
<p dir="auto">Strangely, If I reverse the order of the union types (i,e. <code class="notranslate">string | TNode</code> and <code class="notranslate">Element | TNode</code>), the error messages become expected.</p>