How can an interface be "streamlined" or "simplified" in TypeScript?

Question

How can an interface be "streamlined" or "simplified" in TypeScript?

Within a complex project encompassing multiple front-end applications and dozens of microservices, we maintain a private npm repository housing common components utilized by these front-end apps. These shared components include TypeScript models such as:

interface IUser {
    id: string;
    login: string;
    name: string;
    ...
}

While this setup ensures consistency among the apps, the rapid development pace can result in discrepancies in the data returned by various microservices. For instance, a microservice might return an "enriched" object that extends the common interface:

interface IUser {
    id: string;
    login: string;
    name: string;
    ...
    extraField1: someType1;
    extraField2: someType2;
}

To address such discrepancies, enriched types can be defined through interfaces that extend the base commons interface:

interface IUserEnriched extends IUser {
    extraField1: someType1;
    extraField2: someType2;
}

However, there are cases where a microservice returns a simplified object:

interface IUserImpoverished {
    id: string;
    /* no login: string; here; or may be it's optional, unlike in the common interface */
    name: string;
    ...
}

I am curious if TypeScript offers a way to automatically generate such impoverished interfaces based on IUser instead of duplicating code (?). This poses challenges when updating the commons: adding fields to IUser may not affect all applications immediately, but removing a property like login requires creating enriched interfaces wherever it is used. The ability to simplify interfaces would be beneficial in such scenarios.

I attempted researching using terms like "narrow [TS interface]" but couldn't find relevant information. If you are familiar with the correct terminology, please share your insights.

typescript

Answer 1

Answer №1

To manipulate object types in TypeScript by removing specific properties, you can utilize the Omit<T, K> utility type. This allows you to "impoverish" the object type T by omitting properties with keys of type K. Here's how you can create a type alias:

type TUserImpoverished = Omit<IUser, "login">;

If you prefer an interface, you can define it like this:

interface IUserImpoverished extends Omit<IUser, "login"> { }

It's important to note that the second parameter in the omit function specifies the string literal type "login". By using this approach, you can see that the omitted key is no longer present among the known keys of the resulting object type:

const impoverishedUser: IUserImpoverished = { id: "1", name: "Alice" };

If you need to remove multiple keys, you can achieve this by creating a union of the relevant key types for K:

type TUserFurtherImpoverished = Omit<IUser, "login" | "name">;
const furtherImpoverishedUser: TUserFurtherImpoverished = { id: "2" };

Hopefully, this explanation proves helpful to you. Best of luck with your TypeScript endeavors!

Click here for Playground link to code

Answer 2

To manipulate object types in TypeScript by removing specific properties, you can utilize the Omit<T, K> utility type. This allows you to "impoverish" the object type T by omitting properties with keys of type K. Here's how you can create a type alias:

type TUserImpoverished = Omit<IUser, "login">;

If you prefer an interface, you can define it like this:

interface IUserImpoverished extends Omit<IUser, "login"> { }

It's important to note that the second parameter in the omit function specifies the string literal type "login". By using this approach, you can see that the omitted key is no longer present among the known keys of the resulting object type:

const impoverishedUser: IUserImpoverished = { id: "1", name: "Alice" };

If you need to remove multiple keys, you can achieve this by creating a union of the relevant key types for K:

type TUserFurtherImpoverished = Omit<IUser, "login" | "name">;
const furtherImpoverishedUser: TUserFurtherImpoverished = { id: "2" };

Hopefully, this explanation proves helpful to you. Best of luck with your TypeScript endeavors!

Click here for Playground link to code

Answer 3

Answer №2

It's a bit unclear what you're trying to achieve, but one way to approach it is by manipulating utility types like this:

interface IUser {
  id: string;
  name: string;
}

type IUserSubset = Pick<IUser, 'id'>;

const subsetUser: IUserSubset = {
  id: 'example'
};

Answer 4

It's a bit unclear what you're trying to achieve, but one way to approach it is by manipulating utility types like this:

interface IUser {
  id: string;
  name: string;
}

type IUserSubset = Pick<IUser, 'id'>;

const subsetUser: IUserSubset = {
  id: 'example'
};

How can an interface be "streamlined" or "simplified" in TypeScript?

Answer №1

Answer №2

Similar questions

Referring to a component type causes a cycle of dependencies

Retrieve functions contained within the component.ts file of an Angular library: tips and tricks

What's the best way to track changes in multiple form fields simultaneously in Angular?

Combining objects in a JavaScript array based on a specific property

Tips for creating a mapped type in TypeScript that is based on an array

What is the best method to add data to a child array located within a nested array?

Acquire Binance account balances through NextJS, ccxt library, and TypeScript integration

Can you identify the specific syntax for a 'set' function in TypeScript?

Deciphering the SessionProvider error: When "useSession" isn't recognized as a function

Consider pushing items onto an array only once when the condition is met, instead of adding to the array every

The error code TS2345 indicates that the argument '{ read: typeof ElementRef; }' cannot be assigned to the parameter '{ read?: any; static: boolean; }'

`Database Schema Enforcement in Firestore: Custom Objects vs Security Rules`

Utilize mui-tiptap to effortlessly upload images to your content

Exploring the power of Supabase's two-tiered joins using TypeScript

After the click event, the variable in the Angular .ts file does not get refreshed

What is the best way to apply multiple array filters to an object list in react.js?

Leverage asyncData method in your NuxtJS layout or component

Traverse a nested array containing children elements to construct a pathway map

What is the best way to divide an HTML table into two sections?

Methods to acquire the 'this' type in TypeScript