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

问题描述 投票:0回答:1

我有一个 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
typescript jsdoc
1个回答
0
投票

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

/**
 * 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],
  );
};
      

    
© www.soinside.com 2019 - 2024. All rights reserved.