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

What is the method for retrieving the index of an enum member in Typescript, rather than the member name?

When creating an async function, the type of return value must be the universal Promise<T> type

Tips on passing an object as data through Angular router navigation:

Typescript is unable to locate the .d.ts files

What could be the reason for TypeScript being unable to recognize my function?

How to create classes in typescript without utilizing the class keyword

Is the regex returning the correct result?

Encountering an Angular 13 ChunkLoadError during application deployment, despite the presence of the respective chunk

Creating a TypeScript interface where the type of one property is based on the type of another property

Encountered an error trying to access properties that are undefined while working with Ionic Angular, specifically having trouble reading the 'update

Can Cloud Functions be used to establish a connection between Cloud Firestore and Realtime Database?

Accessing JSON data stored locally and initializing it into a TypeScript variable within a React application

Upon the second click, the addEventListener function is triggered

Tips for adjusting the radio button value similarly to a checkbox in Angular 2 using *ngFor

Resolving redundancy in Typescript Material-UI Table codebases

What is the process for invoking instance methods dynamically in TypeScript?

Issue with Date generation in TypeScript class causing incorrect date output

Exploring the features of NextJS version 13 with the benefits

Tips for resolving the "trim" of undefined property error in Node.js

Disable the default animation