Typescript mapped type with filtered keys

Typescript Mapped Type with Filtered Keys

When working with TypeScript, you may come across a situation where you need to create a mapped type that includes only certain keys from an existing type. This can be achieved by using a combination of mapped types and conditional types in TypeScript.

Let’s say you have an existing type with multiple properties, and you want to create a new type that includes only a subset of those properties based on a condition. TypeScript provides a way to achieve this using mapped types and conditional types.

Solution 1: Using Mapped Types

One way to create a mapped type with filtered keys is by using the keyof operator along with the Pick utility type. The keyof operator allows you to get the keys of an existing type, and the Pick utility type allows you to select specific properties from a type.

Here’s an example:

type ExistingType = {
  prop1: string;
  prop2: number;
  prop3: boolean;
};

type FilteredType = Pick;

// Usage
const filteredObject: FilteredType = {
  prop1: "Hello",
  prop3: true,
};

In this example, we have an existing type called ExistingType with three properties: prop1, prop2, and prop3. We want to create a new type called FilteredType that includes only prop1 and prop3. We achieve this by using the Pick utility type and specifying the desired keys as a union type.

The resulting FilteredType will only have the prop1 and prop3 properties. Any attempt to assign values to other properties will result in a TypeScript error.

Solution 2: Using Conditional Types

Another way to create a mapped type with filtered keys is by using conditional types. Conditional types allow you to conditionally transform types based on a condition.

Here’s an example:

type ExistingType = {
  prop1: string;
  prop2: number;
  prop3: boolean;
};

type FilteredType = {
  [K in keyof ExistingType]: ExistingType[K] extends string | boolean ? ExistingType[K] : never;
};

// Usage
const filteredObject: FilteredType = {
  prop1: "Hello",
  prop3: true,
};

In this example, we define a mapped type called FilteredType using the keyof operator and a conditional type. The conditional type checks if the value of each property in ExistingType extends string or boolean. If it does, the property is included in the resulting type; otherwise, it is assigned the never type.

The resulting FilteredType will only include the properties from ExistingType that have a value of string or boolean. Other properties will be excluded from the resulting type.

Conclusion

In this blog post, we explored two solutions to create a mapped type with filtered keys in TypeScript. The first solution involved using the keyof operator along with the Pick utility type, while the second solution utilized conditional types. Both solutions provide a way to create new types that include only a subset of properties based on a condition.

By leveraging these techniques, you can effectively filter and manipulate types in TypeScript to suit your specific needs.