CODEWITHSUNDEEP
angulartypescriptvariable-types
user1675891
user1675891

Reputation:

What would be a type of an event in Angular 2?

I'm trying to specify the types of all my methods/parameters so instead of:

someCoolFunction(param) { ... }

I try to use the type safe'ish version like this:

someCoolFunction(param: number): void { ... }

When I bounce around types that I've declared myself, it's easy. When it comes to types brought from other packages, I also often know what they are as I explicitly specify my imports.

However, I'm not sure what type to give to the event, to the object and to the output in the method below.

someBoundFunction(event, junk) {
  ...
  return {a: 1, b: 2};
}

I've seen any being used but I'm not sure if it's applicable in this case. Also, I'm sensing that it's just incorrect for the event call. (If it matters, the call binding to the function can look as below.)

<custom-thing (output)="someBoundFunction($event, {x:"x",y:"y"})">!</custom-thing>

Upvotes: 3

Views: 5013

Answers (2)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92677

'any' is ok because function someBoundFunction in template is dynamically binding - (via angular2 template parser) so TS don't know type (TS not parse templates - they are dynamically parsed by angular2).

Of course to 'visual clarify' you can use someBoundFunction(event: SomeType, junk: any): any the same as you use in @Output() output: EventEmitter<SomeType> = new EventEmitter(); (in custom-thing component) but it will be not check by TS parser (due to unable to parse and bind function in template). You can use 'any' as return someBoundFunction type because you not defined object {a: 1, b: 2} type as separate class (but as dynamically created object) - and the same situation is for {x:"x",y:"y"}.

=== EDIT ===

@AluanHaddad in comments below give me some new informations about TS (thanks) that I don't know before so the new version of my answer is:

Define outputData interface (or class) (because it will be used twice: on event emit and event handling) e.g.:

export interface OutputData {
    a: string;
    b: number;
}

Then in your custom-thing component define event:

@Output() public output = new EventEmitter<OutputData>();

And fire event:

this.output.emit({a:'test', b:2});

And then you can define event handler someBoundFunction in this way:

public someCoolFunction(event: OutputData, junk: {a: string, b:string}) : { a: number, b: number} {
    // ...
    return { a: 1, b:2};
}

And because you return some object in someCoolFunction so I assume that you want reuse this function in other part of code - so you can invoke it by (if you don't want to reuse this handler, defining junk type and return type is unnecessary):

let result = this.someCoolFunction({ a: 'test', b: 666}, { a:1, b:'zz'});
console.log(result.a); 
// ...

And now you have pretty strong typeized code (except someCoolFunction type checking in template).

Upvotes: 2

Pearman
Pearman

Reputation: 1068

I may be misunderstanding your question, but in this case the type of $event can vary. $event is just a proxy for whatever is transmitted via the emit method in custom-thing.

For example, if I had an output on my component called output.

@Output() output: EventEmitter<number> = new EventEmitter<number>();

emitEvent() {
   this.output.emit(5); // $event is 5 of type number
}

Upvotes: 2

Related Questions