title: How to use TypeScript declaration files alongside JavaScript
body: <p>I want to separate my JavaScript function documentation into TypeScript .d.ts files.</p>
  
  <p>For example:</p>
  
  <pre><code>components/
    Button/
      Button.jsx   # JavaScript component
      Button.d.ts  # TypeScript documentation with prop types
  </code></pre>
  
  <p>Similarly how Material UI does this. <a href="https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button" rel="noreferrer">https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button</a></p>
  
  <p>My issue is that TypeScript &amp; VSCode does not recognize the <code>.d.ts</code> file for the current JavaScript file.</p>
  
  <p>In my setup, I have the following <code>Button.d.ts</code> file:</p>
  
  <pre><code>interface Props {
    text: string
    onClick: () =&gt; void
  }
  
  declare const Button: (props: Props) =&gt; Element
  
  export default Button
  </code></pre>
  
  <p>and the following <code>Button.jsx</code> file:</p>
  
  <pre><code>import React from 'react'
  
  const Button = ({ text, onClick }) =&gt; {
    return &lt;button onClick={onClick}&gt;{text}&lt;/button&gt;
  }
  
  export default Button
  </code></pre>
  
  <p>But VSCode is not recognising the prop types in the component:</p>
  
  <p><a href="https://i.stack.imgur.com/F1Ir3.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/F1Ir3.jpg" alt="Screenshot"></a></p>
  
  <hr>
  
  <p>How can I set up my project (maybe tsconfig.json file) to accept the use of corresponding .d.ts file?</p>
  
  <p><em>My current tsconfig.json config:</em></p>
  
  <pre><code>{
    "compilerOptions": {
      "declaration": true,
      "rootDir": "./src",
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "isolatedModules": true,
      "noEmit": true,
      "maxNodeModuleJsDepth": 2
    },
    "include": ["src/**/*"]
  }
  </code></pre>