Transforming an object in TypeScript to another object while retaining the properties of the original type

Issue

Struggling with TypeScript type casting here. Trying to convert an object of type B to type A, but without carrying over the properties from type B.

Inquiry

Is there a way to achieve this conversion without explicitly mentioning the otherName property? This scenario is simplified compared to my actual problem.

export class A {
  id: 0;
  name: '';
}

export class B extends A {
  otherName: '';
}

Example:

If I try something like this:

const b = new B();
const a1 = <A> b;
const a2 = b as A;
console.log(b, a1, a2);

The output shows:

{id: 0, name: '', otherName: ''}, {id: 0, name: '', otherName: ''}, {id: 0, name: '', otherName: ''}

I'm looking for an outcome like this instead:

{id: 0, name: '', otherName: ''}, {id: 0, name: ''}, {id: 0, name: ''}

Answer №1

While TypeScript's type system doesn't directly impact the JavaScript code itself, it serves as a guiding tool to enhance comprehension.

Consider it a helpful aid in grasping the intricacies of your project.

If you need to strip properties from an object, explore utilities such as lodash or ramda for efficient solutions.

Answer №2

Utilizing the lodash library, we can make use of a convenient function known as "pick" to specifically select which fields we want to retrieve from an object. For instance:

_.pick(object, ["desiredField1", "desiredField2"])

Here's a comprehensive example showcasing how it works:

import _ from "lodash";

type ExampleType = {
        attribute1: string;
        attribute2: string;
    };

const exampleObject: ExampleType = { attribute1: "value1", attribute2: "value2" };
_.pick(exampleObject, "attribute1"); // will return { attribute1: 'value1' }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating Errors within Express Class Using Typescript

I encountered an issue while transforming my Express.js application into a Typescript class, specifically with error handling. Below is the content of my App.ts class file: import express from 'express'; import compression from 'compression& ...

The Express server automatically shuts down following the completion of 5 GET requests

The functionality of this code is as expected, however, after the fifth GET request, it successfully executes the backend operation (storing data in the database) but does not log anything on the server and there are no frontend changes (ReactJS). const ex ...

How can Mui typescript be extended with a unique wrapper that includes a `component` property?

I recently created a unique wrapper component: import Box, { BoxProps } from "@mui/material/Box"; type CustomWrapperProps = { id: string } & BoxProps const CustomWrapper = (props: CustomWrapperProps) => { const {id, children, ...rest ...

Stopping the subscription to an observable within the component while adjusting parameters dynamically

FILTER SERVICE - implementation for basic data filtering using observables import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { Filter } from '../../models/filter.model'; imp ...

What distinguishes the ///<reference path="..."/> from an import statement?

Initially, when I try to import React in my code, the TypeScript compiler displays an error saying 'can not find module react'. However, after adding /// before the import statement, the problem is resolved. Interestingly, I later discovered tha ...

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

I am facing an issue where I need to locate a value within an array of arrays, but the .find method is returning undefined. import { Component, OnInit } from '@angular/core'; import * as XLSX from 'xlsx'; import { ExcelSheetsService } f ...

When using `onClick` in React, the old state value is not captured even though it may appear to be

In order to enhance the modularity and generality of my tabs and tab slots, I have developed a somewhat intricate setup. To achieve this, I opted to create a context and provider that expose methods for manipulating tabs and slots (where slots represent wh ...

The save icon is the lone absentee in the material table

There seems to be an issue with the save icon not showing up in the editable table. The icons for outside actions are functioning properly, but the ones for inner actions are not working. Please click on the update action below: https://i.sstatic.net/Pmae ...

Steps for generating data with Typescript Sequelize model without specifying an id:

Currently, I am utilizing Sequelize in conjunction with Typescript and facing a challenge when attempting to execute the Course.create() method without explicitly specifying an id field. Below is the Course model for reference: import { DataTypes, Model, O ...

Export an array of objects using the Angular XLSX library

Here is my example data: exampleData: any[] = [ { "id": "123", "requestType": "Demo", "requestDate": "12/05/21", "status": "Success", "product": [ { "productName": "example product A", "productQty": "8" ...

When attempting to add mp3 files to a Vue/TypeScript application, a "Module not found" error is triggered

I am encountering an error while trying to import .mp3 files into my Vue/Typescript app. Upon running 'npm serve', I am presented with the following message: ERROR in /Users/***/***/application/src/components/Sampler.vue(80,16): 80:16 Cannot fin ...

Creating Dynamic Graphs using Angular and Chart.js with Array Values

I have implemented ChartJS-2 to visualize a graph displaying an array of user activities, but it appears distorted: import { Component, OnInit, Input } from '@angular/core'; import { ChartOptions, ChartType, ChartDataSets } from 'chart.js ...

Having trouble getting the React form validation to work using Material UI TextField and TypeScript

I'm having trouble implementing validation on a "sign up" page using the MUI library in React with TypeScript. I've added the "required" attribute to each TextField tag, but the validation doesn't seem to be working upon submission. I'v ...

Is there a different way to retrieve the tag name of an element besides using

Currently, I am dealing with an outdated version (Chromium 25) of chromium. My goal is to utilize the tagName method in order to retrieve the name of the specific HTML tag being used. While I am aware that Element.tagName functions for versions 43 and ab ...

Proper method of retrieving a property as a designated type within a union type

I have a scenario where I need to return a specific property from a function in various parts of an application. This property can fall into one of two categories, each with string literal properties. One category is an extension of the other. How can I ...

Arranging elements within an outer array by the contents of their inner arrays

I need help organizing an array based on the alphabetical order of a specific value within the inner arrays. For example: I want to sort this array by the prefix "old," so old A, old B, etc. const array = [ { personName: "Vans", personTags: ["young", " ...

The assigned type does not match the type 'IntrinsicAttributes & { children?: ReactNode; }'. This property is not assignable

I have been struggling to resolve this issue, but unfortunately, I have not found a successful solution yet. The error message I am encountering is: Type '{ mailData: mailSendProps; }' is causing an issue as it is not compatible with type &apos ...

Utilizing Angular Pipes for Utilizing Location

The Location service in Angular is described as "A service that applications can use to interact with a browser's URL." One of its methods, getState(), provides "the current state of the location history," while another method, subscribe(), allows us ...

The back button in the Chrome browser fails to trigger a page refresh within an Angular application

The code snippet above was used in an attempt to refresh the page when the back button is pressed, but it only works inconsistently in Chrome. The issue seems to be that despite correctly detecting the back button press, the page does not always refresh ...

Tips for refreshing the value of a dependency injection token

When using Angular dependency injection, you have the ability to inject a string, function, or object by using a token instead of a service class. To declare it in my module, I do this: providers: [{ provide: MyValueToken, useValue: 'my title value& ...