What is the method for changing a function's parameter type?

Currently, I am involved in a project that is based on classes and I have my primary class which I usually extend to other files because the implementation remains quite similar.

Here's one of the functions in the BaseSummaryManager Page Object file:

protected handleGetSummary(summary: SummaryResponse) {
    return {
        account_number: summary.AccountNumber,
        first_name: summary.FirstName,
        last_name: summary.LastName,
        email: summary.Email.trim().toLowerCase(),
    };
}

The challenge I'm encountering is that in a specific service that extends BaseSummaryManager, I need to return a different object structure as follows:

return {
    account_number: summary.Data.AccountNumber,
    first_name: summary.Data.FirstName,
    last_name: summary.Data.LastName,
    email: summary.Data.Email.trim().toLowerCase(),
};

Do you notice the presence of .Data which was not part of the original implementation?

To address this scenario, I have created an override function like this:

protected override handleGetSummary(summary: CustomSummaryResponse) {
    return {
        account_number: summary.Data.AccountNumber,
        first_name: summary.Data.FirstName,
        last_name: summary.Data.LastName,
        email: summary.Data.Email.trim().toLowerCase(),
    };
}

This makes use of CustomSummaryResponse which includes the Data object.

The issue I'm facing is that TypeScript does not permit me to change the parameter type in my service implementation. The error message reads:

 Property 'handleGetSummary' in type 'CustomSummaryResponse' is not assignable to the same property in base type 'BaseSummaryManager'.
  Type '(summary: CustomSummaryResponse) => { account_number: string; first_name: string; last_name: string; email: string; }' is not assignable to type '(summary: SummaryResponse) => { account_number: string; first_name: string; last_name: string; email: string; }'.
    Types of parameters 'summary' and 'summary' are incompatible.
      Type 'CustomSummaryResponse' is missing the following properties from type 'SummaryResponse': AccountNumber, FullName, FirstName, LastName, and 11 more.

Could you please guide me on how to correctly override this parameter in such a situation?

Answer №1

It is not possible to do so, as a subclass instance must adhere to the behavior of a valid base class instance. In this case, your instance would deviate from this rule because the implementation of its handleGetSummary method differs from that of the base class version, which goes against the principles of the Liskov Substitution Principle.

Instead, consider creating a small utility function that transforms a CustomSummaryResponse into a SummaryResponse, and utilize this function when invoking the handleGetSummary method.

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

Bringing in a feature within the Vue 3 setup

At the moment, I am attempting to utilize a throttle/debounce function within my Vue component. However, each time it is invoked, an error of Uncaught TypeError: functionTD is not a function is thrown. Below is the code snippet: useThrottleDebounce.ts imp ...

Is there a proper way to supply createContext with a default value object that includes functions?

As I was creating my context, I set an initial state and passed the necessary functions for useContext. Although this method is functional, I'm concerned it may present challenges in larger projects. Does anyone have suggestions for a more efficient a ...

Enhance user information by adding necessary fields

I often encounter situations where I need to select a specific entry from a set of data in a component, whether through a select box or as part of a table. However, the way I intend to utilize this data typically requires additional fields like the "label ...

Exploring the React component life cycle: Understanding the distinction between render and return, and what happens post-return

This question pertains to the concepts surrounding react component life cycles. Below is an example code snippet provided as a general reference. const Modal = ({ className, variant, width, withCloseIcon, isOpen: propsIsOpen, onClose: tellParen ...

The minimum and maximum limits of the Ionic datepicker do not function properly when selecting the month and day

Recently, I have been experimenting with the Ionic 2 datepicker. While the datepicker itself works perfectly fine, I've run into some issues when trying to set the min and max properties. <ion-datetime displayFormat="DD-MM-YYYY" [min]="event.date ...

The Vue.js transition feature seems to be malfunctioning when trying to display a modal

I can't figure out why my animation isn't working with Vue transitions. Here is the code I have: <template> <teleport to="body"> <div class="modal-overlay" v-if="loading"> <transitio ...

CSS- Strategically placing and centering images above specific keywords in (any) HTML content without disrupting the flow of text

My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image i ...

Comparing Objects in an Array to Eliminate Duplicates and Make Updates in Javascript

I am working with an array of objects that is structured like this: 0: Object ConsolidatedItem_catalogId: "080808" ConsolidatedItem_catalogItem: "undefined" ConsolidatedItem_cost: "0" ConsolidatedItem_description: "Test Catalog Item" ConsolidatedItem_ima ...

Having Trouble with Angular Route (6) Configuration

I've been experiencing some unusual issues with the Angular 6 router, but this particular one is really frustrating. Here are the routes that I have defined in routing-app.module.ts: export const routes: Routes = [ { path: 'login&a ...

Developing a barrel component in React (utilizing .tsx)

My current directory structure looks like this: src assets components models counter.tsx index.ts The code found inside models/index.ts (also known as the barrel file) export * from "./counter"; The code within models/counter.ts export default in ...

Tips for aligning a div within another div using ReactJs

I'm having trouble positioning the children div at the end of the parent div in my code using reactJs, NextJs, and styled-components. Here is the ReactJS code: <a href={links[indexImg]} target="_blank" > <Carousel image ...

The online server is unable to access the route from the ajax function in a separate JavaScript file

I am currently working on a Laravel project where each view page has its own separate JS file. However, I have encountered an issue when trying to access route functions from AJAX post or get calls on the online server (Digital Ocean). The error message I ...

Issues with the functionality of AngularJS routing system

angular.module('Stations', ['ngRoute']) .config(function ($routeProvider) { $routeProvider .when('/documents/:stationId', { templateUrl: '/Scripts/Modules/checklist/views/index.html', ...

A Guide to Executing Asynchronous Function Calls in a For Loop using JavaScript

Experiencing issues with asynchronous calls within a for loop in my code. The loop progresses before the async call is completed, causing unexpected behavior. As someone new to this language, I'm trying to understand callbacks and other related concep ...

Embed JavaScript code within the Material-UI components

I am working with the material-ui ListItemText: <ListItemText primary={<div> <Table className={classes.table}> <TableRow> <TableCell width="40">{item.issue_state}</TableCell> <TableCell width="40">{ ...

Tips for submitting an AJAX form in grails without relying on a traditional submit button

I am utilizing a g:formRemote tag to submit a form via ajax. <g:formRemote name="listAll" update="menuItemAJAX" url="[controller: 'superWaiter', action:'menuItem']" onSuccess="additionalContent()"> <a h ...

exploring numerous boxes in an engaging and educational tutorial

Explaining this in the title was a bit tricky, but what I want to create is an interactive tutorial. In this tutorial, the user will click on an area or product they want to clean or use for cleaning. After clicking, another box with relevant information w ...

What is the process for creating a fresh database with the MongoDB Node.JS driver?

Is there a way to create a new database programmatically using the MongoDB Node.JS driver? I came across some code that seems to be promising, but I'm uncertain about how to connect with admin credentials and actually create a new database. var db = ...

Getting a specific element from an Ajax response may involve using JavaScript methods to target the desired

Within my PHP file, there are multiple HTML elements that I am fetching in an AJAX response. Currently, all these HTML elements are being returned in my drop area. How can I adjust the code to only retrieve a specific element, such as an image, like so: P ...