#StackBounty: #javascript #reactjs #typescript #declaration How to use TypeScript declaration files alongside JavaScript

Bounty: 100

I want to separate my JavaScript function documentation into TypeScript .d.ts files.

For example:

components/
  Button/
    Button.jsx   # JavaScript component
    Button.d.ts  # TypeScript documentation with prop types

Similarly how Material UI does this. https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button

My issue is that TypeScript & VSCode does not recognize the .d.ts file for the current JavaScript file.

In my setup, I have the following Button.d.ts file:

interface Props {
  text: string
  onClick: () => void
}

declare const Button: (props: Props) => Element

export default Button

and the following Button.jsx file:

import React from 'react'

const Button = ({ text, onClick }) => {
  return <button onClick={onClick}>{text}</button>
}

export default Button

But VSCode is not recognising the prop types in the component:

Screenshot


How can I set up my project (maybe tsconfig.json file) to accept the use of corresponding .d.ts file?

My current tsconfig.json config:

{
  "compilerOptions": {
    "declaration": true,
    "rootDir": "./src",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "noEmit": true,
    "maxNodeModuleJsDepth": 2
  },
  "include": ["src/**/*"]
}


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.