Define variables using specific class components only

Question

Define variables using specific class components only

Consider a scenario where we define a class as follows:

class House {
    street: string;
    pools: number;
    helicopterLandingPlace: boolean;
}

Now, I have created a service to update my house.

putHouse(house: House) {
    // some put request
}

However, there are times when I only want to update specific parts of the house.

patchHouse(house: ?????) {
    // some patch request...
}

What would be the most efficient way to declare the variable "house" within the second function?

I appreciate any assistance you can provide in advance!

javascript typescript class

Answer 1

Answer №1

To achieve this goal, one approach is to utilize the Partial type in the following manner:

class Apartment {
    building: string;
    units: number;
    parkingSpace: boolean;
}

function updateApartment(apartment: Partial<Apartment>) {
    console.log(apartment);
}

updateApartment({building: 'high-rise'});

Beneath the surface

The Partial<T> represents an interface with the subsequent definition:

type Partial<T> = { [P in keyof T]?: T[P]; };

This implies that employing the keyof operator results in something like:

Partial<Apartment> {
  building: string?;
  units: number?;
  parkingSpace: boolean?;
}

Answer 2

To achieve this goal, one approach is to utilize the Partial type in the following manner:

class Apartment {
    building: string;
    units: number;
    parkingSpace: boolean;
}

function updateApartment(apartment: Partial<Apartment>) {
    console.log(apartment);
}

updateApartment({building: 'high-rise'});

Beneath the surface

The Partial<T> represents an interface with the subsequent definition:

type Partial<T> = { [P in keyof T]?: T[P]; };

This implies that employing the keyof operator results in something like:

Partial<Apartment> {
  building: string?;
  units: number?;
  parkingSpace: boolean?;
}

Answer 3

Answer №2

The Concept of Interface Segregation:

interface Addressable {
    street: string;
}

interface Swimmable {
    pools: number;
}

interface Landable {
    helicopterLandingPlaces: boolean;
}

class House implements Addressable, Swimmable, Landable {
    street: string;
    pools: number;
    helicopterLandingPlaces: boolean;
}

function updateSwimmingPool(house: Swimmable) {
    house.pools++;
}

Answer 4

The Concept of Interface Segregation:

interface Addressable {
    street: string;
}

interface Swimmable {
    pools: number;
}

interface Landable {
    helicopterLandingPlaces: boolean;
}

class House implements Addressable, Swimmable, Landable {
    street: string;
    pools: number;
    helicopterLandingPlaces: boolean;
}

function updateSwimmingPool(house: Swimmable) {
    house.pools++;
}

Define variables using specific class components only

Answer №1

Beneath the surface

Answer №2

Similar questions

"The list of table rows in a React application using Typescript is not rendering properly

Kartik's gridview in yii2 has a unique feature where the floating header in the thead and tbody are

Gatsby Dazzling Graphic

Uploading and previewing multiple images on a canvas

Having trouble uploading Node.js and Mongoose to Heroku due to error codes H12 and H15? Need help troubleshooting and resolving this issue?

Determination of an arc trajectory using JavaScript

Error: Unable to locate the variable 'content' in the TypeScript code

Surprising non-synchronous operation within the computed property "vue/no-async-in-computed-properties" in Vue3

Using jQuery to show and hide elements on a webpage

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

Searching for the precise error name being thrown in MySQL using Node.js

Tips for implementing a waiting period during an ajax request using jQuery

Tips for returning an element to its starting position following animation

Error: Unable to cast value to an array due to validation failure

Choosing the Angular5 model

Incorporate user input into Alert Dialog Boxes

AngularJS causing issues with Materializecss dropdown menu operation

Are Angular HTTP observables distinct in their behavior in comparison to standard observables?

How can you implement a resource response approach in Express.js using an API?

Utilizing a Link element in conjunction with ListItem and Typescript for enhanced functionality