TypeScript type for reduce

If you want the accumulator value to be indexable by string, Record<string, string> should do the trick. You can pass this as the type argument to reduce

interface MediaQueryProps {  [key: string]: number;}const size: MediaQueryProps = {  small: 576,  medium: 768,  large: 992,  extra: 1200};export default Object.keys(size).reduce<Record<string, string>>((acc, cur) => {  acc[cur] = `(min-width: ${size[cur]}px)`;  return acc;}, {});

Playground link

You can do it like this using Record and keyof:

export default Object.keys(size).reduce((acc, cur) => {  acc[cur] = `(min-width: ${size[cur]}px)`;  return acc;}, {} as Record<keyof MediaQueryProps, string>);

With TypeScript 4.1 you can also take advantage of Template Literal Types with as type casting. TypeScript Playground Link.

// .tsinterface MediaQueryProps {  [key: string]: number;}const size = {  small: 576,  medium: 768,  large: 992,  extra: 1200} as const;const mediaQueryKeys = Object.keys(size) as Array<keyof typeof size>;const mediaQueries = mediaQueryKeys.reduce((acc, cur) => {  acc[cur] = `(min-width: ${size[cur]}px)`;  return acc;}, {} as Record<`${keyof typeof size}`, string>);export default mediaQueries;// d.tsdeclare const mediaQueries: Record<"small" | "medium" | "large" | "extra", string>;export default mediaQueries;