Creating Object Types from Unions or Arrays in Typescript

Question

Creating Object Types from Unions or Arrays in Typescript

One of the challenges I'm facing involves a function that takes an array of strings and generates an object with those strings as keys. Here's an example:

const obj = arrayToObject(['x', 'y', 'z']); // {x: any, y: any, z: any}

My goal is to have TypeScript dynamically assign types to the returned object based on the array provided in the function arguments. While I am aware that passing the array as a tuple can give me a union type of values, I'm unsure how to proceed from there. Is it even possible to achieve what I'm aiming for?

arrays typescript types tuples

Answer 1

Answer №1

Are you satisfied with this solution:

const obj = arrayToObject(['a', 'b', 'c']);


type Convert<T extends ReadonlyArray<string>> = {
    [P in T[number]]: string

}
type Result = Convert<['foo', 'bar']> // {foo: string, bar: string)

function arrayToObject<T extends ReadonlyArray<string>>(args: readonly string[]): Convert<T> {
    return args.reduce((acc, elem) => ({...acc, [elem]: 'hello' }), {} as Convert<T>)
}

UPDATE

// It's important to remember that arrays are index-based data structures. Indexes have a `number` type

type Arr = readonly [1,2,3,4,5]

// Therefore, it is possible to access values by index
type Value1 = Arr[0] // 1
type Value2 = Arr[1] // 2 ... etc

type Value3 = Arr[0|1] // 1|2

// This demonstrates how distributive types function
type Value4 = Arr[number] // 5|1|2|3|4

// TypeScript recognizes that arrays use numbers as indexes, replacing `number` with allowed indexes. Although the actual workings of the TS compiler may be more complex, this is a simplified explanation.

Answer 2

Are you satisfied with this solution:

const obj = arrayToObject(['a', 'b', 'c']);


type Convert<T extends ReadonlyArray<string>> = {
    [P in T[number]]: string

}
type Result = Convert<['foo', 'bar']> // {foo: string, bar: string)

function arrayToObject<T extends ReadonlyArray<string>>(args: readonly string[]): Convert<T> {
    return args.reduce((acc, elem) => ({...acc, [elem]: 'hello' }), {} as Convert<T>)
}

UPDATE

// It's important to remember that arrays are index-based data structures. Indexes have a `number` type

type Arr = readonly [1,2,3,4,5]

// Therefore, it is possible to access values by index
type Value1 = Arr[0] // 1
type Value2 = Arr[1] // 2 ... etc

type Value3 = Arr[0|1] // 1|2

// This demonstrates how distributive types function
type Value4 = Arr[number] // 5|1|2|3|4

// TypeScript recognizes that arrays use numbers as indexes, replacing `number` with allowed indexes. Although the actual workings of the TS compiler may be more complex, this is a simplified explanation.

Creating Object Types from Unions or Arrays in Typescript

Answer №1

Similar questions

A guide to verifying the type of response from an HTTP request in Typescript

The cucumber_report.json file will not update to reflect the most recent test steps

Updating the value of a specific property within an object in an array

Angular 10 Compilation Error "NG8001 error: The element 'mat-card-title' is not recognized:

Building a hierarchical tree structure using arrays and objects with Lodash Js

Using JavaScript, you can filter an array of objects based on a specific search input

Issues with loading NextJS/Ant-design styles and JS bundles are causing delays in the staging environment

Utilize PHP Sub-Arrays with Key References

Most effective method for storing large volumes of data within JavaScript objects

The build process is encountering issues with lodash causing npm to fail

Utilizing Angular for making API requests using double quotes

Returning an array to the main method

showcasing JSON content on an HTML page using Angular version 4

What is an improved method for defining a TypeScript type to store API method invocations?

What causes the "Method Not Allowed" error while trying to restore the package.json package in VS2015?

PHP and MySQL return results in the form of arrays within arrays

Using PHP to compare two arrays within a conditional statement

Leveraging TypeScript with Ramda to efficiently propagate types

Make sure to include a property that is indexed when typing

What is the most efficient way to move selected products to the payment page when the checkout button is clicked in React?