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

Question

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

The function useHider was created to conceal specific values from an object with the correct type. For example, using

const res = useHider({ id: 1, title: "hi"}, "id")

, will result in { title: "hi" } being returned. Attempting to access res.id will trigger a TypeScript error.

Additionally, the hideQueryResult function allows for default hiding of createdAt, updatedAt, and deletedAt values, or the option to specify additional parameters to hide more values from an object.

const useHider = <T, K extends keyof T>(obj: T, keysToHide: K[]) => {
    let res = obj;

    keysToHide.forEach((key) => {
        delete res[key];
    });

    return res as Omit<T, K>;
};

const hideQueryResult = <T, K extends keyof T>(
    query: T,
    keysToHide: K[] = [],
) => {
    const at = ["createdAt", "updatedAt", "deletedAt"] as K[];
    const allKeysToHide = [...keysToHide, ...at];
    const res = useHider(query, allKeysToHide);
    return res;
};

However, when attempting to utilize hideQueryResult to hide certain values, the desired outcome is not achieved.

const source = {
    id: "01ABC",
    title: "123",
    createdAt: "ABC",
    updatedAt: "ABC",
    deletedAt: "ABC",
};

const res1 = useHider(source, ["createdAt", "updatedAt", "deletedAt"]);

console.log(res1.id); // success (expected)
console.log(res1.createdAt); // failed (expected)

const res2 = hideQueryResult(source);

console.log(res2.id); // failed (not expected)

const res3 = hideQueryResult(source, ["id"]);

console.log(res3.createdAt); // success (not expected)

What steps can be taken to ensure it functions correctly?

javascript typescript typescript-typings

Answer 1

Answer №1

To start, it is recommended to create a shallow copy of the object before making any modifications. Without doing so, modifying the result will actually impact the original object. By using the syntax ({...object}), you can create a shallow copy and manipulate the properties as needed.

const useHider = <T, K extends keyof T>(object: T, keysToHide: K[]) => {
    let result = {...object}; // updated line

    keysToHide.forEach((key) => {
        delete result[key];
    });

    return result as Omit<T, K>;
};

Note: A shallow copy only duplicates the first-level keys and values, while the values may still reference the original data. For example:

const object = { 
    name: "John", 
    data: {
        age: 10
    }
}

const duplicate = {...object}

duplicate.username = "Alex"
console.log(object.username) // John

duplicate.data.age = 20
console.log(object.data.age) // 20

duplicate.data = null
console.log(object.data) // { age: 20 }

To address type-related issues in TypeScript, specify that the object passed to useHider via hideQueryResult must have those three fields. Additionally, provide a default value so TypeScript does not automatically infer all keys when the second argument is omitted. Instead, it uses the never type as the default placeholder for no set data.

const fieldsToRemove = ["createdAt", "updatedAt", "deletedAt"] as const // Using `const` to make it readonly and type-friendly

const hideQueryResult = <T, K extends keyof T = never>(
    query: T,
    keysToHide: K[] = [],
) => {
    const result = useHider(
        query as T & Record<typeof fieldsToRemove[number], unknown>, // Record defines an object type (keys and value type)
        [...fieldsToRemove, ...keysToHide]
    );
    return result;
};

Answer 2

To start, it is recommended to create a shallow copy of the object before making any modifications. Without doing so, modifying the result will actually impact the original object. By using the syntax ({...object}), you can create a shallow copy and manipulate the properties as needed.

const useHider = <T, K extends keyof T>(object: T, keysToHide: K[]) => {
    let result = {...object}; // updated line

    keysToHide.forEach((key) => {
        delete result[key];
    });

    return result as Omit<T, K>;
};

Note: A shallow copy only duplicates the first-level keys and values, while the values may still reference the original data. For example:

const object = { 
    name: "John", 
    data: {
        age: 10
    }
}

const duplicate = {...object}

duplicate.username = "Alex"
console.log(object.username) // John

duplicate.data.age = 20
console.log(object.data.age) // 20

