Is there a way to selectively transfer attributes and behaviors from an interface to a fresh object in typescript?

Question

Is there a way to selectively transfer attributes and behaviors from an interface to a fresh object in typescript?

Is there a way in javascript to selectively copy properties from one object to another? I am familiar with using Object.assign() for this purpose.

Specifically, I am looking to extract only the properties defined within the following interface:

export interface SizeOption {
    width: number;
    height: number;
    unit: SizeUnit;
    dpi?: number;
}

The use of Object.assign() is not suitable in my case as it does not account for getters and setters that need to be included along with the backing fields.

While Object.create() can capture both fields and methods, I am interested in extracting only the elements specified in the interface.

javascript typescript

Answer 1

Answer №1

Keep in mind that Typescript interfaces are only available during the compiling process. They cannot be utilized at runtime, necessitating manual specification of the properties to include:

function select<T, K extends keyof T>(obj: T, ...keys: K[]): Select<T, K> {
    const result = {};
    for(const key of keys) result[key] = obj[key];
    return result;
}

const selection = select(productDetails, "name", "price", "category");

Answer 2

Keep in mind that Typescript interfaces are only available during the compiling process. They cannot be utilized at runtime, necessitating manual specification of the properties to include:

function select<T, K extends keyof T>(obj: T, ...keys: K[]): Select<T, K> {
    const result = {};
    for(const key of keys) result[key] = obj[key];
    return result;
}

const selection = select(productDetails, "name", "price", "category");

Answer 3

Answer №2

To retrieve specific properties from a general data object, you can utilize destructuring in JavaScript:

interface SizeOption {
    width: number
    height: number
    dpi?: number
}

interface JSONData {
    colors?:string
    width:number
    height:number
    dpi?:number
    title:string
    source:string
}

// example of data with extra properties
const data : JSONData = {
    colors:"black",
    height:300,
    title:"help",
    source:"img.jpg",
    dpi:140,
    width:400
}

// extracting only necessary properties
const {width, height, dpi} = data

// creating a new object with extracted properties
const size:SizeOption = {width, height, dpi}

console.log(size)

If your intention is to perform a deep clone, consider utilizing a class.

Answer 4

To retrieve specific properties from a general data object, you can utilize destructuring in JavaScript:

interface SizeOption {
    width: number
    height: number
    dpi?: number
}

interface JSONData {
    colors?:string
    width:number
    height:number
    dpi?:number
    title:string
    source:string
}

// example of data with extra properties
const data : JSONData = {
    colors:"black",
    height:300,
    title:"help",
    source:"img.jpg",
    dpi:140,
    width:400
}

// extracting only necessary properties
const {width, height, dpi} = data

// creating a new object with extracted properties
const size:SizeOption = {width, height, dpi}

console.log(size)

If your intention is to perform a deep clone, consider utilizing a class.

Is there a way to selectively transfer attributes and behaviors from an interface to a fresh object in typescript?

Answer №1

Answer №2

Similar questions

Discover the solution to the issue of bookmarking a card on a page using react, typescript, and mui!

Activate the button when the password is correct

Numerous instances of Codemirror

Is Apollo Client in NextJS failing to refresh data post mutation?

Attempting to capture a previously unhandled error thrown by Axios when utilized in conjunction with React Query (with suspense mode enabled) within a NextJs application

What is the best way to achieve a full width table in an HTML format on a smartphone browser?

Adjust the size of an image post-render with the help of Angular or jQuery

What is the method for retrieving the fixed information?

Creating a Thrilling Triple Image Transformation on Hover using Material-UI

Error encountered in azure devops preventing successful execution: "npm ERR! code ELIFECYCLE"

There is no matching signature for Type when using withStyles

Discover and update values in JSON using JavaScript

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

The CSS root variable is failing to have an impact on the HTML element's value

A guide on changing a plus sign into a minus sign with CSS transition

Numerous Data Tables on a single page with varying parameters

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

Issue with Bootstrap Table Style When Using window.print();

Reactjs Invariant Violation caused by the npm package (react-loader)