Скачать или смотреть How to Filter an Interface or Type by Property Types in TypeScript

Learn how to effectively filter TypeScript types by specific property types using utility types and custom helpers for better type management in your code.
---
This video is based on the question https://stackoverflow.com/q/63011753/ asked by the user 'crazyones110' ( https://stackoverflow.com/u/12644421/ ) and on the answer https://stackoverflow.com/a/63012153/ provided by the user 'Karol Majewski' ( https://stackoverflow.com/u/10325032/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: filter an interface or type by property types

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Filtering an Interface or Type by Property Types in TypeScript

In TypeScript, managing types and interfaces efficiently is crucial for maintaining readable and manageable code. One of the challenges developers encounter is the need to filter an interface or type based on its property types. In this guide, we'll explore a real-world example and present a solid solution for filtering properties based on their value types.

The Problem

Consider the following TypeScript type definition:

[[See Video to Reveal this Text or Code Snippet]]

In this example, we have an interface named Obj that consists of several properties, each with different data types. The requirement is to filter out the properties of this type that are either number or string. The desired result would look like this:

[[See Video to Reveal this Text or Code Snippet]]

Despite searching through TypeScript's utility types, the standard options did not provide a way to perform this specific filtering task.

The Solution

To address the challenge posed, we can create a helper type that identifies properties based on their value types. This allows us to efficiently filter the desired properties from the source object. Below are the steps to achieve this.

Step 1: Define a Property Selector

We'll start by creating a utility type that extracts the keys of an object type based on their corresponding value types. Here’s how you can define this helper type:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

Mapped Type: This snippet employs TypeScript's mapped types to iterate through each key in the provided type T.

Conditional Type: Inside the mapped type, it checks if the property type T[K] extends the value type V. If it does, it returns the key K; otherwise, it returns never.

Final Extraction: The final [keyof T] extracts only the keys that matched the condition, allowing you to compile a list of appropriate property names.

Step 2: Create the Filtered Type

Now that we have a way to identify the properties of interest, we can apply this helper type to create our filtered type:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

Pick Utility Type: This built-in TypeScript utility type allows you to select a subset of properties from a given type based on the keys returned by our PropertyOfValue type.

Bonus: Global Namespace Abstraction

If you'd like to streamline the filtering process even further, consider abstracting the logic into the global namespace for ease of use throughout your project:

[[See Video to Reveal this Text or Code Snippet]]

Usage Example:

You can then utilize this new global approach as follows:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Filtering TypeScript interfaces by property types can significantly improve type management and code clarity. By constructing a well-defined helper type, you're now capable of dynamically selecting properties that meet specific type criteria. This comprehensive approach allows you to maintain cleaner and more effective TypeScript code.

Make this pattern a part of your TypeScript toolkit, and watch how it simplifies your coding experience!