Quel serait le type d'un événement dans Angular 2?

Question

Je suis en train de préciser les types de toutes mes méthodes/paramètres donc au lieu de:

someCoolFunction(param) { ... } 

J'essaie d'utiliser la version de type safe'ish comme ceci:

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

Quand je rebondis autour des types que je me suis déclaré, c'est facile. Quand il s'agit de types apportés par d'autres paquets, je sais souvent ce qu'ils sont lorsque je spécifie explicitement mes importations.

Cependant, je ne suis pas sûr du type à donner à l'événement, à l'objet et à la sortie dans la méthode ci-dessous.

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

Je l'ai vu any être utilisé, mais je ne sais pas si elle est applicable dans ce cas. En outre, je sens que c'est juste incorrect pour l'appel d'événement. (S'il importe, l'appel se liant à la fonction peut regarder comme ci-dessous.)

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

Answer 1

Je peux mal comprendre votre question, mais dans ce cas le type de $event peut varier. $event est juste un proxy pour tout ce qui est transmis via la méthode emit dans custom-thing. Par exemple, si j'avais une sortie sur mon composant appelée output.

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

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

Answer 2

« any » est ok parce que la fonction someBoundFunction dans le modèle lie dynamiquement - (via angular2 analyseur de modèle) si TS ne sais pas type (TS ne pas analyser les modèles - ils sont analysés dynamiquement par angular2). Bien sûr pour 'clarifier visuellement' vous pouvez utiliser someBoundFunction(event: SomeType, junk: any): any le même que vous utilisez dans @Output() output: EventEmitter<SomeType> = new EventEmitter(); (dans le composant custom-thing) mais il ne sera pas vérifié par TS parser (en raison de l'impossibilité d'analyser et de lier la fonction dans le template) . Vous pouvez utiliser 'any' comme type de retour someBoundFunction car vous n'avez pas défini l'objet type {a: 1, b: 2} en tant que classe distincte (mais en tant qu'objet créé dynamiquement) - et la même situation s'applique à {x:"x",y:"y"}.

=== === EDIT

@AluanHaddad dans les commentaires ci-dessous me donner quelques nouvelles informations sur TS (grâce) que je ne connaissais pas avant si la nouvelle version de ma réponse est:

définir l'interface outputData (ou classe) (car il sera utilisé deux fois: sur l'événement d'émission et de gestion des événements) par exemple:

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

Ensuite, dans votre cas définir le composant custom-thing:

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

et événement d'incendie:

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

Et vous pouvez définir gestionnaire d'événements someBoundFunction de cette façon:

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

Et parce que vous retournez un objet dans someCoolFunction donc je suppose que vous voulez réutiliser cette fonction dans une autre partie du code - donc vous pouvez l'appeler par (si vous ne voulez pas réutiliser ce gestionnaire, la définition du type junk et du type de retour est inutile):

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

Et maintenant vous avez assez fort code typé (sauf modèle de vérification de type someCoolFunction).