Mapping specific properties in an object using Typescript

Question

Mapping specific properties in an object using Typescript

I'm diving into TypeScript and aiming to create a straightforward generic function. The function will take an object (potentially partial), a list of keys, and map the specified keys (if they exist) to a different value while keeping the rest of the values unchanged. My goal is to maintain type safety throughout this process.

For example, if we have a type:

interface User {
  userID: string;
  displayName: string;
  email: string;
  photoURL: string;
}

I want to develop a function called mapper that accepts an object of type Partial<User>, along with a list of keys such as

"displayName" | "photoURL"

. For instance, we might want to capitalize the property values for these keys while leaving the other properties untouched.

Here are some sample input/output scenarios:

// INPUT
const fullUser: User = {
    userID: "aaa",
    displayName: "bbb",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b6b6b695b1b1b1fbb6bab8">[email protected]</a>",
    photoURL: "https://eee.fff",
}

const partialUser = {
    userID: "ggg",
    photoURL: "https://hhh.iii",
}

// OUTPUT
const o1 = capsMapper<User, "displayName" | "userID">(fullUser);
const o2 = capsMapper<User, "displayName" | "userID">(partialUser);

// o1 should be
{
    userID: "AAA",
    displayName: "BBB",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5858587b5f5f5f15585456">[email protected]</a>",
    photoURL: &q;heights;shttps://eee.fff",
}

// o2 should be
{
    userID: "GGG",
    photoURL: "https://hhh.iii",
}

To tackle this requirement, I crafted the following simple generic function:

const mapper = <Type, Keys extends keyof Type>(data: Partial<Type>) => {
  ???
}

I attempted to invoke it using

mapper<User, "displayName" | "photoURL">(myObject)

, but I encountered difficulties in devising the function's inner workings. Specifically, when cycling through the keys of the provided object, I struggled to determine if a key belongs to the Keys type specified generically. I experimented with adding another parameter to the function:

