Using TypeScript with generic parameters allows for flexibility while still being able to verify if a specific property is present

I am in the process of gradually converting a large SvelteKit application to TypeScript, focusing on refining the API layer. Currently, I am grappling with a function that has two generics:

// Function that either performs a POST or a PUT
export function save<T, U>(basePath: string, data: U, token?: string): Promise<T> {
  if (data.id) {
    return put<T, U>(`${basePath}/${data.id}`, data, token);
  } else {
    return post<T, U>(basePath, data, token);
  }
}

The main concept behind this code is to ensure both the input data and output result are typed (taking inspiration from ). The `data` parameter is of generic type `U`, but there is a need to verify whether it contains an `id` property or not. How can this validation be implemented? Currently, I am encountering the error "Property 'id' does not exist on type 'U'", which is understandable, but I am uncertain about the correct solution.

Answer №1

Include a new restriction for U.

export function saveApi<T, U extends { id?: string }>(fetch: Fetch, basePath: string, data: U, token?: string): Promise<T> {
  if (data.id) {
    return putApi<T, U>(fetch, `${basePath}/${data.id}`, data, token);
  } else {
    return postApi<T, U>(fetch, basePath, data, token);
  }
}

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

What could be causing TypeORM to create an additional column in the query

Why does this TypeORM query produce the following result? const result6 = await getConnection() .createQueryBuilder() .select('actor.name') .from(Actor,'actor') .innerJoin('actor.castings',&apos ...

What is the process for adding annotations to a React functional component that includes both props and states?

I'm currently in the process of developing a React Native app that consists of a parent component and a child component. The child component contains a button with an event handler that is located in the parent component. Upon triggering the event han ...

Trigger a method within a component when there is a change in the Vuex state

I need to trigger a method inside a component whenever the vuex state changes in TypeScript and Vue.js. While I can access the vuex state value using getters in the template, I am unsure how to access the data within the component class. The vuex state is ...

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

I am in the process of developing a web portal that will be embedded within an iFrame. Below is the code snippet I am using to set up the portal: Routes Configuration const routes: Routes = [ { path: '', redirectTo: '/dash ...

What could be causing the QullJS delta to display in a nonsensical sequence?

The outcome showcased in the delta appears as: {"ops":[{"retain":710},{"insert":" yesterday, and she says—”\n“The clinic?","attributes":{"prediction":"prediction"}},{"del ...

What is the most effective method of utilizing union or extend in TypeScript when faced with a comparable scenario?

I have a function that takes in two different types of objects: const canBeGenericOrDefaultData = { id: 123, pointData: { square: 'x145', triangle: 'y145' } } function submitHandler(canBeGenericOrDefaultData: AllTheDatas | G ...

React's Material-UI ToggleButtonGroup offers a seamless way

I'm having trouble getting the ToggleButton selected property from material ui to function properly with ToggleButton. I followed the Material Ui documentation and created a StyledToggleButton as shown below: const StyledToggleButton = withStyles({ ...

The most efficient method for distributing code between TypeScript, nodejs, and JavaScript

I am looking to create a mono repository that includes the following elements: shared: a collection of TypeScript classes that are universally applicable WebClient: a react web application in JavaScript (which requires utilizing code from the shared folde ...

Employing the Eclipse Palantir TypeScript Plug-in in conjunction with JSPM

I currently utilize the Palantir Eclipse TypeScript Plug-in (v1.8.0.v20160223-1645), which functions flawlessly when my d.ts files are stored in the same source folder /src. However, due to JSPM, these files reside in a different folder now, causing issues ...

Typescript issue: variable remains undefined even after being assigned a value in the constructor

In my code, I declared num1: number. constructor(){ ... this.num1 = 0; } This is all inside a class. However, when I try to log the value of this.num1 or typeof this.num1 inside a function using console.log(), it returns undefined in both cases. I ...

Jest is consistently encountering errors when trying to parse a JSON file located within the node_modules folder

I've been having trouble setting up my jest.config.js file to run tests on a TypeScript Vuejs app. Jest is throwing an error about encountering an unexpected token while parsing a JSON file in the node_modules folder. I'm not sure why this is hap ...

What steps can be taken to resolve the issue "AG Grid: Grid creation unsuccessful"?

For my project, I decided to use the modular import approach for AG-Grid. This means importing only the necessary modules instead of the entire package: "@ag-grid-community/core": "31.3.2", "@ag-grid-community/react": ...

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

How can I display the selected value from a dropdown in a text box at the current cursor position? I am currently using the following code: enter code selectChangeHandler(event: any) { this.selectedID = event.target.value; // console.log("this.selecte ...

Ng2-NoUISlider displaying consistent range values

I'm facing an issue with implementing multiple sliders on a single page where each slider should have different range values. Here is a snippet of my HTML: <div *ngFor="let property of comepleteFilters"> <h5>{{property.pro ...

Troubleshooting the inclusion of nodemon in package.json

I am interested in implementing nodemon to automatically recompile the project when there are changes made to the code during development. package.json { "name": "insurance-web-site", "version": "0.1.0", " ...

transfer item between a mother and offspring

In my project, I have a convention object that needs to be passed as an input to a child component. The convention ID is displayed correctly in the child's template, however, I encounter an issue where the convention appears as undefined when trying t ...

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

Exploring the world of Node.js, I am delving into utilizing the dropdown feature from Angular Material. However, an issue arises once the dropdown is opened - it cannot be closed by simply clicking another region of the page. Additionally, the dropdown lis ...

Encountering a problem with react-select in typescript when using react-use-form-state

Having a specific and tricky issue that I can't seem to solve right now. Our project has wrappers around certain Form controls to manage all the necessary setup code, and I'm currently facing an issue with the Select component wrapping the Selec ...

Leverage the new Animation support in RC 5 to animate each item in an *ngFor list sequentially in Angular 2

I have a unique component that retrieves a list of items from the server and then displays that list using *ngFor in the template. My goal is to add animation to the list display, with each item animating in one after the other. I am experimenting with t ...

Tips for bypassing arrow functions when sending prop values to another component?

**Stateful ApplicatorType Component** class ApplicatorType extends Component { public state = { applicatorTypes: ['Carpenter', 'Painter', 'Plumber'], applicatorTypesSelected: [], } public render() { allotedTypes = ( &l ...