angular / angular/components

feat(tree): typescript/strong typing of nodes

Ouverte
#30,502 2 commentaires 6 réactions 0 personnes assignées Voir sur GitHub
area: cdk/tree feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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
-
+
...
-
+
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par les points d’entrée MatTreeNodeDef, MatTree et matTreeNodeDef présentés dans l’issue, puis comparez le workaround TypeSafeMatTreeNodeDefDirective lié et les discussions référencées. Le travail est terminé lorsque la variable déclarée par *matTreeNodeDef est fortement typée sans nécessiter le workaround, et que l’utilisation documentée de l’arbre fonctionne toujours.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
developer-experience, frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.