title: How to properly define *.d.ts (typings) files for plain JavaScript react components
body: <p>I am working with Typescript and React. While many react components already come with predefined typings, some of them don't. Defining the <code>*.d.ts</code> file and throwing it into the <code>typings</code> directory is not a big issue. However, in JavaScript, there are <strong>many</strong> ways to export something in a module, and it's by no means uniform. The result is that the Typescript compiler is happy with my typings, but when I use a typescript <code>import</code> statement for the typing, then I get <code>undefined</code> at runtime.</p>
  
  <p>Could somebody clarify how to write proper <code>*.d.ts</code> files for react components? In particular, how do you declare the <code>export</code> statements in the <code>*.d.ts</code> file if the original untyped JavaScript file...</p>
  
  <ul>
  <li>... uses <code>export class XYZ</code>?</li>
  <li>... uses <code>export default class XYZ</code>?</li>
  <li>... uses <code>export namespace XYZ</code>?</li>
  <li>... uses <code>export default namespace XYZ</code>?</li>
  <li>... uses <code>module.exports</code>?</li>
  </ul>
  
  <p>There are a <strong>lot</strong> of possibilities here, and some kind of "cooking recipe" would be nice, i.e. "First, always try method X, if X gives you <code>undefined</code> at runtime, try Y...".</p>