7

The setup is a “Create React App” with the following jsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "src"
  },
  "include": ["src"]
}

The directory structure:

.
└── src
    └── Components
        └── Foo
            ├── Bar
            │   ├── Bar.js
            │   ├── Bar.d.ts
            │   └── index.js
            ├── Foo.js
            └── index.js

// React component `Foo` imports a component `Bar`:

import { Bar } from './Bar'

export function Foo(props) {
  //
}

// And gets full intellisense via `Bar.d.ts`:

type Props = {
  /** ... */
}

export declare function Bar(
  props: Props
): React.FunctionComponent

But Bar.js itself doesn’t get intellisense from its own Bar.d.ts file, is there a way to fix it? I tried the triple-slash directive (/// <reference path="Bar.d.ts"/>), but it didn’t help. Some JSDoc helped, but it’s rather pointless to have a dedicated declaration file and still use JSDoc; it also probably only works with VSCode, which is undesirable:

export function Bar(
  // When `type Props` is exported from the `.d.ts`:
  /** @type {import("./Bar").Props} */ props
) {
2
  • VSCode also allows you to use JSDoc to get type hints -- I use it pretty heavily in JS only projects, though I will state if you are willing to use the TS definition files, why not just use TS all the way?
    – Jhecht
    Commented Aug 6, 2020 at 3:45
  • @Jhecht I did start with JSDoc—don’t remember what intellisense issues I had with it (was quite some time ago), but that’s why I moved to describing shapes with declaration files, which in the end worked better for me than JSDoc. I don’t want to bother you with the details, but it was very difficult to fully commit to TypeScript for the project, as it would’ve added another layer of complexity that I wasn’t ready to deal with.
    – awgv
    Commented Aug 6, 2020 at 9:20

2 Answers 2

2

As of September 2020, this is intended (source):

[...] there is no supported scenario for "the .d.ts is a sidecar to the .js". The recommended thing to do here is use JS Doc to write your type annotations.

Follow TypeScript’s development to see if it changes in the future.

-2

You can use JSDoc to define classes, functions, and everything just as you do in typescript.

One of the best usages I did was in the file connect.js file on Github. I did not want to commit the file containing DB credentials. So, I defined a class, enum, etc. in JSDoc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.