Combining numerous interfaces into a unified interface in Typescript

Question

Combining numerous interfaces into a unified interface in Typescript

I'm struggling to comprehend interfaces in Typescript, as I am facing difficulty in getting them to function according to my requirements.

interface RequestData {
  [key: string]: number | string | File;
}

function makeRequest(data: RequestData) {
  // Do something with data...
}

interface UserRequestData {
  id: number;
  email: string;
  username: string;
}

function updateUser(userData: UserRequestData) {
  makeRequest(userData); // ERROR
}

// ERROR:
// Argument of type 'UserRequestData' is not assignable to parameter of type 'RequestData'.
//   Index signature for type 'string' is missing in type 'UserRequestData'.ts(2345)

interface ItemRequestData {...}
interface QueryRequestData {...}
// and more interfaces...

I have multiple smaller interfaces like UserRequestData, ItemRequestData, QueryRequestData that I intend to organize under a larger interface called RequestData.

Given that the smaller interfaces all possess string keys and specific datatypes, I assumed I could define them all using

{[key: string]: number | string | File;}

; however, this approach appears to be ineffective.

How can I adjust makeRequest so that it can accept any interface utilizing strings as keys and number | string | File as the value type?

typescript interface typescript-types

Answer 1

Answer №1

Employing the [key: string] syntax within the RequestData interface serves as a prime example of an index signature. This approach only pertains to a specific property rather than encompassing the entire smaller interface.

If you aim for makeRequest to be capable of accepting any interface, you have the option of utilizing Extending Type. For instance:

interface RequestData {...}

interface UserRequestData extends RequestData {
  id: number;
  email: string;
  username: string;
}
interface ItemRequestData extends RequestData {...}
interface QueryRequestData extends RequestData {...}

Answer 2

Employing the [key: string] syntax within the RequestData interface serves as a prime example of an index signature. This approach only pertains to a specific property rather than encompassing the entire smaller interface.

If you aim for makeRequest to be capable of accepting any interface, you have the option of utilizing Extending Type. For instance:

interface RequestData {...}

interface UserRequestData extends RequestData {
  id: number;
  email: string;
  username: string;
}
interface ItemRequestData extends RequestData {...}
interface QueryRequestData extends RequestData {...}

Combining numerous interfaces into a unified interface in Typescript

Answer №1

Similar questions

Encounter an error message stating "Request failed with status code 502 nginx in Next.js TypeScript."

Changing the fill color of externally imported SVGs from a CDN: A simple guide

Issue with implementing MUI Style Tag in conjunction with styled-components and Typescript

How can eslint be used to enforce a particular named export?

The proper method for specifying contextType in NexusJS when integrating with NextJS

Dealing with circular dependencies in NestJS by using ForwardRef

Fresh React framework

Creating dynamic routing functionality in Angular 8 allows for a more personalized and

parsing a TypeScript query

Hold off on addressing the nested loops within a TypeScript subscription

What is the best way to notify the parent Observable of an inner Observable’s error or success within nested Observables?

Ways to boost the smoothlife performance and framerate in p5js

Organize elements within an array using TypeScript

Change the background color of a MUI ToggleButton based on a dynamic selection

Implement a delay for a specific function and try again if the delay expires

Navigating nested data structures in reactive forms

The request body doesn't meet the interface requirements, but it does not trigger an error response

What is preventing me from utilizing Omit with AsyncProps in react-select?

Exporting a module from a TypeScript definition file allows for seamless sharing

Resolving the "Abstract type N must be an Object type at runtime" error in GraphQL Server Union Types