title: How to configure custom global interfaces (.d.ts files) for TypeScript?
body: <p>I'm currently working on a ReactJS project which uses Webpack2 and TypeScript. Everything works perfectly apart from one thing - I can't a find a way to move interfaces that I've written myself into separate files so that they are visible to the whole application.</p>
  <p>For prototyping purposes I initially had interfaces defined in files that use them but eventually I started adding some that were needed in multiple classes and that's when all the problems started. No matter what changes I make to my <code>tsconfig.json</code> and no matter where I put the files my IDE and Webpack both complain about not being able to find names (<em>&quot;Could not find name 'IMyInterface'&quot;</em>).</p>
  <p>Here's my current <code>tsconfig.json</code> file:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;src&quot;,
      &quot;outDir&quot;: &quot;build/dist&quot;,
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;es6&quot;,
        &quot;dom&quot;
      ],
      &quot;typeRoots&quot;: [
        &quot;./node_modules/@types&quot;,
        &quot;./typings&quot;
      ],
      &quot;sourceMap&quot;: true,
      &quot;allowJs&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;rootDir&quot;: &quot;src&quot;,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;noImplicitReturns&quot;: true,
      &quot;noImplicitThis&quot;: true,
      &quot;noImplicitAny&quot;: false,
      &quot;strictNullChecks&quot;: true,
      &quot;suppressImplicitAnyIndexErrors&quot;: true,
      &quot;noUnusedLocals&quot;: true
    },
    &quot;exclude&quot;: [
      &quot;node_modules&quot;,
      &quot;build&quot;,
      &quot;scripts&quot;,
      &quot;acceptance-tests&quot;,
      &quot;webpack&quot;,
      &quot;jest&quot;,
      &quot;src/setupTests.ts&quot;
    ],
    &quot;types&quot;: [
      &quot;typePatches&quot;
    ]
  }
  </code></pre>
  <p>As you can see, my <code>tsconfig.json</code> is in the root of the project directory, all source is in <code>./src</code>, I placed my custom <code>.d.ts</code> files in <code>./typings</code> and included it in <code>typeRoots</code>.</p>
  <p>I tested it with TypeScript 2.1.6 and 2.2.0 and neither works.</p>
  <p>One way of getting it all to work is to move my <code>typings</code> directory into <code>src</code> and then <code>import {IMyInterface} from 'typings/blah'</code> but that doesn't feel right to me as it's not something I need to use. I want those interfaces to just be 'magically' available throughout my application.</p>
  <p>Here's a sample <code>app.d.ts</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>interface IAppStateProps {}
  interface IAppDispatchProps {}
  interface IAppProps extends IAppStateProps, IAppDispatchProps {}
  </code></pre>
  <p>Do I need to <code>export</code> them or maybe <code>declare</code>? I hope I don't have to wrap them in a namespace?!</p>
  <h2>Update (October 2020)</h2>
  <p>Seeing how this question is still surprisingly popular I wanted to explain the solution in more detail.</p>
  <p>Firstly, what could and should be confusing to people is that the interface example I gave at the end of my question actually doesn't have any <code>export</code> keywords even though I'm almost certain I did have them in my files at the time of asking the question. I believe I didn't include them in the question thinking they didn't make any difference, whether they were there or not. Well, it turns out that it's not true and the <code>export</code> keyword is exactly what makes or breaks you being able to just &quot;use&quot; the interfaces versus having to explicitly <code>import</code> them.</p>
  <p>So, the way it works in TypeScript is as follows:</p>
  <p>If you want an interface/type that you can simply use without having to import it in the consuming module said interface must reside in a <code>.ts</code> or ideally a <code>.d.ts</code> file <strong>without any imports or exports being present in the same file</strong>. This is of utmost importance because as soon as you are exporting at least one thing from the same file it becomes a module and everything that is in that module must be subsequently imported by consumers.</p>
  <p>To give you an example let's assume you want to have a type called <code>Dictionary</code> that you want to be able to use without importing. The way to declare it would be as follows:</p>
  <pre class="lang-js prettyprint-override"><code>// types.d.ts
  interface Dictionary {}
  interface Foo {}
  interface Bar {}
  </code></pre>
  <p>To use it you simply do:</p>
  <pre class="lang-js prettyprint-override"><code>// consumer.ts
  const dict: Dictionary = {};
  </code></pre>
  <p>However, it will no longer work if for some reason <strong>any</strong> of the interfaces/types in that file are exported, e.g.:</p>
  <pre class="lang-js prettyprint-override"><code>// types.d.ts
  interface Dictionary {}
  interface Foo {}
  export interface Bar {}
  </code></pre>
  <p>It will also not work if there are imports in that file:</p>
  <pre class="lang-js prettyprint-override"><code>// types.d.ts
  import { OtherType } from 'other-library';
  
  interface Dictionary {}
  interface Foo extends OtherType {}
  interface Bar {}
  </code></pre>
  <p>If that is the case the only way to be able to use the <code>Dictionary</code> type would be to also export it and then import it in the consumer:</p>
  <pre class="lang-js prettyprint-override"><code>// types.d.ts
  export interface Dictionary {}
  interface Foo {}
  export interface Bar {}
  
  // consumer.ts
  import { Dictionary } from './types';
  
  const dict: Dictionary = {};
  </code></pre>
  <code>--isolatedModules</code>
  <p>There is an additional quirk to keep in mind when using the <code>isolatedModules</code> modules flag in TypeScript, which, importantly, is enabled by default (and cannot be disabled) when using Create React App - <code>.ts</code> files MUST export at least one thing as otherwise you will be getting the <em>&quot;All files must be modules when the '--isolatedModules' flag is provided.&quot;</em> error. That means that putting the <code>Dictionary</code> interface in a <code>types.ts</code> files without the export keyword won't work. It must either be an export from a <code>.ts</code> file of be a declaration without the export in a <code>.d.ts</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>// types.d.ts
  interface Dictionary {}        // works
  export interface Dictionary {} // works
  
  // types.ts
  interface Dictionary {}        // doesn't work with --isolatedModules enabled
  export interface Dictionary {} // works
  
  </code></pre>
  <p>N.B.<br />
  As @dtabuenc mentions in his answer ambient modules (<code>.d.ts</code> files) are discoraged and my correction shouldn't be taken as advice. It's just an attempt at explaining how normal modules and ambient modules work in TypeScript.</p>