使用对象键和数字打字稿的媒体查询实用程序类型

如何解决使用对象键和数字打字稿的媒体查询实用程序类型

我是 typescript 的新手，我正在尝试为 js-in-css 断点创建一个实用函数。

目标是接受一个数字或一组值作为字符串： type BrandkidBreakPointProps = number | "base" | "small" | "medium" 我会像这样使用它：mq.above('small') 或 mq.above(1024)

当我尝试查看对象属性时，我收到以下错误消息 No index signature with a parameter of type 'number' was found on type '{ base: number; small: any; medium: any; }'. 即使我正在检查以确保对象中存在参数，因为类型之一是数字，在对象中没有该数字的索引。

const brandkitBreakpoints = {
    base: 0,small: token.bkBreakpointSmall,medium: token.bkBreakpointMedium,};

type BrandkidBreakPointProps = keyof typeof brandkitBreakpoints | number;

const getBreakpointValue = (value:BrandkidBreakPointProps):number => {
    // If value not a number,map to brandkitBreakpoints,other pass it as number
    // the error is here,where I attempt to access the object[enter image description here][1]
    return (value in brandkitBreakpoints) ? brandkitBreakpoints[value] : value; 
    
};

// The '+1' ensures there are no overlaps in media queries.
const mq = {
    above: (value: BrandkidBreakPointProps) => `@media (min-width: ${getBreakpointValue(value) + 1}px)`,below: (value: BrandkidBreakPointProps) => `@media (max-width: ${getBreakpointValue(value)}px)`,between: (breakpoint1:BrandkidBreakPointProps,breakpoint2:BrandkidBreakPointProps) =>
        `@media (min-width: ${getBreakpointValue(breakpoint1) + 1}px and max-width: ${getBreakpointValue(breakpoint2)}px)`,};

export default mq;

Screenshot of typescript error message

有人有什么建议吗？我将不胜感激！