In my Angular 2 TypeScript application, I defined an interface rather than a class to allow optional parameters.
As far as I know, I should somewhere implement the interface by:
export class myClass implements myInterface { ... }
and then instantiate it via new(...).
I wondered whether this is the right way to do it (in Angular 2) or there is a simpler / better way?
Also, where should I put the implementation, in the component (.ts) where I use it, where the interface is or where?
You can do it that way. You can also just create an object that implements the interface like:
interface foo {
one: number;
two: string;
}
const bar: foo = { one: 5, two: "hello" };
If you want to use a class, you can put it where you want. If it's tightly coupled with the component, you can put it there. Generally though, I want classes to be loosely coupled, so I put them in their own file.
const bar = { one: 5, two: "hello" } as foo which is slightly different, as it allows for additional properties beyond the ones defined by the interface. (I'm just noting this here for completeness - the bar: foo syntax is the correct thing unless you need additional properties, as it provides the strictest validation.)I use this way
interface IObject{
first: number;
second: string;
}
then
var myObject = {} as IObject
var myListObject = [] as Array<IObject>
While the accepted answer is good, beware of solutions like this because they allow you to omit required properties defined in the interface:
const instance1 = {} as MyInterface;
const instance2 = <MyInterface>{};
Some other robust and compact alternatives include:
1) Instantiate an anonymous class which implements the interface:
new class implements MyInterface {
one = 'Hello';
two = 'World';
}();
2) Alternatively, employ a utility function as follows:
export function impl<I>(i: I) { return i; }
impl<MyInterface>({
one: 'Hello';
two: 'World';
})
You can do the following:
export interface IMyInterface {
property1: string;
property2: number;
property3: boolean;
}
export class MyClass implements IMyInterface {
property1: string = '';
property2: number = 1;
property3: boolean = false;
constructor(){}
}
Then to instantiate:
let newFromInterface = new MyClass();
This is how I do it in my code at least.
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);
}
}
this is better way for me. you can export interface from model file and import in any necessary components.
If implementation is not done properly, you might end up with {} which is null but not actual null.
interface foo {
one: string;
two: string;
}
if you want to initialize a null interface use data: foo = null
if you want to intialize interface with values use data: <foo>({one:'1',two:'2'})
