У меня есть проект TypeScript и специальный крючок, который возвращает кучу переменных isMobile | isDesktop | ...
, и я хотел бы добавить описание к каждой из этих переменных, чтобы где-нибудь в проекте я мог навести курсор на переменную и получить описание (аннотация типа будет пришел из ТС). Как мне это сделать или возможно ли это?
Крюк:
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
Вы можете создать тип, а затем определить свою функцию, возвращающую экземпляр этого типа. И при определении типа вы можете добавить соответствующие комментарии.
/**
* 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],
);
};