Can a TypeScript interface inherit from multiple other interfaces simultaneously?

Hello Angular Community,

I have a question regarding nesting three interfaces within another interface. Let me explain with some code: I am attempting to integrate the IProject1, IProject2, and IProject3 interfaces into the IAdmin2 interface:

Thank you in advance

 import {IBusiness} from "./business";
 import {ITechnology} from "./technology";
 export interface IAdmin2 {
     id: number;
     business_id: number;
     technology_ids: number[];
     trigram: string;
     position: string;
     years_experience: number;
     notification: boolean;
     availability: any;
     form_admin2_file: File;
     business: IBusiness;
     technologies: ITechnology[];
     admin2Translations: any;
     translations: any;
    delete: any;
    data: any;
  ** Include interface Iproject1**
  ** Include interface Iproject2**
  ** Include interface Iproject3**
 }


 import {ITechnology} from "./technology";
 import {IProjectFile} from "./project-file";
 export interface IProject1 {
     id: number;
    name: string;
    start_date: any;
    technologies: ITechnology[];
    description: string;
    sector_id: number;
    end_date: any;
    team_size: number;
}

 import {ITechnology} from "./technology";
 import {IProjectFile} from "./project-file";
 export interface IProject2 {
     id: number;
    name: string;
    start_date: any;
    technologies: ITechnology[];
    description: string;
    sector_id: number;
    end_date: any;
    team_size: number;
}

 import {ITechnology} from "./technology";
 import {IProjectFile} from "./project-file";
 export interface IProject3 {
     id: number;
    name: string;
    start_date: any;
    technologies: ITechnology[];
    description: string;
    sector_id: number;
    end_date: any;
    team_size: number;
}

Answer №1

When working with TypeScript, you have the ability to inherit an interface from multiple base interfaces:

interface IProject1 {
}

interface IProject2 {
}

interface IProject3 {
}

interface IAdmin2 extends IProject1, IProject2, IProject3 {
}

This means that any implementations of IAdmin2 must also implement IProject1, IProject2, and IProject3. For more information on interfaces, you can refer to the official documentation.

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

Modifying Data with MomentJS when Saving to Different Variable

After attempting to assign a moment to a new variable, I noticed that the value changes on its own without any modification from my end. Despite various attempts such as forcing the use of UTC and adjusting timezones, the value continues to change unexpec ...

Is it possible to pass multiple parameters in Angular by utilizing the click() function?

Is there a method for passing parameters with click() in Angular? <a asp-action="CreateSales" (click)="CreateSales(productname='pa', price='16.5')">Some Text</a> I am still learning Angular and would appreciat ...

Guide on executing a function exclusively when the state of a service variable changes within an Angular4 component

In my InfoFormService, I have a variable called isInValidating that is initially set to false. This variable becomes true when the component calls the validateEmail(email) function as shown below. @Injectable() export class InfoFormService { private ...

What is the best way to incorporate auto-completion into a browser-based editor using Monaco?

Recently, I embarked on a project to develop a browser-based editor using monaco and antlr for a unique programming language. Following an excellent guide, I found at , gave me a great start. While Monaco provides basic suggestions with ctrl + space, I am ...

A service worker of unknown origin is currently getting registered

Currently, I am using the service worker provided in create-react-app. After registering it in index.tsx with serviceWorker.register();, everything seems to be working fine. However, upon closer inspection in the dev tools' Application tab, I noticed ...

The Angular2-Recaptcha feature fails to load when navigating back in the browser

As I delve into the world of Angular Application development, I encounter an issue with Recaptcha. Everything works smoothly during application initialization. However, upon navigating to the next page and then attempting to go back using the browser' ...

Exploring Angular 2 - examining how @input is implemented within the ngOnInit lifecycle hook for testing a component

Presently, I am facing a challenge while attempting to test a child component that is designed to receive input from the host component and utilizes the ngOnInit lifecycle hook as depicted in the following code snippet. @Component({ selector: 'my ...

Akita and Angular Error Exploration: Analyzing the StaticInjector and NullInjector in the Context of Store and

I encountered an issue with the Akita state management implementation while working on an Angular project. Here is a brief solution to help others who may face the same problem. The documentation and examples provided by Akita do not offer a clear explana ...

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

Associate a template reference variable with an attribute directive category

Currently, I am in the process of creating an attribute directive that will receive multiple templates containing additional data for filtering. This extra information will be utilized later to select the appropriate template. To achieve this, I have exten ...

Angular - service workers leading to unsuccessful uploads

When uploading files using Uppy (XHRUpload) in my Angular 6 app, the process is smooth on localhost with the service worker disabled. However, enabling the service worker results in successful uploads only for small files, while larger files fail to upload ...

Angular2 Dependency Injection with NPM-MQTT

I'm facing some challenges integrating the MQTT package into my Angular2 TypeScript project (created with angular-cli). When using var mqtt = require('mqtt');, I encounter the error Cannot find name 'require'. Therefore, I attemp ...

ng-mocks: NG0304: The component 'ng-mocks-ButtonComponent' is not recognized

While running test cases with Angular and ng-mocks, I encountered the following error: Error: NG0304 - 'ng-mocks-ButtonComponent' is not recognized as a valid element within the template. To resolve this error for an Angular component, ensure ...

What is the best RxJS operator to implement additional transformations following mapping?

this.service.retrieveObject(id).map((object)=>{ return transformation1(object); }) .map((object)=>{ return transformation2(object); }); In the following example, the second map call does not have access to the object ...

Issue with triggering angular function multiple times in certain conditions

Issue: Experiencing difficulties with Angular directive as it is being called multiple times, resulting in incorrect transaction outcomes and multiple entries on the Console screen. Desired Outcome: Ensure that the function executes only once. Sample cod ...

Encountered an error while trying to access the 'touched' property of undefined within Angular6 reactive forms

When attempting to validate my page, I encountered an error stating 'Cannot read property 'touched' of undefined'. Can someone please assist me with this code? Also, feel free to correct any mistakes you may find. Here is the HTML code ...

The API Gateway LogGroup is experiencing duplication issues and lacks critical details

I've been encountering difficulties setting up CloudWatch logs for my RestApi using cdk. Here is the code I'm using: const logGroup = new LogGroup(this, `apiLogs`, { logGroupName: `apiLogs`, retention: RetentionDays.ONE_WEEK }); ...

Utilizing the WebSocket readyState to showcase the connection status on the application header

I am currently in the process of developing a chat widget with svelte. I aim to indicate whether the websocket is connected or not by utilizing the websocket.readyState property, which has the following values: 0- Connecting, 1- Open, 2- Closing, 3- Close ...

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

On a single page, I have two components sharing some methods and properties. How can I utilize a service to achieve this? See the sample code snippet below... @Component({ selector: 'app', template: '<h1>AppComponent1</h1>' ...

Issue with Angular project: View not being updated when using behaviorSubjects

Within my Angular project, I am retrieving data from an API using a service and storing the data within a BehaviorSubject as shown below private categorySubject = new BehaviorSubject<number | null>(null); apiBehavior = new ReplaySubject<ApiRes ...