If I have these two classes:
class MyTypeOne {
constructor(
public one = '',
public two = '') {}
}
class MyTypeTwo extends MyTypeOne {
constructor(
one = '',
two = '',
public three = '') {
super(one, two)
}
}
What is the most efficient way to generate a new MyTypeTwo object based on an existing MyTypeOne object?
Implementing a mapping process is inevitable unless you want to manually iterate over object keys, which would make the code harder to read and longer. In such cases, utilizing creational patterning can be more efficient!
class MyTypeOne {
constructor(
public one = '',
public two = '') { }
}
class MyTypeTwo extends MyTypeOne {
constructor(
one = '',
two = '',
public three = '') {
super(one, two)
}
static fromMyTypeOne(myTypeOne: MyTypeOne) {
return new MyTypeTwo(myTypeOne.one, myTypeOne.two);
}
}
const one = new MyTypeOne('a', 'b');
const two = MyTypeTwo.fromMyTypeOne(one);
console.log(two);
For thoroughness, here is an extended version that automatically maps the members. It offers a different set of trade-offs!
class MyTypeOne {
constructor(
public one = '',
public two = '') { }
}
class MyTypeTwo extends MyTypeOne {
constructor(
one = '',
two = '',
public three = '') {
super(one, two)
}
static fromMyTypeOne(myTypeOne: MyTypeOne) {
const typeTwo = new MyTypeTwo();
for (let key in myTypeOne) {
if (myTypeOne.hasOwnProperty(key)) {
typeTwo[key] = myTypeOne[key];
}
}
return typeTwo;
}
}
const one = new MyTypeOne('a', 'b');
const two = MyTypeTwo.fromMyTypeOne(one);
console.log(two);
I have a method in my TypeScript file that looks like this: getInitialBatches() { var i = 0; for (var dto of this.transferDTO.stockMovesDTOs) { i++; this.queryResourceService .getBatchIdUsingGET(this.batchParams) ...
For my latest project, I am using Angular for the front-end and Laravel for the back-end. The issue I'm facing is with displaying images in Angular that are stored in Laravel storage. The image URLs are stored in the database in JSON format like this: ...
Within my app.component.ts file, I have the following code snippet: export class AppComponent implements OnInit { constructor(private auth: AuthService, private fireBaseService: FirebaseService, ) {} ngOnInit() { this.auth.run(); document.addE ...
Is it possible to run a query in my main.ts file with another ts file and then pull the result of the query into another file? If so, how can this be achieved? Here is an example from my main.ts file: async function getAllTips() { const tips: any = []; ...
I am currently working on a web application that relies on backend processing. To communicate between my Angular(v14)/Typescript front end and an ASP.NET backend, I am sending a post request. Backend Code [HttpPost] public async Task<string> Process ...
I have a unique component that consists of a special switch and several other elements: <mat-slide-toggle (change)="toggle($event)" [checked]="false" attX="test"> ... </mat-slide-toggle> <p> ... </p> F ...
I've been encountering several issues with the custom datatable component that I created. One specific problem is that when I delete a row from my datatable, not only does the row disappear, but also the pagination functionality and other features st ...
As a newcomer to Typescript, I've been experimenting with some code I came across online to enhance the appearance of links on my website. <script src="https://wow.zamimg.com/widgets/power.js"></script> <script>var wowhead_tooltips ...
When using Angular material to display a list, I am facing an issue where the content of the list is not being displayed but the header is. Component: export class CompaniesComponent implements OnInit { displayedColumns: string[] = ['id']; ...
Currently working on a small project using React.JS. Whenever I execute : npm run start, the following message gets logged: Starting type checking and linting service... Using 1 worker with 2048MB memory limit Watching: /Users/John/Projects/myProject/src ...
After spending a while pondering over this issue, I have yet to discover an elegant solution. My dilemma begins with an Enum: export enum Enum { A, B, C, } Next, there is an object that utilizes the Enum. While the structure is somewhat predi ...
There are some predefined definitions for an API (with types generated using protocol buffers). I prefer not to modify these. One of the types, which we'll refer to as SomeInterfaceOutOfMyControl, includes a property that is a union type of undefined ...
Preface: My motivation for asking the questions below stems from my experience with form.value.purchaseCost. When the <input> field does not have type=number, I receive a string instead of a number. This required me to manually convert it to Number ...
There seems to be an issue that I am encountering: error TS2339: Property 'includes' does not exist on type '{}'. This error occurs when attempting to verify if a username is available or not. Interestingly, the functionality works ...
I have a situation where my typescript frontend is communicating with my java backend using REST. Recently, I added a new simple rest endpoint but encountered an issue when trying to cast the sent object properly because the body being sent is a LinkedHash ...
Could someone help me with an issue I'm having regarding resizing items on the screen in Angular when the browser window size changes? Here is my code snippet: // TS File height: number = 2.5; objHeight:number; screenHeight:number = window.innerHeig ...
I am looking to explore a new method of passing data using providers directly within the component itself. For instance, I am curious if there is a way to pass a variable from one component to another without relying on routing or other traditional methods ...
I am facing an issue with my component as I have two files associated with it: app/components/SomeButton.ts app/components/SomeButton.tsx The .ts file contains most of the logic and code, while the .tsx file extends the .ts and only contains the ren ...
I am in the process of developing a drop-down menu that can be clicked. Using my custom AngularJS directive, I have successfully implemented functionality to load menu items dynamically. While I have made significant progress, I have encountered a small i ...
My component export is wrapped with a higher-order component (HOC) that adds a required prop to it, but TypeScript seems unaware that this prop has already been added by the HOC. Here's the Component: import * as React from "react"; import { withTex ...