CODEWITHSUNDEEP
reactjstypescriptjsdoc
dlq
dlq

Reputation: 3219

Borrowing a JSDoc comment from external interface property

I'm working on a React app. As you probably know, many times we wish for the child component's props to be directly linked to a parent component's state.

Thus, I have added the following documentation to the parent class component's state interface.

// Parent.tsx

interface ParentState {
  /**
   * Stores the list of errors encountered during render.
   */
  errors: string[];
}

export function Parent extends React.Component<{}, ParentState> {
  // ...

  render () {
    return <Child errors={errors} />
  }
}

Inside the child component defined in a separate file, I would like for the ChildProps interface to share the same documentation.

// Child.tsx

interface ChildProps {
  /**
   * How do I use the `ParentState.errors` definition?
   */
  errors: string[]
}

export function Child (props: ChildProps) {
  return <ul>{errors.map(error) => <li key={index}>error</li>}</ul>
}

I've already tried using the JSDoc @borrow module:Parent.ParentState.errors tag while specifying @module Parent for the Parent component. I have no idea how to link these 2 documentations. No matter what I try, the documentation for the child prop just doesn't show in VSCode intellisense.

My question is: How do I borrow the documentation from an external interface property?

Upvotes: 0

Views: 755

Answers (1)

Mr. Hedgehog
Mr. Hedgehog

Reputation: 2885

@inheritdoc not yet supported, but there is option to use typescript instead of JSDoc. For this you will need to export your ParentState interface and import is as a type to Child component like this:

// Parent.tsx
import * as React from "react";
import { Child } from "./Child";

export interface ParentState {
  /**
   * Stores the list of errors encountered during render.
   */
  errors: string[];
}

export class Parent extends React.Component<{}, ParentState> {
  state = {
    errors: [],
  };

  render() {
    return <Child errors={this.state.errors} />;
  }
}

// Child.tsx

import type { ParentState } from "./Parent";

interface ChildProps {
  errors: ParentState["errors"];
}

export function Child(props: ChildProps) {
  return (
    <ul>
      {props.errors.map((error, index) => (
        <li key={index}>{error}</li>
      ))}
    </ul>
  );
}

However, I believe that better solution here would be to use separate type and use it in both - Parent and Child.

Upvotes: 1

Related Questions