Developing a structure or definition for a Map

Question

Developing a structure or definition for a Map

Currently, I have created a type and interface in TypeScript to explicitly define the things variable and the Map constructor call.

type Things = Map<string, ThingValue>;

interface ThingValue {
  label: string;
  count: number;
}


const things: Things = new Map<string, ThingValue>();

However, I would like to streamline this process and have a single type or interface to avoid repeating <string, ThingValue>.

Is there a way to achieve this in TypeScript? Alternatively, what are the recommended practices for typing JavaScript Maps?

typescript

Answer 1

Answer №1

If you want to define a map type without repetition, there are 3 approaches you can take:

type Objects = Map<string, ObjectValue>;

interface ObjectValue {
  name: string;
  quantity: number;
}

const objects1: Objects = new Map();
const objects2 = new Map<string, ObjectValue>();

// alternative method
const mapGenerator = () => new Map<string, ObjectValue>();
const objects3 = mapGenerator();

Each of these methods will yield the same type definition while keeping the necessary information concise.

Answer 2

If you want to define a map type without repetition, there are 3 approaches you can take:

type Objects = Map<string, ObjectValue>;

interface ObjectValue {
  name: string;
  quantity: number;
}

const objects1: Objects = new Map();
const objects2 = new Map<string, ObjectValue>();

// alternative method
const mapGenerator = () => new Map<string, ObjectValue>();
const objects3 = mapGenerator();

Each of these methods will yield the same type definition while keeping the necessary information concise.

Developing a structure or definition for a Map

Answer №1

Similar questions

Encountering build issues with Next.js on Vercel and local environments

The functionality of the Angular directive ngIf is not meeting the desired outcome

How can I access the parameter value for the tooltip callback function within echarts?

What is the best way to store a gridster-item in the database when it is resized or changed using a static function

suspicion arises that the argument is not correctly referencing the appropriate variables

Expanding Angular FormGroup Models with TypeScript

Angular's NgShoppingCart is designed in such a way that items stored in the localStorage are automatically cleared out

Fetching data from MongoDB, loading over 3000 entries and implementing pagination

Tips for integrating jwt token into axios request

Encountering the error message "Expected undefined to be truthy" while testing the creation of a Component

Updating the value of an Angular select on change is not being reflected

Personalizing the predefined title bar outline of the input text field

Backdrop dimming the Material UI Modal

Combining marker, circle, and polygon layers within an Angular 5 environment

Dividing a JSON object into arrays containing keys and values within an Angular framework

Is it possible to utilize an @Input() in Angular with multiple types?

The type argument '(id: any, title: any, body: any, image: any) => Element' does not match the parameter type

Tips for managing your time while anticipating an observable that may or may not

Error TS2322: Type 'Partial<T>' is not assignable to type 'T'

Issue encountered: "TypeError: .... is not a function" arises while attempting to utilize a component function within the template