TypeScript declaration merging of interfaces in different files in an Angular project

Question

Which way can I implement declaration merging when the interfaces are in separated files?

There is an interface in file all-data.interface.ts

export interface IAllData {
 data1: string;
 data2: string;
}

There are another interfaces like as

data-one.interface.ts

export interface IAllData {
 data2: number;
 data3: number;
}

and

data-two.interface.ts

export interface IAllData {
 data4: boolean;
 data5: boolean;
}

the class: all-data.model.ts

export AllData implements IAllData {
 data1: string;
 data2: string;
 data2: number;
 data3: number;
 data4: boolean;
 data5: boolean;
}


public applyData(data: IAllData) {
 console.log(data.data4);
}

When I passing as parameter the IAllData based instance to a function, inside the function when I try to use the the properties of instantiated class

Property 'data4' does not exist on type 'IAllData'.

As I tried doesn't matter I wrap all declarations into the same namespace.

Could you please explain to me, What I missed?

Answer 1

You will have to import the interfaces and give them aliases, since the have the same name:

import { IAllData as IAllDataOne } from 'src/path/to/data-one.interface';
import { IAllData as IAllDataTwo } from 'src/path/to/data-two.interface';

export class AllData implements IAllDataOne, IAllDataTwo  {
 data1: string;
 data2: any;
 data3: number;
 data4: boolean;
 data5: boolean;
}


public applyData(data: AllData) {
 console.log(data.data4);
}

Alternatively, you can create a new interface that extends your others:

import { IAllData as IAllDataOne } from 'src/path/to/data-one.interface';
import { IAllData as IAllDataTwo } from 'src/path/to/data-two.interface';

export interface IAllDataExtended extends IAllDataOne, IAllDataTwo {
  newData: any;
}

export class AllData implements IAllDataExtended  { // I don't know type of AllData based on info provided
 data1: string;
 data2: any;
 data3: number;
 data4: boolean;
 data5: boolean;
 newData: any;
}


public applyData(data: IAllDataExtended) {
 console.log(data.data4);
}