Add typing for NgElement Outputs
- Linguagem predominante
- TypeScript
- Estrelas
- 101k
- Forks
- 27.5k
- Merge médio
- 1d 19h
- PRs com merge (30d)
- 288
Descrição
### Which @angular/* package(s) are relevant/related to the feature request?
elements
### Description
I was experimenting with Angular's custom elements. The [documentation](https://angular.io/guide/elements) mentions how attributes/inputs of such elements could be typed,
```typescript
declare global {
interface HTMLElementTagNameMap {
'my-dialog': NgElement & WithProperties<{content: string}>;
'my-other-element': NgElement & WithProperties<{foo: 'bar'}>;
…
}
}
```
but it does not mention how the events/outputs could be typed.
### Proposed solution
I would propose to either add (similar to the WithProperties) a WithEvents/WithOutputs type or even better to add a wrapper type that does the merging of addEventListener signatures better:
Using the `type-fest` library my solution is
```typescript
import { Merge, UnionToIntersection } from "type-fest";
import { NgElement, WithProperties } from "@angular/elements";
export type TypedNgElement, Outputs extends Record = {}> = Merge<
NgElement,
WithProperties &
UnionToIntersection<
{
[K in keyof Outputs]: {
addEventListener(type: K, listener: (event: CustomEvent) => void, options?: boolean | AddEventListenerOptions): void;
};
}[keyof Outputs]
>
>;
```
That can later be used as follows:
```typescript
declare global {
interface HTMLElementTagNameMap {
"my-custom-element-selector": TypedNgElement<
{
inputOne: SomeType;
inputTwo?: boolean;
},
{
outputOne: SomeType;
outputTwo: void;
}
>;
}
}
```
### Alternatives considered
I see alternatives (as I mentioned in the solution) in the way the type is introduced.
Guia de contribuição
Direção de pesquisa
Comece lendo o pacote @angular/elements e os tipos existentes NgElement e WithProperties; em seguida, revise o exemplo da documentação de custom elements. Compare as abordagens propostas WithEvents, WithOutputs e tipos wrapper, e identifique o comportamento de tipagem que deve ser coberto. Considera-se concluído quando uma API pública acordada puder tipar eventos de saída de custom elements sem enfraquecer a tipagem existente das entradas.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- typescript
- Domínio
- frontend
- Tipo de issue
- Funcionalidade
- Dificuldade
- 5/5
- Tempo estimado
- Mais de uma semana
- Status de atividade
- Estagnada
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 35/100