Navigating through keys within a mapped Type in Typescript

Question

Navigating through keys within a mapped Type in Typescript

Are there alternative methods for iterating through object keys, transforming values, and ensuring the resulting type maintains the same keys as the input?

const env = {
  KEY_1: "VALUE_1",
  KEY_2: "ANOTHER_VALUE_2"
};

function mapValuesToLength<TEnv extends Record<string, string>>(
  env: TEnv
): Record<keyof TEnv, number> {
  const result: Partial<Record<keyof TEnv, number>> = {};

  for (const envKey in env) {
    result[envKey] = env[envKey].length;
  }

  return result as Record<keyof TEnv, number>;
}

// expecting result = {KEY_1: 7, KEY_2: 15}
const result = mapValuesToLength(env);

// expecting type resultType = { KEY_1: number; KEY_2: number; }
type resultType = typeof result

typescript

Answer 1

Answer №1

Consider trying out this alternative method (condensed into a single line):

const env = {
    KEY_1: "VALUE_1",
    KEY_2: "ANOTHER_VALUE_2"
};

type InputType = Record<string, string>;
type OutputType<T> = Record<keyof T, number>;

function mapValuesToLength<TEnv extends InputType>(env: TEnv): OutputType<TEnv> {
    return Object.entries(env).reduce((acc, [key, value]) => ({ ...acc, [key]: value.length }), {} as OutputType<TEnv>);
}

const result = mapValuesToLength(env);
console.log(result);

Key Steps to Follow:

Object.entries(): Produces an array containing an object's own enumerable property [key, value] pairs.
Array.prototype.reduce(): Applies a function against an accumulator and each element of the array.
1. ```
({ ...acc, [key]: value.length })
```
  : Appends the current key-value pair with the length of its value to the existing accumulator.
2. {} as OutputType<TEnv>: Initializes the accumulator as an empty object with the correct output type.

Visit Typescript Playground for more insight

Answer 2

Consider trying out this alternative method (condensed into a single line):

const env = {
    KEY_1: "VALUE_1",
    KEY_2: "ANOTHER_VALUE_2"
};

type InputType = Record<string, string>;
type OutputType<T> = Record<keyof T, number>;

function mapValuesToLength<TEnv extends InputType>(env: TEnv): OutputType<TEnv> {
    return Object.entries(env).reduce((acc, [key, value]) => ({ ...acc, [key]: value.length }), {} as OutputType<TEnv>);
}

const result = mapValuesToLength(env);
console.log(result);

Key Steps to Follow:

Object.entries(): Produces an array containing an object's own enumerable property [key, value] pairs.
Array.prototype.reduce(): Applies a function against an accumulator and each element of the array.
1. ```
({ ...acc, [key]: value.length })
```
  : Appends the current key-value pair with the length of its value to the existing accumulator.
2. {} as OutputType<TEnv>: Initializes the accumulator as an empty object with the correct output type.

Visit Typescript Playground for more insight

Answer 3

Answer №2

Your approach to converting one object to another using imperative programming is commendable. The logic implemented with the for loop is easy to comprehend and maintain.

While the functional approach with array.reduce() is an alternative, I prefer efficiency over complexity. The direct use of a for loop is more straightforward and performs better in terms of speed, considering unnecessary computation impacts performance.

In terms of enhancing your code with types, here’s a modified version:

const env = {
  KEY_1: "VALUE_1",
  KEY_2: "ANOTHER_VALUE_2",
};

// Defining types separately for clarity
type InputString<InputType> = Record<keyof InputType, string>;
type OutputNumber<InputType> = Record<keyof InputType, number>;

function mapValuesToLength<TEnv extends InputString<TEnv>>(env: TEnv) {

  const result = {} as OutputNumber<TEnv>; 

  for (let envKey in env) {
    result[envKey] = env[envKey].length;
  }

  return result;
}

const result = mapValuesToLength(env);

type resultType = typeof result;

Answer 4

Your approach to converting one object to another using imperative programming is commendable. The logic implemented with the for loop is easy to comprehend and maintain.

While the functional approach with array.reduce() is an alternative, I prefer efficiency over complexity. The direct use of a for loop is more straightforward and performs better in terms of speed, considering unnecessary computation impacts performance.

In terms of enhancing your code with types, here’s a modified version:

const env = {
  KEY_1: "VALUE_1",
  KEY_2: "ANOTHER_VALUE_2",
};

// Defining types separately for clarity
type InputString<InputType> = Record<keyof InputType, string>;
type OutputNumber<InputType> = Record<keyof InputType, number>;

function mapValuesToLength<TEnv extends InputString<TEnv>>(env: TEnv) {

  const result = {} as OutputNumber<TEnv>; 

  for (let envKey in env) {
    result[envKey] = env[envKey].length;
  }

  return result;
}

const result = mapValuesToLength(env);

type resultType = typeof result;

Navigating through keys within a mapped Type in Typescript

Answer №1

Answer №2

Similar questions

Server-side props become inaccessible on the client side due to middleware usage

Customizing a generic method in typescript

Enhance the efficiency of writing the *.d.ts file

Tips for resolving this unhandled error in React TypeScript

Tips for isolating data on the current page:

Switch between classes when hovering over / exiting ngFor elements

Unable to transfer information from the Parent component to the Child component

An angular component that is functioning properly when connected to a live server, however, it is experiencing issues when trying to run `

JavaScript's async function has the capability to halt execution on its own accord

BehaviorSubject Observable continuously notifies unsubscribed Subscription

Utilize devextreme for uploading files

Retrieving rows from a MySQL table that contain a specified BIGINT from an array parameter

gulp-tsc cannot locate the src directory

Nestjs is throwing an UnhandledPromiseRejectionWarning due to a TypeError saying that the function this.flushLogs is not recognized

Angular2 restricts Http requests within a specified time interval

What is the correct way to exclude and remove a portion of the value within an object using TypeScript?

The text inside the Mapbox GL popup cannot be highlighted or copied

Creating TypeScript Unions dependent on a nested object's property

Implementing TypeScript module resolution with Cucumber-js can be a bit tricky

Loading data into the Nuxt store upon application launch