Tips for executing a type-secure object mapping in Typescript

Question

Tips for executing a type-secure object mapping in Typescript

I am currently working on creating a function in Typescript that will map an object while ensuring that it retains the same keys. I have attempted different methods, but none seem to work as intended:

function mapObject1<K extends PropertyKey, A, B>(
  object: { [P in K]: A },
  mapper: (value: A) => B,
): { [P in K]: B } {
  return Object.fromEntries(
    Object.entries(object)
      .map(([key, value]): [K, B] => [key, mapper(value)]),
  ); // error!
  // Type '{ [k: string]: B; }' is not assignable to type '{ [P in K]: B; }'
}

export function mapObject2<K extends PropertyKey, A, B>(
  object: { [P in K]: A },
  mapper: (value: A) => B,
): { [P in K]: B } {
  const result: { [P in K]?: B } = {};

  (Object.keys(object) as K[]).forEach((key: K) => {
    result[key] = mapper(object[key]);
  });

  return result; // error!
  // Type '{ [P in K]?: B | undefined; }' is not assignable to type '{ [P in K]: B; }'
}

In mapObject1, when using Object.entries() and Object.fromEntries(), the key types are converted to string. In mapObject2, since result's keys start out empty, they must be optional, leading Typescript to fail recognizing all original keys from object. How can this issue be resolved?

typescript typing

Answer 1

Answer №1

Regrettably, the TypeScript compiler faces challenges in verifying the safety of the implementation due to several reasons. The most practical approach is to ensure that your implementation is correctly written and then utilize type assertions to explicitly inform the compiler about the types of values you claim they possess:

function mapObject1<K extends PropertyKey, A, B>(
  object: { [P in K]: A },
  mapper: (value: A) => B,
): { [P in K]: B } {
  return Object.fromEntries(
    Object.entries(object)
      .map(([key, value]) => [key, mapper(value as A)]),
    // assert --------------------------------> ^^^^^
  ) as { [P in K]: B }
  //^^^^^^^^^^^^^^^^^^ <-- assert
}

function mapObject2<K extends PropertyKey, A, B>(
  object: { [P in K]: A },
  mapper: (value: A) => B,
): { [P in K]: B } {
  const result: { [P in K]?: B } = {};

  (Object.keys(object) as K[]).forEach((key: K) => {
    // assert -------> ^^^^^^ (you already did this)
    result[key] = mapper(object[key]);
  });

  return result as { [P in K]: B };
  // assert --> ^^^^^^^^^^^^^^^^^^
}

Fortunately, everything compiles without any issues.

The compiler faces limitations in comprehending the following logic:

