Utilizing Object.fromEntries in Typescript

Question

Utilizing Object.fromEntries in Typescript

I am attempting to define a type called ObjectFromEntries that functions similarly to the return type of the Object.fromEntries function. Here is what I have so far:

type ObjectFromEntries<Entries extends [keyof any, any][]> = { [key in Entries[number][0]]: ___ };

declare var z: ObjectFromEntries<[["a", number], ["b", string], ["c", Date]]>
z.a // expected: number
z.b // expected: string
z.c // expected: Date

However, I am unsure what to substitute for ___.

When I attempt to use

key extends Entries[infer I][0] ? Entries[I][1] : never

, I encounter an error:

Type 'I' cannot be used to index type 'Entries'.(2536)
Type '0' cannot be used to index type 'Entries[I]'.(2536)

If I try Entries[number][1], every property ends up with the type string | number | Date, which makes sense but is not ideal.

How can I effectively synchronize key with the index to obtain the correct type?

typescript

Answer 1

Answer №1

If you want to express it differently, you could try this approach:

type ObjectFromEntries<Entries extends [keyof any, any][]> = {
    [K in Entries[number][0]]: Extract<Entries[number], [K, any]>[1]
} 

declare var x: ObjectFromEntries<[["a", number], ["b", string], ["c", Date]]>
x.a.toFixed();
x.b.toUpperCase();
x.c.getFullYear();

Just a suggestion, you can also simplify the code like so:

type ObjectFromEntrySet<E extends [keyof any, any]> = {
    [K in E[0]]: Extract<E, [K, any]>[1]
}

declare var y: ObjectFromEntrySet<["a", number] | ["b", string] | ["c", Date]>
y.a.toFixed();
y.b.toUpperCase();
y.c.getFullYear();

I hope this alternative explanation helps you with your task.

Check out the code on the TypeScript Playground here

Answer 2

If you want to express it differently, you could try this approach:

type ObjectFromEntries<Entries extends [keyof any, any][]> = {
    [K in Entries[number][0]]: Extract<Entries[number], [K, any]>[1]
} 

declare var x: ObjectFromEntries<[["a", number], ["b", string], ["c", Date]]>
x.a.toFixed();
x.b.toUpperCase();
x.c.getFullYear();

Just a suggestion, you can also simplify the code like so:

type ObjectFromEntrySet<E extends [keyof any, any]> = {
    [K in E[0]]: Extract<E, [K, any]>[1]
}

declare var y: ObjectFromEntrySet<["a", number] | ["b", string] | ["c", Date]>
y.a.toFixed();
y.b.toUpperCase();
y.c.getFullYear();

I hope this alternative explanation helps you with your task.

Check out the code on the TypeScript Playground here

Answer 3

Answer №2

In order to achieve this, simply include

"lib": ["ES2019"]

within the configuration file tsconfig.json:

{
  "compilerOptions": {
    "lib": ["ES2019"]
  }
}

Answer 4

In order to achieve this, simply include

"lib": ["ES2019"]

within the configuration file tsconfig.json:

{
  "compilerOptions": {
    "lib": ["ES2019"]
  }
}

Utilizing Object.fromEntries in Typescript

Answer №1

Answer №2

Similar questions

Using TypeScript, extract the value of a Promise from a Page Object

Error encountered in Angular build optimization process: TypeError - the function this._createContainer is not recognized

The hierarchy of precedence when using the TypeScript Type Assertion operator

Angular 2: Implementing functionality on selected option

After subscribing, creating the form results in receiving an error message that says "formgroup instance expected."

The flow union type operates smoothly without any errors occurring

Typescript: It is possible that the object is 'undefined' only for the '<' and '>' operators

I am looking for a guideline that permits me to restrict the use of a form validation tool

Hand over the component method as an argument to a class

When working with Angular 2, it is important to note that the NgFor directive only supports binding to Iterables like Arrays. If you encounter an error message stating "Cannot find a differ supporting object '[object Object]' of type 'leaveType

What is the best technique for verifying the existence of data in the database before making updates or additions with Angular's observables?

Images in the Ionic app are failing to display certain asset files

Is it possible to use a TypeScript Angular (click) event with an object property as the value?

Elevating Material-UI Drawer using makeStyles to a whole new level with styled-components

Update all occurrences of a particular value to null within the Realtime Database using Firebase Cloud Functions

How to dynamically insert variables into a separate HTML file while creating a VS Code extension

Dynamic loading of locale in Angular 5 using Angular CLI

Is there a way to ensure that the content of my modal dialog only displays once when it is opened?

Set a generic function type to a variable

Ways to effectively utilize an interface incorporating props.children and other property varieties