Retrieve a mapping of keys from a generic object structure in TypeScript

Question

Retrieve a mapping of keys from a generic object structure in TypeScript

I am trying to extract the key map from an object, and although I have created a function for this purpose, TypeScript is not happy with it. How can I resolve this issue without using acc: any?

const origin = {
  a: 1,
  b: 'string',
  c: () => {}
};

function getObjKeyMap<T>(obj: T) {
  return Object.keys(obj).reduce((acc, k) => {
 /* Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.ts(7053) */
    acc[k] = k;
    return acc;
  }, {});
}

const keyMap = getObjKeyMap(origin);

typescript typescript-generics

Answer 1

Answer №1

Can you identify the type of object that reduce utilizes for the accumulator?

const originObj = {
  a: 1,
  b: 'string',
  c: () => {}
};

function getObjKeyMap<T>(obj: T) {
  return Object.keys(obj).reduce((acc, k) => {
    acc[k] = k;
    return acc;
  }, {} as Record<string, string>);
}

// or

function getObjKeyMap1<T>(obj: T) {
  return Object.keys(obj).reduce((acc: Record<string, string>, k: string) => {
    acc[k] = k;
    return acc;
  }, {});
}

const keyMap = getObjKeyMap(originObj);

Check TypeScript Playground here

Yet, there might be a more efficient solution available. It is possible to declare a function like this:

function getObjKeyMap<T, K extends keyof T>(obj: T): Record<K, K>

Typescript can then specify that

getObjectMap({a: 1, b: 'string', c: () => {}}

will produce {a: "a", b: "b", c: "c"}.

This approach seems more optimal:

const originObj = {
  a: 1,
  b: 'string',
  c: () => {}
};

type KeyMap<T> = {
  [key in keyof T]: key
};

function getObjKeyMap<T>(obj: T): KeyMap<T> {
  return Object.keys(obj).reduce((acc, k) => ({...acc, k: k}), {} as KeyMap<T>);
}

const keyMap = getObjKeyMap<typeof originObj>(originObj);

Explore TypeScript Playground here

Answer 2

Can you identify the type of object that reduce utilizes for the accumulator?

const originObj = {
  a: 1,
  b: 'string',
  c: () => {}
};

function getObjKeyMap<T>(obj: T) {
  return Object.keys(obj).reduce((acc, k) => {
    acc[k] = k;
    return acc;
  }, {} as Record<string, string>);
}

// or

function getObjKeyMap1<T>(obj: T) {
  return Object.keys(obj).reduce((acc: Record<string, string>, k: string) => {
    acc[k] = k;
    return acc;
  }, {});
}

const keyMap = getObjKeyMap(originObj);

Check TypeScript Playground here

Yet, there might be a more efficient solution available. It is possible to declare a function like this:

function getObjKeyMap<T, K extends keyof T>(obj: T): Record<K, K>

Typescript can then specify that

getObjectMap({a: 1, b: 'string', c: () => {}}

will produce {a: "a", b: "b", c: "c"}.

This approach seems more optimal:

const originObj = {
  a: 1,
  b: 'string',
  c: () => {}
};

type KeyMap<T> = {
  [key in keyof T]: key
};

function getObjKeyMap<T>(obj: T): KeyMap<T> {
  return Object.keys(obj).reduce((acc, k) => ({...acc, k: k}), {} as KeyMap<T>);
}

const keyMap = getObjKeyMap<typeof originObj>(originObj);

Explore TypeScript Playground here

Retrieve a mapping of keys from a generic object structure in TypeScript

Answer №1

Similar questions

Next js is throwing an error because it cannot accept objects as a React child. Instead, it found an error message stating "Response not successful: Received status code 401."

Exposing the method to the outside world by making it public in

Using TypeScript with Vue to Retrieve Information from a Form

Share information by including the provider within the @component declaration in Angular

Issue: Using the command 'typings search' successfully locates a package, however, when attempting to install it using 'typings install', the process fails

TypeScript's reliance on dependent types

The error TS2300 arises from the duplicate identifier 'PropertyKey' found in the node_modules/@types/core-js/index.d.ts file

What is the connection between tsconfig.json and typings.json files?

Error in Nestjs Swagger: UnhandledPromiseRejectionWarning - The property `prototype` cannot be destructed from an 'undefined' or 'null' object

TypeScript maintains the reference and preserves the equality of two objects

Using *ngFor to iterate through a nested collection in an Angular 2 application

Exploring an array in Angular 2 using TypeScript

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

In Angular and Typescript, adjusting the index in one dropdown will automatically update the selected option in another dropdown

crafting connections in 3D using TypeORM (ORM)

Issue with the recursive function in javascript for object modification

Can you provide guidance on how to divide a series of dates and times into an array based

Set the default value for a form control in a select dropdown using Angular

Attempting to create a login feature using phpMyAdmin in Ionic framework

The noUnusedLocal rule in the Typescript tsconfig is not being followed as expected