const mapper = <Type, Keys extends keyof Type>(data: Partial<Type>, keys: Keys) => {

or even

const mapper = <Type, Keys extends keyof Type>(data: Partial<Type>, keys: Keys[]) => {

However, attempting to verify the key of the provided (possibly partial) object led to compiler errors.

Is there a way to effectively implement such a function?

typescript

Answer 1

Answer №1

function filterObject<T, SelectedProp extends keyof T>(originalObj: Partial<T>, propertyList: Array<keyof T>) {
    const filteredObj:any = {};
    (new Set(propertyList.filter(prop => prop in originalObj))).forEach(prop => filteredObj[prop] = originalObj[prop])
    return filteredObj as Pick<T, SelectedProp>;
}
const obj = {
    name: "John Doe",
    age: 30
};
const result = filterObject<typeof obj, 'age'>(obj, ['age']);
console.log(result.age);

This code snippet is my attempt to achieve the desired outcome. I believe it meets the requirements, although there may be room for improvement. I acknowledge that further enhancements can be made with additional knowledge and time.

I couldn't format this properly as a comment, so pasting here instead.

Answer 2

function filterObject<T, SelectedProp extends keyof T>(originalObj: Partial<T>, propertyList: Array<keyof T>) {
    const filteredObj:any = {};
    (new Set(propertyList.filter(prop => prop in originalObj))).forEach(prop => filteredObj[prop] = originalObj[prop])
    return filteredObj as Pick<T, SelectedProp>;
}
const obj = {
    name: "John Doe",
    age: 30
};
const result = filterObject<typeof obj, 'age'>(obj, ['age']);
console.log(result.age);

This code snippet is my attempt to achieve the desired outcome. I believe it meets the requirements, although there may be room for improvement. I acknowledge that further enhancements can be made with additional knowledge and time.

I couldn't format this properly as a comment, so pasting here instead.

Answer 3

Answer №2

Passing actual key string arguments into the capsMapper() function is essential. While the TypeScript compiler can handle generic type parameters like K extends keyof T, it's crucial to remember that the static type system, including generics, gets erased when TypeScript is emitted to JavaScript, which ultimately runs at runtime. If there are no values of type K, then these won't be usable at runtime. Therefore, instead of

<T, K extends keyof T>(data: T) => ...

, a more suitable approach would involve something like

<T, K extends keyof T>(data: T, ...keys: K[]) => ...

.

Here is a potential implementation for capsMapper:

const capsMapper = <T extends Partial<Record<K, string>>, K extends keyof T>(
  data: T, ...keys: K[]
) => {
  const d: Omit<T, K> = data;
  const mapped: { [P in K]?: string } = {};
  for (const k of keys) {
    const v = data[k];
    if (typeof v === "string") {
      mapped[k] = v.toUpperCase();
    }
  }

  type WidenString<T> = T extends string ? string : T;
  return { ...d, ...mapped } as { 
    [P in keyof T]: P extends K ? WidenString<T[P]> : T[P] 
  }; 
}

The typing here may seem elaborate, but each part serves its purpose. Only objects of type T with keys of type K</code and <code>string or

undefined</code values in the properties are accepted as input for <code>data

. We widen the type of data from T to Omit<T, K>, essentially disregarding keys in

K</code since they will be overwritten. This processed data is stored in <code>d

for convenience.

Subsequently, we create an object named mapped exclusively for the capitalized properties, whose type mirrors

Partial<Record<K, string>></code. For every <code>k

in the keys array, any identified string properties are capitalized and placed in mapped under the corresponding key.

Finally, by merging d and

mapped</code into a new object and returning it, the output type would appear naturally as <code>Omit<T, K> & Partial<Record<K, string>></code, which is accurate yet not as precise as desired. Because each key in <code>keys</code could potentially be missing in the final output, even if it was present in the original <code>data

.

To ensure specificity, a type assertion is necessary to confirm that the output is indeed of type

{ [P in keyof T]: P extends K ? WidenString<T[P]> : T[P] }

, a mapped type akin to T</code (the type of <code>data) but with any mapped string properties widened to

string</code using the <code>WidenString<T>

conditional type. This distinction is vital when dealing with original

T</code types containing properties with string literal types because converting those to uppercase alters their type.</p>
<p>A test scenario follows below to demonstrate this concept:</p>
<pre><code>// Test scenario

By examining the provided examples, one can observe the correctness of the outputs and the preservation of types—o1 retains the User type, while o2 remains a Partial<User>. Notably, discrepancies arise when handling literal types:

// Example showcasing deviation due to literal types

This instance highlights how the property a within o3 disobeys the requirements set by

Foo</code, indicating why <code>WidenString<T>

is integral. It transforms the input type

{a?: "x" | "y"}

into the output type

{a?: string}</code, appropriately reflecting the altered property value upon uppercasing. To simplify typing in scenarios where such deviations are unexpected:</p>
<pre><code>return { ...d, ...mapped } as T;

This revision acknowledges o3 as Foo despite it failing to align with the prescribed properties. Ultimately, implementing the corrected type assertions ensures greater accuracy in predicting the output types based on the transformation logic applied within capsMapper.

Explore the code in the TypeScript Playground here

Answer 4

Passing actual key string arguments into the capsMapper() function is essential. While the TypeScript compiler can handle generic type parameters like K extends keyof T, it's crucial to remember that the static type system, including generics, gets erased when TypeScript is emitted to JavaScript, which ultimately runs at runtime. If there are no values of type K, then these won't be usable at runtime. Therefore, instead of

<T, K extends keyof T>(data: T) => ...

, a more suitable approach would involve something like

<T, K extends keyof T>(data: T, ...keys: K[]) => ...

.

Here is a potential implementation for capsMapper:

const capsMapper = <T extends Partial<Record<K, string>>, K extends keyof T>(
  data: T, ...keys: K[]
) => {
  const d: Omit<T, K> = data;
  const mapped: { [P in K]?: string } = {};
  for (const k of keys) {
    const v = data[k];
    if (typeof v === "string") {
      mapped[k] = v.toUpperCase();
    }
  }

  type WidenString<T> = T extends string ? string : T;
  return { ...d, ...mapped } as { 
    [P in keyof T]: P extends K ? WidenString<T[P]> : T[P] 
  }; 
}

The typing here may seem elaborate, but each part serves its purpose. Only objects of type T with keys of type K</code and <code>string or

undefined</code values in the properties are accepted as input for <code>data

. We widen the type of data from T to Omit<T, K>, essentially disregarding keys in

K</code since they will be overwritten. This processed data is stored in <code>d

for convenience.

Subsequently, we create an object named mapped exclusively for the capitalized properties, whose type mirrors

Partial<Record<K, string>></code. For every <code>k

in the keys array, any identified string properties are capitalized and placed in mapped under the corresponding key.

Finally, by merging d and

mapped</code into a new object and returning it, the output type would appear naturally as <code>Omit<T, K> & Partial<Record<K, string>></code, which is accurate yet not as precise as desired. Because each key in <code>keys</code could potentially be missing in the final output, even if it was present in the original <code>data

.

To ensure specificity, a type assertion is necessary to confirm that the output is indeed of type

{ [P in keyof T]: P extends K ? WidenString<T[P]> : T[P] }

, a mapped type akin to T</code (the type of <code>data) but with any mapped string properties widened to

string</code using the <code>WidenString<T>

conditional type. This distinction is vital when dealing with original

T</code types containing properties with string literal types because converting those to uppercase alters their type.</p>
<p>A test scenario follows below to demonstrate this concept:</p>
<pre><code>// Test scenario

By examining the provided examples, one can observe the correctness of the outputs and the preservation of types—o1 retains the User type, while o2 remains a Partial<User>. Notably, discrepancies arise when handling literal types:

// Example showcasing deviation due to literal types

This instance highlights how the property a within o3 disobeys the requirements set by

Foo</code, indicating why <code>WidenString<T>

is integral. It transforms the input type

{a?: "x" | "y"}

into the output type

{a?: string}</code, appropriately reflecting the altered property value upon uppercasing. To simplify typing in scenarios where such deviations are unexpected:</p>
<pre><code>return { ...d, ...mapped } as T;

This revision acknowledges o3 as Foo despite it failing to align with the prescribed properties. Ultimately, implementing the corrected type assertions ensures greater accuracy in predicting the output types based on the transformation logic applied within capsMapper.

Explore the code in the TypeScript Playground here

Mapping specific properties in an object using Typescript

Answer №1

Answer №2

Similar questions

Change the default parameter value when optional parameters are present

What is the best way to encode a type that necessitates a specific superclass and interface implementation?

Angular: No routes found that match the URL segment

The limit of update depth when using useState with an array generated from a map operation

Error encountered during Svelte/Vite/Pixi.js build: Unable to utilize import statement outside of a module

Having trouble with a 'Could not find a declaration file for module' error while using my JavaScript npm package?

Utilize Angular2 to dynamically add new routes based on an array register

How can I bind form data to an array in Angular?

Is it possible to create a typeguard for a complex combinatory type while retaining the existing type information?

Using TypeScript to execute a function that generates middleware for an Express application

Error with constructor argument in NestJS validator

Leverage the navigator clipboard feature to save an image in PNG format from a canvas

Why can't Angular iterate through objects using ngFor in Typescript?

Error in TypeScript when type-checking a dynamic key within a record

Using Angular to condense or manipulate an array

Cause the production build to fail while maintaining successful builds in development mode

What method does Angular use to distinguish between familiar elements and unfamiliar ones?

Express-openapi routes are giving a 404 error

Creating a PDF file from JSON data and enabling file download in a web application with React and JavaScript

It appears that using dedicated objects such as HttpParams or UrlSearchParams do not seem to work when dealing with Angular 5 and HTTP GET query parameters