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/**/*"]
}
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';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With