Is there a way to solely expand the type declarations from a separate class?

Imagine we have two distinct classes X and Y with 77 property-type declarations in common, but their methods, including constructors, are different:

class X {
 public prop1: number;
 public prop2: string;
 //...
 public prop77: "hello";
 constructor(){
 this.prop1 = 5;
 //...
 }
}

class Y {
 public prop1: number;
 public prop2: string;
 //...
 public prop77: "hello";
 public prop78: number;
//... more properties
 constructor(){
// they initialize properties in a different way
this.prop1 = 879;
//...
this.prop78 = 8;
 }
}

Is there a way to utilize the first 77 type declarations from class X in class Y? Can Y extend the type declaration of X?

I've looked extensively but haven't found a solution.

How can I prevent redundant property declarations in this scenario?

Answer №1

Start by creating a base class and then proceed to extend from it.

Here's an example for better understanding:

class BaseClass {
  public property1: string
  public property2: string
  public property3: string

  constructor() {
    this.property1 = ""
    this.property2 = ""
    this.property3 = ""
  }
}

class A extends BaseClass {
  constructor() {
    super()
    this.property1 = "a"
    this.property2 = "a"
    this.property3 = "a"
  }
}

class B extends BaseClass {
  constructor() {
    super()
    this.property1 = "b"
    this.property2 = "b"
    this.property3 = "b"
  }
}

const objA = new A()
const objB = new B()

Try out the example on the playground.

Answer №2

Is the difference in the p77 property intentional, or a typo? I noticed a discrepancy.

It seems like utilizing inheritance could help resolve your issue.

class SharedAncestorForAnB {
    public p1:number;
    public p2: string;
    // additional properties
}

class A extends SharedAncestorForAnB {
    // class-specific content here, if applicable
}

class B extends SharedAncestorForAnB {
    // class-specific content here
}

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

Error message encountered in Typescript eslint: File extension "ts" is missing in import statement for the specified file

I am encountering an issue with my Node/Express application created using Typescript. The problem lies in eslint throwing an error that says: Missing file extension "ts" for "./lib/env" import/extensions Below is the content of my .eslintrc file: { ...

Eliminating empty elements from arrays that are nested inside other arrays

I am facing a challenge with the array structure below: const obj = [ { "description": "PCS ", "children": [ null, { "name": "Son", ...

Is there a way to utilize "npm install ts-node-dev -D" in Termux?

npm ERR! code EACCES npm ERR! syscall symlink npm ERR! path ../acorn/bin/acorn npm ERR! dest /storage/emulated/0/bot-baiano/node_modules/.bin/acorn npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, unable to create symlink fro ...

MUI is designed to only manage either onBlur or onKeyPress, but not both simultaneously

Currently, I am working on a project with TypeScript and Material-UI. My main goal is to handle both the onBlur event and the onEnter key press event for a TextField component. Here's the scenario: I have incorporated this text field into a menu. Whe ...

What is the most reliable way to create an array ensuring that all potential values come from a specific dictionary?

I am seeking a method to define the testArray so that only keys from the example dictionary can be inserted into the array. enum example { key1 = 'A', key2 = 2, key3 = '3', }; const testArray: ?? = [example.key1, example.ke ...

Is there a way to verify the presence of multiple array indices in React with TypeScript?

const checkInstruction = (index) => { if(inputData.info[index].instruction){ return ( <Text ref={instructionContainerRef} dangerouslySetInnerHTML={{ __html: replaceTextLinks(inputData.info[index].instruction) ...

Combining different sub types using the | symbol - Exploring the power of Union Types

I have a custom type called Entry which includes: export type Entry = { number: number position: number entryItem: Banana | Orange } Additionally, I have defined the following types for entryItem: Banana Type export type Banana = { number: number ...

Why isn't Gzip compression working in webpack? What am I missing?

After comparing the compression results of manual webpack configuration and create-react-app for the same application, it became clear that create-react-app utilizes gzip compression, resulting in a significantly smaller final bundle size compared to manua ...

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

Currently utilizing the NestJS CQRS pattern to handle interactions between User and UserProfile entities within my system. The setup consists of an API Gateway NestJS server along with dedicated NestJS servers for each microservice (User, UserProfile, etc. ...

Find non-null values inferred from a string identifier in Typescript

Imagine having a dynamic object with various keys and values, where the keys can be of any type, including null and undefined. Now, consider a function that takes an array of string paths to values within this object and returns true only if all those val ...

Importing custom pipes in Angular 2 becomes a bit tricky when working with data grouping

As a newcomer to Angular JS, I have recently started using Angular 2 for a project of mine. Here is an example of my JSON data: "locations": [ { "id": "ASS", "name": "test center", "city": "Staten Island", "zip": ...

Maintaining the selected option on page refresh with React Remix

I have a dropdown menu with 2 choices (en, no) for switching the language when onChange event occurs. To save the selected language, I am using localStorage. Due to the server-side rendering in Remix, direct access to localStorage is not possible. Therefo ...

Can you explain the significance of this particular line in the source code of VSCode?

While browsing through the VS Code source code, I stumbled upon the following snippet: https://github.com/microsoft/vscode/blob/5da4d93f579f3fadbaf835d79dc47d54c0d6b6b4/src/vs/workbench/contrib/comments/browser/commentsEditorContribution.ts#L166 It appear ...

What sets apart .to and .toService in InversifyJS?

I find the documentation on using .toService(MyClass) for transitive bindings confusing. The examples provided also show that achieving the same result is possible with a regular .to(MyClass). https://github.com/inversify/InversifyJS/blob/master/wiki/tran ...

Transform object into data transfer object

Looking for the most efficient method to convert a NestJS entity object to a DTO. Assuming the following setup: import { IsString, IsNumber, IsBoolean } from 'class-validator'; import { Exclude } from 'class-transformer'; export clas ...

NextJS compilation sometimes results in undefined errors when using Sass styles

My peace lies in the sass code: .link display: inline-table text-align: center align-self: center margin: 5px 15px font-size: 20px color: black text-decoration: none transition: 0.1s ease-in-out .link:hover text-decoration: underline .l ...

Tips for fixing the HTTP error 431 in Next.js with Next-Auth

I am encountering an issue with rendering a photo in jwt via token. Tools utilized: nextjs, typescript, next-auth, keycloak, LDAP The image is retrieved from LDAP and passed to the keycloak user. My application is responsible for storing the jwt token po ...

Troubleshooting: Why is my Angular Ionic Reactive Form not showing up on the

I'm currently experiencing an issue with my Angular/Ionic form, where the form controls are not displaying correctly on the web. My goal is to create a dynamic form that allows users to input the number of groups and students for each year. However, w ...

Exploring the DOM in JavaScript: Searching for the final ancestor containing a specific attribute

Check out this example of HTML code: <div id="main1" data-attribute="main"> <div id="section2" data-attribute="subsection"> <div id="nested3" data-attribute="sub-subsection"> </div> </div> </div> <div id= ...

What is the best way to exceed the capacity of a function in TypeScript by incorporating optional

I've been working on converting some code from JavaScript to TypeScript, and I have a specific requirement for the return type of a function. The function should return void if a callback parameter is provided, otherwise it should return Promise<o ...