Can you explain the concept of a mapped type and its practical applications?

Question

Can you explain the concept of a mapped type and its practical applications?

What is the function of this? And when would be the best scenario to utilize it?

Answer 1

Answer №1

Understanding Typescript Mapped Types:

When working with Typescript, there are times when we need to create types based on existing ones. Mapped types provide a concise way to generate new types that adhere to the principle of not repeating ourselves.

Dealing with Custom Properties:

Issue: Lack of knowledge about all properties of an object type in advance
Solution: Declare custom properties and type them using this syntax:

type customProperties = {
  [key: string]: string | boolean;
};

const dataObj: customProperties = {
  str: 'hello',
  boolVal: true,
  // int: 123 > Error Type 'number' is not assignable to type 'string | boolean'.
};

Benefit of Mapped Types:

Problem: Need to base an object type on another type without defining all properties repeatedly
Approach: Define custom properties using the syntax below:

type Person = {
  name: string;
  age: string;
};

// For illustration purpose only >> TypeScript has built-in Readonly, which should be used instead
type myReadonly<Type> = {
  readonly [Property in keyof Type]: Type[Property];
};

// For demonstration only >> TypeScript offers Partial, use it for partial types
type myPartial<Type> = {
  [Property in keyof Type]?: Type[Property];
};

type ReadOnlyPerson = myReadonly<Person>
type PartialPerson  = myPartial<Person>

It's worth noting that mapped types utilize the []: type syntax for custom properties. The distinction between custom properties and mapped types lies in the approach they take:

Mapped types iterate over properties of an existing type using generics and the [Property in keyof Type] syntax. This allows mapping all properties of the existing type to a new type that can be tailored as needed.
Custom properties help in typing object properties that are unknown beforehand. This is valuable when the exact structure of the object is uncertain at coding time due to potential additional properties being added later on.

Answer 2

Understanding Typescript Mapped Types:

When working with Typescript, there are times when we need to create types based on existing ones. Mapped types provide a concise way to generate new types that adhere to the principle of not repeating ourselves.

Dealing with Custom Properties:

Issue: Lack of knowledge about all properties of an object type in advance
Solution: Declare custom properties and type them using this syntax:

type customProperties = {
  [key: string]: string | boolean;
};

const dataObj: customProperties = {
  str: 'hello',
  boolVal: true,
  // int: 123 > Error Type 'number' is not assignable to type 'string | boolean'.
};

Benefit of Mapped Types:

Problem: Need to base an object type on another type without defining all properties repeatedly
Approach: Define custom properties using the syntax below:

type Person = {
  name: string;
  age: string;
};

// For illustration purpose only >> TypeScript has built-in Readonly, which should be used instead
type myReadonly<Type> = {
  readonly [Property in keyof Type]: Type[Property];
};

// For demonstration only >> TypeScript offers Partial, use it for partial types
type myPartial<Type> = {
  [Property in keyof Type]?: Type[Property];
};

type ReadOnlyPerson = myReadonly<Person>
type PartialPerson  = myPartial<Person>

It's worth noting that mapped types utilize the []: type syntax for custom properties. The distinction between custom properties and mapped types lies in the approach they take:

Mapped types iterate over properties of an existing type using generics and the [Property in keyof Type] syntax. This allows mapping all properties of the existing type to a new type that can be tailored as needed.
Custom properties help in typing object properties that are unknown beforehand. This is valuable when the exact structure of the object is uncertain at coding time due to potential additional properties being added later on.

Can you explain the concept of a mapped type and its practical applications?

Answer №1

Understanding Typescript Mapped Types:

Similar questions

Error: Attempting to access 'config' property of undefined variable

`Can you bind ngModel values to make select options searchable?`

Is it possible to customize error messages in @hapi/joi?

Find a string that matches an element in a list

Solving automatically generated TypeScript MongoDB types for GraphQL results

Creating a personalized design for MUI TextField spin button

What is the best way to transition a connected component from a class-based to a functional component in TypeScript?

Executing a function to erase the stored value in local storage during an Angular unit test

I am currently making use of the Material UI accordion component and I would prefer for it to not collapse unless I specifically click on the expandIcon

Creating a custom Angular pipe to convert milliseconds to a formatted hh:mm:ss in Angular

Using functions as observer callbacks is not permitted in TypeScript

The detection of my query parameters is not working as expected

The interface 'children: string' does not share any properties with the type 'IntrinsicAttributes'.ts(2559)

The headerStyle does not have any impact on the header component in React-Native

Cross-origin error triggered by using an external API within a ReactJS application

Tips for passing a query parameter in a POST request using React.js

Encountered a style group error 'non-collision' while using Angular with HERE Maps JS API 3.1

Filtering rows in angular based on the current data's id

How can I identify and remove duplicate elements from an array of objects?

How can I ensure that a pop-up is shown only once per day in Vue.js