What will the event type be in Angular 2?
I'm trying to specify the types of all my methods / parameters, so instead of:
someCoolFunction(param) { ... }
I'm trying to use a type safe version like this:
someCoolFunction(param: number): void { ... }
When I give up the types I have declared to myself, it's easy. When it comes to types brought in from other packages, I also often know what it is when I specify my imports explicitly.
However, I'm not sure what type should be passed to the event, object and output in the method below.
someBoundFunction(event, junk) {
...
return {a: 1, b: 2};
}
I saw what is used any
, but I'm not sure if it is applicable in this case. Also, I feel like it's just not correct to trigger an event. (If it matters, the function call binding might look like the following.)
<custom-thing (output)="someBoundFunction($event, {x:"x",y:"y"})">!</custom-thing>
I may not understand your question, but in this case the type $event
may change. $event
is just a proxy for what is passed using the method emit
in custom-thing
.
For example, if I had an output on my component named output
.
@Output() output: EventEmitter<number> = new EventEmitter<number>();
emitEvent() {
this.output.emit(5); // $event is 5 of type number
}
source to share
'any' is ok because the function someBoundFunction
in the template is dynamically linked - (via the w angular2 parser), so TS does not know the type (TS does not parse templates - they are dynamically parsed by angular2).
Of course, for "visual clarification" you can use the someBoundFunction(event: SomeType, junk: any): any
same as in @Output() output: EventEmitter<SomeType> = new EventEmitter();
(in the custom-thing component), but this will not be checked by the TS parser (due to the inability to parse and link the function in the template). You can use the type "any" as return someBoundFunction
, because you have not defined the object {a: 1, b: 2}
as a separate class (but as a dynamically created object) - and the same situation for {x:"x",y:"y"}
.
=== EDIT ===
@AluanHaddad in the comments below gives me some new information about TS (thanks) that I don't know before, so a new version of my answer is this:
Define an outputData
interface (or class) (because it will be used twice: when firing an event and handling events), for example:
export interface OutputData {
a: string;
b: number;
}
Then, in your custom-thing
component, define an event:
@Output() public output: EventEmitter<OutputData> = new EventEmitter();
And the fire event:
this.output.emit({a:'test', b:2});
And then you can define an event handler someBoundFunction
like this:
public someCoolFunction(event: OutputData, junk: {a: string, b:string}) : { a: number, b: number} {
// ...
return { a: 1, b:2};
}
And since you are returning some object in someCoolFunction
, so I assume that you want to reuse this function in another part of the code - so you can call it (if you don't want to reuse this handler, defining the junk
type and return type is not required) :
let result = this.someCoolFunction({ a: 'test', b: 666}, { a:1, b:'zz'});
console.log(result.a);
// ...
And now you have pretty strong typed code (other than type checking someCoolFunction
in the template).
source to share