duplicate.data = null
console.log(object.data) // { age: 20 }

To address type-related issues in TypeScript, specify that the object passed to useHider via hideQueryResult must have those three fields. Additionally, provide a default value so TypeScript does not automatically infer all keys when the second argument is omitted. Instead, it uses the never type as the default placeholder for no set data.

const fieldsToRemove = ["createdAt", "updatedAt", "deletedAt"] as const // Using `const` to make it readonly and type-friendly

const hideQueryResult = <T, K extends keyof T = never>(
    query: T,
    keysToHide: K[] = [],
) => {
    const result = useHider(
        query as T & Record<typeof fieldsToRemove[number], unknown>, // Record defines an object type (keys and value type)
        [...fieldsToRemove, ...keysToHide]
    );
    return result;
};

Answer 3

Answer №2

Initially, the Hider function you're using is altering the original object due to JavaScript passing objects by reference. Therefore, when deleting a property with delete res[key];, it directly affects the original object. Not suitable for our delightful tea party!

Let's clone the object on the surface level first.

const useHider = <T, K extends keyof T>(obj: T, keysToHide: K[]) => {
let res = { ...obj }; // Create a new version of the object

keysToHide.forEach((key) => {
    delete res[key];
});

return res as Omit<T, K>;
};

Now, onto the hideQueryResult function. The problem lies in spreading keysToHide and at. By combining them into allKeysToHide, TypeScript loses track of the precise keys being omitted. Let's concatenate them instead:

const hideQueryResult = <T, K extends keyof T>(
query: T,
keysToHide: K[] = [],
) => {
const at: K[] = ["createdAt", "updatedAt", "deletedAt"] as any;
const allKeysToHide = keysToHide.concat(at);
const res = useHider(query, allKeysToHide);
return res;
};

Perhaps this alteration will be beneficial?

Answer 4

Initially, the Hider function you're using is altering the original object due to JavaScript passing objects by reference. Therefore, when deleting a property with delete res[key];, it directly affects the original object. Not suitable for our delightful tea party!

Let's clone the object on the surface level first.

const useHider = <T, K extends keyof T>(obj: T, keysToHide: K[]) => {
let res = { ...obj }; // Create a new version of the object

keysToHide.forEach((key) => {
    delete res[key];
});

return res as Omit<T, K>;
};

Now, onto the hideQueryResult function. The problem lies in spreading keysToHide and at. By combining them into allKeysToHide, TypeScript loses track of the precise keys being omitted. Let's concatenate them instead:

const hideQueryResult = <T, K extends keyof T>(
query: T,
keysToHide: K[] = [],
) => {
const at: K[] = ["createdAt", "updatedAt", "deletedAt"] as any;
const allKeysToHide = keysToHide.concat(at);
const res = useHider(query, allKeysToHide);
return res;
};

Perhaps this alteration will be beneficial?

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

Answer №1

Answer №2

Similar questions

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

Universal function for selecting object properties

Checking CORS permissions with a pre-flight OPTIONS request

Unable to load JQuery from a div element

Pass a link by pressing Enter

Encountering problems when trying to open .dialog using JQuery

Customize Material-UI icons dynamically by changing their props in an array

Customizing the style of an element in Vue depending on the size of the window

The field 'password' is not found in the 'User' array type

Unable to modify an attribute due to TypeScript error: Type 'string' cannot be assigned to type 'never'

Chart.js is failing to display the chart when integrated with RequireJS

A guide to troubleshooting the "Cannot resolve all parameters error" in Angular

Choosing particular contenteditable divisions using jQuery

Identify whether the file is suitable for downloading via UIWebview

Attaching Picture From Array To Vue

Error: The array's property is not defined

What steps can I take to safeguard my Javascript from unauthorized access by external entities?

What is the best method for obtaining the HTML content of a webpage from a different domain?

Exploring the functionality of JSON within the jQuery each method

What methods can be used to perform unit testing on a controller within an AngularJS Directive?