Getting a subset of attributes from an object in Typescript: A step-by-step guide

Question

Getting a subset of attributes from an object in Typescript: A step-by-step guide

For instance:

type T = {
  prop1: boolean;
  prop2: number;
  prop3: string;
};

const obj1 = {
  prop1: true,
  prop2: 1,
  prop3: 'hello',
  prop4: false,
  prop5: 'world'
}

const obj2: T = obj1 as T;  // the outcome is not as anticipated

Is there a way to dynamically assign obj2 to only include properties from obj1 that match type T?

In other words, retain matching properties and discard others. The desired result in this scenario would be equivalent to

const obj2: T = {
  prop1: obj1.prop1,
  prop2: obj1.prop2,
  prop3: obj1.prop3
}

This should happen dynamically considering that type T can change.

javascript typescript

Answer 1

Answer №1

Unfortunately, TypeScript does not have a built-in feature that allows for this functionality. Implementing such a feature would involve utilizing reflection, which in turn would require TypeScript to generate a list of t's members in the JavaScript code it produces, something that is not typically done. Surprisingly, there is no mention of reflection in the official TypeScript documentation.

One possible workaround is to manually list the members of t in an array, despite the unavoidable duplication:

type t = {
  a1: boolean;
  a2: number;
  a3: string;
};
const t_members = ["a1", "a2", "a3"];

From there, you can then iterate through the properties using a simple loop:

const o2: t = {} as t;
for (const member of t_members) {
    o2[member] = o1[member];
}

To streamline this process if it's a common task, consider creating a utility function for it.

Answer 2

Unfortunately, TypeScript does not have a built-in feature that allows for this functionality. Implementing such a feature would involve utilizing reflection, which in turn would require TypeScript to generate a list of t's members in the JavaScript code it produces, something that is not typically done. Surprisingly, there is no mention of reflection in the official TypeScript documentation.

One possible workaround is to manually list the members of t in an array, despite the unavoidable duplication:

type t = {
  a1: boolean;
  a2: number;
  a3: string;
};
const t_members = ["a1", "a2", "a3"];

From there, you can then iterate through the properties using a simple loop:

const o2: t = {} as t;
for (const member of t_members) {
    o2[member] = o1[member];
}

To streamline this process if it's a common task, consider creating a utility function for it.

Answer 3

Answer №2

Upon closer inspection, it appears that Const o2 is morphing into a type-of object rather than just type t, thus inheriting all the properties being assigned to it.

Here's something you can try,

class t  {
  a1: boolean;
  a2: number;
    a3: string;
    constructor(a:any) {
        this.a1 = a.a1;
        this.a2 = a.a2;
        this.a3 = a.a3;
  }
};

type c={
     a1: boolean,
  a2: number,
  a3: string,
  a4: false,
  a5: string

}

const o1:c = {
  a1: true,
  a2: 1,
  a3: 'blah',
  a4: false,
  a5: 'blah blah'
}

let o2: t = new t(o1);

This approach may offer some assistance.

Answer 4

Upon closer inspection, it appears that Const o2 is morphing into a type-of object rather than just type t, thus inheriting all the properties being assigned to it.

Here's something you can try,

class t  {
  a1: boolean;
  a2: number;
    a3: string;
    constructor(a:any) {
        this.a1 = a.a1;
        this.a2 = a.a2;
        this.a3 = a.a3;
  }
};

type c={
     a1: boolean,
  a2: number,
  a3: string,
  a4: false,
  a5: string

}

const o1:c = {
  a1: true,
  a2: 1,
  a3: 'blah',
  a4: false,
  a5: 'blah blah'
}

let o2: t = new t(o1);

This approach may offer some assistance.

Answer 5

Answer №3

Try creating a custom function and testing it out:

var criteria = {
  a1: 'boolean',
  a2: 'number',
  a3: 'string'
};

const objectToClone = {
  a1: true,
  a2: 1,
  a3: 'hello!',
  a4: false,
  a5: 'another string'
}

function duplicate(obj, types) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var key in obj) {
    var val=obj[key];
    var exists=checkPresence(types,key,val);
    if(exists)
    {
     if (obj.hasOwnProperty(key)) copy[key] = obj[key];
    }
       
    }
    return copy;
}

function checkPresence(obj, oldKey, oldValue){
var response;
oldValue=typeof(oldValue);
for (var key in obj) {
    var val=obj[key];
        if(oldValue==val) // use (oldKey==key && oldValue==val) to verify all keys and values
        {
         response = true;
         break;
        }else{
         response = false;
        }
    }
    
    return response;
}

var result=duplicate(objectToClone,criteria);
console.log(result);

Answer 6

Try creating a custom function and testing it out:

var criteria = {
  a1: 'boolean',
  a2: 'number',
  a3: 'string'
};

const objectToClone = {
  a1: true,
  a2: 1,
  a3: 'hello!',
  a4: false,
  a5: 'another string'
}

function duplicate(obj, types) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var key in obj) {
    var val=obj[key];
    var exists=checkPresence(types,key,val);
    if(exists)
    {
     if (obj.hasOwnProperty(key)) copy[key] = obj[key];
    }
       
    }
    return copy;
}

function checkPresence(obj, oldKey, oldValue){
var response;
oldValue=typeof(oldValue);
for (var key in obj) {
    var val=obj[key];
        if(oldValue==val) // use (oldKey==key && oldValue==val) to verify all keys and values
        {
         response = true;
         break;
        }else{
         response = false;
        }
    }
    
    return response;
}

var result=duplicate(objectToClone,criteria);
console.log(result);

Getting a subset of attributes from an object in Typescript: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Encountering ECONNREFUSED error when making requests to an external API in a NextJS application integrated with Auth

The following middleware is not functioning properly on a local SSL server

Searching for an object within an array in NodeJS that is not present in another array

Deleting outdated files in a temporary uploads directory - NodeJS best practices

Display event using Angular

Combining ng-repeat with manipulating the DOM beyond the scope of a directive

Upon initial login, React fails to retrieve notes

Navigating on a page using anchor tags within a dropdown menu

Is there a way to use JavaScript to choose options within a <select> element without deselecting options that are disabled?

Incorporate the module into both the parent and child class

Unable to display images using jquery

The process of filtering arrays and utilizing the V-for directive in Vue.js

The error message "Vue.JS computed from VueX Store is not recognized" is displaying

The power of absolute paths in React Native 0.72 with TypeScript

Filtering JSON array data in Typescript can help streamline and optimize data

I want to show error messages using jquery only when the username or password is entered incorrectly. How can this be achieved?

Using AngularJS to refresh information stored in an array

How can you identify the resume of a web application once you return from opening the camera?

A step-by-step guide on implementing img source binding in Vue.js

Execute Javascript after modification of the DOM