The TypeScript type definition for reduce is used to aggregate values in

Question

The TypeScript type definition for reduce is used to aggregate values in

What is the best way to properly declare a type for this scenario?

interface MediaQueryProps {
  [key: string]: number;
}

const size: MediaQueryProps = {
  small: 576,
  medium: 768,
  large: 992,
  extra: 1200
};

export default Object.keys(size).reduce((acc, cur) => {
  acc[cur] = `(min-width: ${size[cur]}px)`;

  return acc;
}, {});

The issue arises with acc[cur] due to

An element implicitly has an 'any' type because an expression of type 'string' cannot be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'

Is there a method to define a type for this situation without resorting to using any?

typescript

Answer 1

Answer №1

To make the accumulator value indexable by a string, you can use Record<string, string>. Simply pass this as the type argument to the reduce function.

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;
}, {});

Check out this Playground link for more details

Answer 2

To make the accumulator value indexable by a string, you can use Record<string, string>. Simply pass this as the type argument to the reduce function.

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;
}, {});

Check out this Playground link for more details

Answer 3

Answer №2

Experience the power of utilizing Template Literal Types alongside as type casting in TypeScript 4.1. Check out the TypeScript Playground Link.

// .ts
interface 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.ts
declare const mediaQueries: Record<"small" | "medium" | "large" | "extra", string>;
export default mediaQueries;

Answer 4

Experience the power of utilizing Template Literal Types alongside as type casting in TypeScript 4.1. Check out the TypeScript Playground Link.

// .ts
interface 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.ts
declare const mediaQueries: Record<"small" | "medium" | "large" | "extra", string>;
export default mediaQueries;

Answer 5

Answer №3

Here is a way to achieve the same result utilizing Record and keyof:

const mediaQueries = Object.keys(sizes).reduce((accumulator, current) => {
  accumulator[current] = `(min-width: ${sizes[current]}px)`;

  return accumulator;
}, {} as Record<keyof MediaQueryProperties, string>);

Answer 6

Here is a way to achieve the same result utilizing Record and keyof:

const mediaQueries = Object.keys(sizes).reduce((accumulator, current) => {
  accumulator[current] = `(min-width: ${sizes[current]}px)`;

  return accumulator;
}, {} as Record<keyof MediaQueryProperties, string>);

Answer 7

Answer №4

I decided to enhance the approved answer that uses only string types by creating a more accurate approach:

type ScreenSizes = {
  small: number;
  medium: number;
  large: number;
  extra: number;
};

const breakpoints: ScreenSizes = {
  small: 576,
  medium: 768,
  large: 992,
  extra: 1200
};

// Define the type of entry after Object.entries() is used
type BreakpointEntry = [keyof ScreenSizes, ScreenSizes[keyof ScreenSizes]];

// Create a generic helper to ensure all property types are either string or undefined
type Stringify<T> = { [key in keyof T]?: string };

// Customize the Object interface for a custom Object.entries():
interface CustomObject extends ObjectConstructor {
  entries<K extends keyof ScreenSizes, T>(
    o: { [s in K]: T } | ArrayLike<T>
  ): [K, T][];
}

// Implement this customized interface:
const obj: CustomObject = Object;

export default obj
  .entries(breakpoints)
  .reduce<Stringify<ScreenSize>>((acc, cur: BreakpointEntry) => {
    const [key, value] = cur;
    acc[key] = `(min-width: ${value}px)`;

    return acc;
  }, {});

Answer 8

I decided to enhance the approved answer that uses only string types by creating a more accurate approach:

type ScreenSizes = {
  small: number;
  medium: number;
  large: number;
  extra: number;
};

const breakpoints: ScreenSizes = {
  small: 576,
  medium: 768,
  large: 992,
  extra: 1200
};

// Define the type of entry after Object.entries() is used
type BreakpointEntry = [keyof ScreenSizes, ScreenSizes[keyof ScreenSizes]];

// Create a generic helper to ensure all property types are either string or undefined
type Stringify<T> = { [key in keyof T]?: string };

// Customize the Object interface for a custom Object.entries():
interface CustomObject extends ObjectConstructor {
  entries<K extends keyof ScreenSizes, T>(
    o: { [s in K]: T } | ArrayLike<T>
  ): [K, T][];
}

// Implement this customized interface:
const obj: CustomObject = Object;

export default obj
  .entries(breakpoints)
  .reduce<Stringify<ScreenSize>>((acc, cur: BreakpointEntry) => {
    const [key, value] = cur;
    acc[key] = `(min-width: ${value}px)`;

    return acc;
  }, {});

The TypeScript type definition for reduce is used to aggregate values in

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

If placed in the same document, will promises be executed sequentially?

When trying to style a Material UI component in Mui v5, no matches for overloads were found

Retrieve the values of private variables within a defined function

Why are other elements not appearing on the index.html page when <app-root> is not included?

I've been stuck for hours, is there anything I should include?

Overriding a generic property in Typescript allows for a more

Calculating numbers with Math.ceil will result in an increase of 1

Creating a TypeScript class without using the prototype method

Exploring the usage of array map parameters in rxjs 6 when combined with withLatestFrom

Style the date using moment

Typescript and RxJS: Resolving Incompatibility Issues

Properly write a function in Typescript that returns the initial property of an object

Missing "this" after initialization? (typescript/node/express)

What is the best way to implement generics for a zip function in TypeScript?

Is it possible to modify a single value in a React useState holding an object while assigning a new value to the others?

Using TypeScript to define task invocation parameters with AWS CDK's CfnMaintenanceWindowTask

What is the best way to create a memoized function in React?

Script execution is disabled on this system preventing the loading of content - ANGULAR V14

Building Interactive Graphs with Chart.JS in Angular Using Observables

Can an Angular 2 module export an interface?