The typings for the
```
Object.entries() method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
```
and (the Object.keys() method do not restrict the keys of object to just your generic type K. Since object types in TypeScript are not "sealed," objects may contain more properties than the compiler is aware of. Therefore, the compiler assigns a type of string for keys and unknown for values. Refer to Why doesn't Object.keys return a keyof type in TypeScript? for further insights.

Hence, some errors arise because the compiler aims to prevent potential pitfalls like this:
```
interface Foo { x: number, y: number, z: number }
const obj = { x: Math.LN2, y: Math.PI, z: Math.E, other: "abc" };
const foo: Foo = obj; // this assignment is okay
const oops = mapObject1(foo, num => num.toFixed(2)); 
/* const oops: { x: string; y: string; z: string; } */
// 💥 num.toFixed is not a function !!!
```
While assigning foo of type
```
Foo</code allows for additional properties, it leads to runtime errors within the mapping function. Although such circumstances are rare in practice, if you deem them acceptable risks, utilize type assertions and proceed. Otherwise, consider redesigning your function to accept a defined list of keys for transformation. Nonetheless, this falls beyond the scope of the current question.</p>
</li>
<li><p>Even if the compiler assumes that <code>Object.keys(object)
```
returns all keys, it cannot ascertain that iterating over these keys and populating properties in the return object will elevate the partial object to a complete one. This action is safe but exceeds the compiler's deduction capabilities. See How can i move away from a Partial<T> to T without casting in Typescript for detailed information. In such scenarios, employing a type assertion simplifies the process.

Playground link to code

Answer 2

Regrettably, the TypeScript compiler faces challenges in verifying the safety of the implementation due to several reasons. The most practical approach is to ensure that your implementation is correctly written and then utilize type assertions to explicitly inform the compiler about the types of values you claim they possess:

function mapObject1<K extends PropertyKey, A, B>(
  object: { [P in K]: A },
  mapper: (value: A) => B,
): { [P in K]: B } {
  return Object.fromEntries(
    Object.entries(object)
      .map(([key, value]) => [key, mapper(value as A)]),
    // assert --------------------------------> ^^^^^
  ) as { [P in K]: B }
  //^^^^^^^^^^^^^^^^^^ <-- assert
}

function mapObject2<K extends PropertyKey, A, B>(
  object: { [P in K]: A },
  mapper: (value: A) => B,
): { [P in K]: B } {
  const result: { [P in K]?: B } = {};

  (Object.keys(object) as K[]).forEach((key: K) => {
    // assert -------> ^^^^^^ (you already did this)
    result[key] = mapper(object[key]);
  });

  return result as { [P in K]: B };
  // assert --> ^^^^^^^^^^^^^^^^^^
}

Fortunately, everything compiles without any issues.

The compiler faces limitations in comprehending the following logic:

The typings for the
```
Object.entries() method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
```
and (the Object.keys() method do not restrict the keys of object to just your generic type K. Since object types in TypeScript are not "sealed," objects may contain more properties than the compiler is aware of. Therefore, the compiler assigns a type of string for keys and unknown for values. Refer to Why doesn't Object.keys return a keyof type in TypeScript? for further insights.

Hence, some errors arise because the compiler aims to prevent potential pitfalls like this:
```
interface Foo { x: number, y: number, z: number }
const obj = { x: Math.LN2, y: Math.PI, z: Math.E, other: "abc" };
const foo: Foo = obj; // this assignment is okay
const oops = mapObject1(foo, num => num.toFixed(2)); 
/* const oops: { x: string; y: string; z: string; } */
// 💥 num.toFixed is not a function !!!
```
While assigning foo of type
```
Foo</code allows for additional properties, it leads to runtime errors within the mapping function. Although such circumstances are rare in practice, if you deem them acceptable risks, utilize type assertions and proceed. Otherwise, consider redesigning your function to accept a defined list of keys for transformation. Nonetheless, this falls beyond the scope of the current question.</p>
</li>
<li><p>Even if the compiler assumes that <code>Object.keys(object)
```
returns all keys, it cannot ascertain that iterating over these keys and populating properties in the return object will elevate the partial object to a complete one. This action is safe but exceeds the compiler's deduction capabilities. See How can i move away from a Partial<T> to T without casting in Typescript for detailed information. In such scenarios, employing a type assertion simplifies the process.

Playground link to code

Answer 3

Answer №2

To overcome the limitations of Typescript, you have the option to define the return type of mapObject when invoking it and then convert the return value to any. While this method may not be completely foolproof, it enables you to maintain type integrity while mapping objects.

function mapObject<R>(
  object: object,
  mapper: (val: any, key: string) => any,
): R {
  return Object.fromEntries(
    Object.entries(object).map(([key, value]) => [key, mapper(value, key)]),
  ) as any;
}

You can utilize this function by specifying the desired parameters, such as excluding a property c from each value in an input object:

const input = {
  k1: {
    b: 1,
    c: 2,
  },
  k2: {
    c: 3,
    d: 4,
  },
} as const;

const mapper = <T extends { c: number }>(value: T) => {
  const { c, ...other } = value;
  return other;
};

const result = mapObject<
  { [k in keyof typeof input]: ReturnType<typeof mapper<typeof input[k]>> }
>(input, mapper);

In the end, typeof result will display:

{
  readonly k1: {
    readonly b: 1;
  };
  readonly k2: {
    readonly d: 4;
  };
}

The underlying reason for implementing this approach lies in the inability to pass a generic parameter to another generic parameter in Typescript, referred to as a higher-kinded type (referenced in this answer).

Answer 4

To overcome the limitations of Typescript, you have the option to define the return type of mapObject when invoking it and then convert the return value to any. While this method may not be completely foolproof, it enables you to maintain type integrity while mapping objects.

function mapObject<R>(
  object: object,
  mapper: (val: any, key: string) => any,
): R {
  return Object.fromEntries(
    Object.entries(object).map(([key, value]) => [key, mapper(value, key)]),
  ) as any;
}

You can utilize this function by specifying the desired parameters, such as excluding a property c from each value in an input object:

const input = {
  k1: {
    b: 1,
    c: 2,
  },
  k2: {
    c: 3,
    d: 4,
  },
} as const;

const mapper = <T extends { c: number }>(value: T) => {
  const { c, ...other } = value;
  return other;
};

const result = mapObject<
  { [k in keyof typeof input]: ReturnType<typeof mapper<typeof input[k]>> }
>(input, mapper);

In the end, typeof result will display:

{
  readonly k1: {
    readonly b: 1;
  };
  readonly k2: {
    readonly d: 4;
  };
}

The underlying reason for implementing this approach lies in the inability to pass a generic parameter to another generic parameter in Typescript, referred to as a higher-kinded type (referenced in this answer).

Tips for executing a type-secure object mapping in Typescript

Answer №1

Answer №2

Similar questions

Encountering difficulty in reaching the /login endpoint with TypeScript in Express framework

Having issues with NGXS subscription not functioning properly when selecting a variable

What steps are involved in launching an outdated Angular project?

The recursive component is functional exclusively outside of its own scope

Developing React component libraries with TypeScript compared to Babel compiler

Detecting the language of a browser

Is there a way to keep a button in a "pressed" state after it has been clicked?

DeActivation only occurs once per route

The error message "Undefined error in Angular 8 when waiting for API call to finish" appears when

What is the best way to perform a query in Angular using Firebase Firestore?

The MemoizedSelector cannot be assigned to a parameter of type 'string'

Dealing with router parameters of an indefinite number in Angular 5: A comprehensive guide

Searching within an Angular component's DOM using JQuery is restricted

Challenge faced: Angular array variable not refreshing

When the state changes, the dialogue triggers an animation

Challenges arise when trying to access environment variables using react-native-dotenv in React

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

Inputting data types as arguments into a personalized hook

How can I modify the pristine state of NgModel in Angular 2 using code?

Can the automatic casting feature of TypeScript be turned off when dealing with fields that have identical names?