如何使用 JSDoc 或 TypeScript 为返回的对象 props 添加描述？

Question

我有一个 TypeScript 项目，并且有一个自定义钩子，它返回一堆变量

isMobile | isDesktop | ...

，我想为每个变量添加描述，以便我可以将鼠标悬停在变量上并获取描述（类型注释将来自 TS）。我怎样才能做到这一点或者这可能吗？

挂钩：

export const useDeviceType = ({ between = [0, 0] } = {}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.between(0, 'tablet'));
  const isDesktop = useMediaQuery(theme.breakpoints.up('desktop'));
  const isScreenWidthBetween = useMediaQuery(theme.breakpoints.between(between[0], between[1]));

  return useMemo(
    () => ({
      isMobile,
      isDesktop,
      isScreenWidthBetween,
    }),
    [isDesktop, isMobile, isScreenWidthBetween],
  );
};

项目中的某个地方：

  const { isDesktop, isMobile } = useDeviceType();

  if (isMobile) {
    // do something
  }

现在，当鼠标悬停在

isMobile

上时，我得到

const isMobile: boolean

，但我也想向

isMobile

添加描述，这样它看起来像这样：

const isMobile: boolean
description: isMobile — from 0 to 768px

Answer 1

您可以创建一个类型，然后定义函数以返回该类型的实例。在类型定义中，您可以添加相应的注释

/**
 * your type-description
 */
type Foo {
  /** your property-description */
  isMobile: boolean;
  ...
}


export const useDeviceType = ({ between = [0, 0] } = {}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.between(0, 'tablet'));
  const isDesktop = useMediaQuery(theme.breakpoints.up('desktop'));
  const isScreenWidthBetween = useMediaQuery(theme.breakpoints.between(between[0], between[1]));

  return useMemo(
    () => ({
      isMobile,
      isDesktop,
      isScreenWidthBetween,
    } as Foo),
    [isDesktop, isMobile, isScreenWidthBetween],
  );
};