Is it possible to expand a section of an Interface in Typescript?

Imagine a scenario where I have two interfaces:

// The interface obtained from an external library that cannot be modified
interface Balloon {
  diameter: number;
  color: "red" | "blue" | "green";
}

Now, I want to create my own interface in a similar structure:

interface Shirt {
  size: "m" | "l" | "xl";
  color: "red" | "blue" | "green";
}

The question arises - is it feasible to borrow the 'color' property from Balloon and incorporate it into Shirt like this:

interface Shirt {
  size: "m" | "l" | "xl";
  color: Balloon.color; // While incorrect, this signifies my desired outcome
}

Answer №1

One approach is to utilize a base interface:

interface WithColor {
    color: "red" | "blue" | "green";
}

interface Shirt extends WithColor {
  size: "m" | "l" | "xl";
}

Alternatively, you can define Color as an enum:

enum Color {
    RED = "red",
    BLUE = "blue",
    GREEN = "green",
}

interface Shirt {
  size: "m" | "l" | "xl";
  color: Color;
}

...or explore a combination of the two methods.

It's generally not recommended to rely on types from other interfaces, as it could introduce maintenance challenges if changes are made to the source interface. However, here's one way this can be done:

interface Shirt {
  size: "m" | "l" | "xl";
  color: "red" | "blue" | "green";
}

interface Balloon {
  size: "m" | "l" | "xl";
  color: Shirt["color"];
}

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

How come the type declaration ( () => string ) suddenly pops up?

I am currently utilizing the jasonwebtoken package and have encountered a new javascript/typescript behavior. interface JwtPayload { [key: string]: any; iss?: string | undefined; sub?: string | undefined; aud?: string | string[] | undefined ...

How to handle form-data in NestJS Guards?

I've been trying to access form-data in my NestJS Guards, but I'm experiencing some difficulties. Despite following the tutorial provided here, I am unable to see the request body for my form-data input within the Guard itself. However, once I ac ...

Is there a way in Jest to restrict function calls to only those that are expected and disallow any other unauthorized calls

When working with Jest, you have the ability to mock out and spy on function calls within a function using functionalities like jest.spyOn and jest.fn() with .toHaveBeenCalledTimes(1) etc. However, in Spock framework testing, you can conclude your unit tes ...

Enhancing JSON data: Transforming basic JSON structure into more complex format

I am currently working on a typescript file that is receiving a JSON response from an external API. I am in need of assistance to convert the received JSON into a different format. Could someone please help me with this JSON conversion task? Sample JSON d ...

Display the number of objects in an array using Angular and render it on HTML

I am having trouble displaying the length of an array on my HTML page. No errors are showing up in the console either. Can someone help me figure out how to get the total number of heroes? HTML: <div *ngFor="let hero of heros"> <div>The tota ...

Step-by-step guide on importing `block-ui`, `spectrum-colorpicker`, and `sass.js` libraries in a TypeScript project

I have been utilizing various plugins such as block-ui, spectrum-colorpicker, sass.js, etc., in my Angular 2 project written in TypeScript. Currently, I am loading these plugins directly in the index.html file. However, I would like to import them and onl ...

The repository injected into NestJs using TypeORM suddenly becomes null

In my code, I am fetching Requisition data from an external system using the following approach: init() { const requisitionData = this.loginMb().pipe( map(response => response.data.token), switchMap(loginData => this.getRequisitions(loginD ...

What is the best way to retrieve an object when a value is not found? Consider implementing a looping mechanism with a specific condition in React and TypeScript to successfully

Greetings, I am faced with an array of objects structured as follows: const arr_obj = [ { id: '1', jobs: [ { completed: false, id: '11', run: { ...

Converting language into class components using ngx-translate in Angular

Seeking to convert the information from a table into my typescript class. The data in the table is sourced from a JSON file within the /assets directory. Is there a method to accomplish this task? How can I categorize translation within a typescript class ...

Developing a TypeScript NodeJS module

I've been working on creating a Node module using TypeScript, and here is my progress so far: MysqlMapper.ts export class MysqlMapper{ private _config: Mysql.IConnectionConfig; private openConnection(): Mysql.IConnection{ ... } ...

A TypeScript export class that is created based on configuration parameters

As someone who has primarily worked with C#, TypeScript is a new and exciting challenge for me. I've been enjoying exploring what I can create quickly using Node/TypeScript. However, I've run into a syntax issue that I could use some help with. I ...

What is the best way to invoke a function in a specific child component from its parent component?

It seems that I might have provided too much information, but the main question remains: how can I call a method in the child component from the parent template's click() event. <button(click)='get()'>GET</button> In my case, th ...

Utilize a list of Data Transfer Objects to populate a dynamic bar chart in recharts with

I received a BillingSummaryDTO object from a Rest API using Typescript: export interface BillingSummaryDTO { paid?: number, outstanding?: number, pastDue?: number, cancelled?: number, createdAt?: Moment | null, } export async function ...

Creating multilingual menus with ABP and Nebular

Currently, I am in the process of developing an application using ABP framework version 4.4 and integrating the Nebular theme as opposed to the default basic theme. Amidst various challenges faced during this migration, one particular issue stands out - lo ...

What is the best way to convert a recordset to an array using React?

I'm attempting to create an array by retrieving data from a SQL recordset: +------------+------------+------------+ | start_type | field_name | start_text | +------------+------------+------------+ | 0 | Field1 | some text. | +----------- ...

Utilizing the `map` function for converting a `forEach`

I'm currently in the process of refactoring my code to use the map function instead of forEach. However, I am facing an issue with implementing a null check for order.FunctionStatusList while using map. Specifically, I need guidance on how to handle t ...

The operation of accessing a property of an undefined element fails due to unavailability, hence the error "Cannot

Hey everyone, I'm encountering an issue with opening a project developed in Angular 5.2.0 with Angular CLI version 1.7.4, while my Angular CLI version is 14.0.7... I ran "npm install" without any errors, but when I run "ng version" to check the local ...

Passing a generic type as a parameter in a generic class in TypeScript

TypeScript: I have a method in the DataProvider class called getTableData: public static getTableData<T extends DataObject>(type: { new(): T}): Array<T> { ... } Everything works fine when I use it like this: let speakers = DataProvider.getT ...

Creating a new JavaScript object using a Constructor function in Typescript/Angular

Struggling with instantiating an object from an external javascript library in Angular/Typescript development. The constructor function in the javascript library is... var amf = { some declarations etc } amf.Client = function(destination, endpoint, time ...

Having trouble with reactjs and typescript? Getting the error message that says "Type 'string' is not assignable to type 'never'"?

When trying to setState with componentDidMount after an axios request is completed, you may encounter the error message Type 'string' is not assignable to type 'never'. Below is the code snippet: import * as React from 'react&apos ...