Angular 2 中的事件类型是什么？

Question

我正在尝试指定我所有 methods/parameters 的类型，而不是：

someCoolFunction(param) { ... }

我尝试像这样使用类型安全的版本：

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

当我在自己声明的类型之间跳来跳去时，这很容易。当涉及到从其他包引入的类型时，我也经常知道它们是什么，因为我明确指定了我的导入。

但是，我不确定在下面的方法中为事件、对象和输出赋予什么类型。

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

我看到 any 被使用，但我不确定它是否适用于这种情况。另外，我感觉到事件调用是不正确的。（如果重要，绑定到函数的调用可以如下所示。）

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

Answer 1

'any' 没问题，因为模板中的函数 someBoundFunction 是动态绑定的 - （通过 angular2 模板解析器）所以 TS 不知道类型（TS 不解析模板 - 它们由 angular2 动态解析).

当然 'visual clarify' 你可以使用 someBoundFunction(event: SomeType, junk: any): any 就像你在 @Output() output: EventEmitter<SomeType> = new EventEmitter(); 中使用的一样（在自定义组件中）但是它不会被 TS 解析器检查（由于无法解析和绑定模板中的函数）。您可以将 'any' 用作 return someBoundFunction 类型，因为您没有将对象 {a: 1, b: 2} 类型定义为单独的 class （但作为动态创建的对象） - 同样的情况适用于 {x:"x",y:"y"}.

=== 编辑 ===

@AluanHaddad 在下面的评论中给了我一些我以前不知道的关于 TS 的新信息（谢谢）所以我的新答案是：

定义outputData接口（或class）（因为它将被使用两次：在事件发出和事件处理时）例如：

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

然后在你的custom-thing组件中定义事件：

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

火灾事件：

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

然后你可以这样定义事件处理器someBoundFunction:

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

并且因为您 return someCoolFunction 中的某个对象，所以我假设您希望在代码的其他部分重用此函数 - 因此您可以通过（如果您不想重用此处理程序，定义 junk 类型和 return 类型是不必要的）：

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

现在您的类型化代码非常强大（someCoolFunction 模板中的类型检查除外）。

Answer 2

我可能误解了你的问题，但在这种情况下 $event 的类型可能会有所不同。 $event 只是 custom-thing.

中通过 emit 方法传输的任何内容的代理

例如，如果我的组件上有一个名为 output 的输出。

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

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

Angular 2 中的事件类型是什么？

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

angular

typescript

variable-types