提问人：L. Kvri 提问时间：11/15/2023 更新时间：11/15/2023 访问量：29
TypeScript 声明合并 Angular 项目中不同文件中的接口
TypeScript declaration merging of interfaces in different files in an Angular project
问：
当接口在单独的文件中时，可以通过哪种方式实现声明合并？
文件 all-data.interface.ts 中有一个接口
export interface IAllData {
data1: string;
data2: string;
}
还有另一个接口，如
data-one.interface.ts（数据一.接口.ts）
export interface IAllData {
data2: number;
data3: number;
}
和
数据-two.interface.ts
export interface IAllData {
data4: boolean;
data5: boolean;
}
类：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);
}
当我将基于实例作为参数传递给函数时，当我尝试使用实例化类的属性时，在函数内部IAllData
属性“data4”在类型“IAllData”上不存在。
正如我所尝试的，我无关紧要，我将所有声明包装到同一个命名空间中。
你能向我解释一下，我错过了什么吗？
答：
1赞
dj11223344
11/15/2023
#1
您必须导入接口并为其提供别名，因为它们具有相同的名称：
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);
}
或者，您可以创建一个新接口来扩展您的其他接口：
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);
}
评论