How to use TypeScript declaration files alongside JavaScript

Question

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:

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/**/*"]
}

@SreetamDas unfortunately not. I tried renaming both files to index and they did not work still. — Ari Seyhun
– Ari Seyhun, Commented May 21, 2020 at 10:37
I don't believe what you're asking is possible. The .d.ts intellisense does not appear because they are pre-compilation files which is of no use in JavaScript. tsconfig.json is for the Typescript compiler's configuration and will not impact JavaScript files. — Zze
– Zze, Commented May 21, 2020 at 11:05

satanTime · Accepted Answer · 2020-05-23 15:13:13Z

12

+100

if you want to use it in your local project

in tsconfig.json remove "src/**/*" add "src/**/*.d.ts" instead, then js files won't be parsed as any type and their definition will be included:

{
  ...,
  "include": ["src/**/*.d.ts"],
  ...,
}

put .jsx and .d.ts in the same dir under the same name as Button.jsx and Button.d.ts for example.

Use it in any .ts file, for example ./src/usage.ts if components are under src too:

import Button from './components/Button/Button';

const b1 = Button({
    text: '123',
    onClick: () => {
        console.log('here');
    },
});

const b2 = Button({
    text: 123, // fails - it's not a string.
    onClick: () => {
        console.log('here');
    },
});

If you want to serve it as a library

In your package.json you need to add

{
  ...,
  "typings": "index.d.ts",
  ...,
}

and then in index.d.ts

/// <amd-module name="package-name" />
export * from './other-files-with-declarations';

edited May 23, 2020 at 15:13

answered May 23, 2020 at 14:32

satanTime

13.7k1 gold badge34 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

satanTime Over a year ago

Then provided information isn't sufficient, is it an option for you to share source code or to invite to the repo?

Ari Seyhun Over a year ago

it seems to be working now! Congrats, I think I'll reward you - let me just do some testing real quick.

satanTime Over a year ago

Awesome, let me know if you need further assistance here. Check if it builds correctly, I think this is the only part change of includes can affect.

Ari Seyhun Over a year ago

one last thing... the types seem to work in other files when importing it such as from App.jsx... but the types are any in the Button.jsx file itself.

Ari Seyhun Over a year ago

I will reward the bounty when I can (in 22 hrs)

|

Collectives™ on Stack Overflow

How to use TypeScript declaration files alongside JavaScript

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related