Question

在我的Angular 2 TypeScript应用程序中，我定义了一个接口而不是一个类来允许可选参数。

据我所知，我应该通过以下方式实现接口：

导出类myClass实现myInterface {...}

然后通过new(...)实例化。

我想知道这是否是正确的方法（在Angular 2中）或更简单/更好的方式？

此外，我应该将实现放在我使用它的组件（.ts）中，接口所在的位置还是在哪里？

Answer 1

你可以这样做。您还可以创建一个实现接口的对象，如：

interface foo {
    one: number;
    two: string;
}

const bar: foo = { one: 5, two: "hello" };

如果您想使用课程，可以将其放在您想要的位置。如果它与组件紧密耦合，您可以将其放在那里。一般来说，我希望类松散耦合，所以我把它们放在自己的文件中。

Answer 2

我用这种方式

interface IObject{
    first: number;
    second: string;
}

然后

var myObject = {} as IObject
var myListObject = [] as Array<IObject>

Answer 3

您可以执行以下操作：

export interface IMyInterface {
  property1: string;
  property2: number;
  property3: boolean;
}

export class MyClass implements IMyInterface {
  property1: string = '';
  property2: number = 1;
  property3: boolean = false;
  constructor(){}
}

然后实例化：

let newFromInterface = new MyClass();

至少我在代码中这样做。

Answer 4

interface IOffice {
id: number;
employeeName: string;
phone?: number;
}
export class OfficeComponent {
  officeData: IOffice= <IOffice>{};
  dummyOfficeData: IOffice = {id: 1, employeeName: 'ragnar', phone: 123};
  noPhoneOfficeData: IOffice = {id: 2, employeeName: 'floki'};

constructor(){
  console.log(this.dummyOfficeData);
  console.log(this.dummyOfficeData);
}
}

这对我来说是更好的方法。您可以从模型文件导出界面并导入任何必要的组件。

Answer 5

虽然接受的答案很好，但请注意以下解决方案，因为它们使您可以忽略界面中定义的必需属性：

const instance1 = {} as MyInterface;
const instance2 = <MyInterface>{};

其他一些健壮而紧凑的替代方案包括：

1）实例化实现该接口的匿名类：

new class implements MyInterface {
  one = 'Hello';
  two = 'World';
}();

2）或者，采用以下实用程序功能：

export function impl<I>(i: I) { return i; }

impl<MyInterface>({
  one: 'Hello';
  two: 'World';
})

使用接口创建实例

5 个答案: