Скачать или смотреть Creating a Dynamic Object from an Array in TypeScript

Learn how to create a TypeScript function that dynamically returns an object with keys based on an input array.
---
This video is based on the question https://stackoverflow.com/q/76853754/ asked by the user 'Ahmet Yazıcı' ( https://stackoverflow.com/u/19989260/ ) and on the answer https://stackoverflow.com/a/76853781/ provided by the user 'jagmitg' ( https://stackoverflow.com/u/1020254/ ) 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: Returning an object which has keys as the values of passed array

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.
---
Returning an Object with Array Values as Keys in TypeScript

In software development, particularly in TypeScript, there are often situations where you need to create an object whose keys are derived from the values of a given array. If you've ever found yourself needing to automate this process for strong typing in your TypeScript code, you've come to the right place. In this article, we'll explore how to create such a function that returns an object with the keys based on the values of an array passed to it.

The Challenge

The primary problem you might encounter is how to define a function that takes an array of strings and returns an object where:

Each string in the array is a key in the object.

The value associated with each key is of type string.

For example, if the user passes the array ["i", "love", "potato"], the expected return type should be inferred as:

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

Examining Incorrect Approaches

Your initial implementation might have looked something like this:

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

However, this method will not work as intended. The main issue lies in the way TypeScript interprets the typeof keys. It does not correctly map the string literals from the array to the keys of the resulting object type.

The Correct Solution

To achieve the desired functionality, we will use generic types and mapped types in TypeScript. Here’s the correct approach to creating the function:

Step-by-Step Breakdown

Define Generic Type: We will define a generic type T that extends an array of strings.

Rest Parameters: Use rest parameters (...T) in the parameters list to accept an array of strings.

Mapped Types: We will utilize mapped types to construct our return type based on the array values.

Implementation

Here is the corrected version of the function:

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

Explanation of the Code

TypeScript Generics: We declare T as a generic that ensures the function can accept any array of strings.

Parameter Declaration: The keys parameter accepts an array of strings with the readonly modifier, meaning that the array cannot be modified within the function.

Dynamic Object Creation: The function initializes an empty object result, iterates over the keys, and assigns each key to the object with a default string (like an empty string in this case).

Return Type: The return type is dynamically inferred from the input array, providing a strong type guarantee for the returned object.

Usage Example

Once you have implemented the function, you can call it like this:

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

This example demonstrates how you can easily create an object with keys based on the passed array values in a type-safe manner.

Conclusion

Creating an object with keys derived from an input array in TypeScript is straightforward with the right approach. By leveraging TypeScript's generic and mapped types, you can ensure that your function is both flexible and type-safe. This not only enhances the user experience but also maintains a robust type system — a hallmark of any well-structured TypeScript application.

To summarize, the importance of proper type handling in TypeScript cannot be overstated, and this method serves as a great example of how to use TypeScript's powerful features to create dynamic types.

Happy coding!