如何用JSDoc或TypeScript为自定义Hook返回的对象属性添加描述？

完全可行，只需要通过带JSDoc注释的接口约束Hook的返回值类型，编辑器（如VS Code）就会在hover变量时展示自定义描述信息。

具体实现步骤： #

1. 定义包含JSDoc注释的接口，为每个返回字段添加针对性描述
2. 让自定义Hook明确返回该接口类型

修改后的完整Hook代码： #

import { useMemo } from 'react';
import { useTheme, useMediaQuery } from '@mui/material';

/**
 * 设备类型判断结果集合
 */
interface DeviceTypeResult {
  /** 是否为移动端（屏幕宽度 0 至 768px） */
  isMobile: boolean;
  /** 是否为桌面端（屏幕宽度大于等于桌面端断点） */
  isDesktop: boolean;
  /** 是否处于传入的指定宽度区间内 */
  isScreenWidthBetween: boolean;
}

export const useDeviceType = ({ between = [0, 0] } = {}): DeviceTypeResult => {
  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 { isMobile } = useDeviceType()并hoverisMobile时，编辑器会显示：

const isMobile: boolean
是否为移动端（屏幕宽度 0 至 768px）

你可以根据项目中实际的断点数值，修改JSDoc注释里的宽度描述内容。

内容的提问来源于stack exchange，提问作者qweezz