angular / angular/components

feat(tree): typescript/strong typing of nodes

Abierto
#30,502 2 comentarios 6 reacciones 0 asignados Ver en GitHub
area: cdk/tree feature P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### Feature Description

Currently `*matTreeNodeDef` types the resulting variable as `any`:

![Image](https://github.com/user-attachments/assets/f0caae8a-9a16-44d2-8697-7daee05fcc03)

### Use Case

>enable you to build web apps with confidence!

The lack of strong typing is really problematic for bigger projects, and it feels like a downgrade in developer experience compared to custom build trees.

Further motivation for this has been described in:

https://github.com/angular/components/issues/16273
https://github.com/angular/angular/issues/28731
https://nartc.me/blog/typed-mat-cell-def/
https://github.com/angular/components/issues/22290

Workaround copied from https://github.com/angular/components/issues/22290:
```ts
import { Directive, input } from '@angular/core';
import { MatTree, MatTreeNodeDef } from '@angular/material/tree';

@Directive({
selector: '[matTreeNodeDef]',
providers: [
{ provide: MatTreeNodeDef, useExisting: TypeSafeMatTreeNodeDefDirective },
],
})
export class TypeSafeMatTreeNodeDefDirective extends MatTreeNodeDef<
NoInfer
> {
readonly matTreeNodeDefTree = input.required>();

static ngTemplateContextGuard(
dir: TypeSafeMatTreeNodeDefDirective,
ctx: any,
): ctx is { $implicit: T; index: number } {
return true;
}
}
```

```diff
-
+
...
-
+
```

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con los puntos de entrada MatTreeNodeDef, MatTree y matTreeNodeDef mostrados en el issue, y luego compara el workaround TypeSafeMatTreeNodeDefDirective enlazado y las discusiones referenciadas. Se considera terminado cuando la variable declarada por *matTreeNodeDef tiene un tipo fuerte sin requerir el workaround, y el uso documentado del árbol sigue funcionando.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
developer-experience, frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.