angular / angular/angular

Add typing for NgElement Outputs

Aberta
#53,795 0 comentários 0 reações 0 responsáveis Ver no GitHub
area: elements
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

Abrir o 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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.