angular / angular/components

feat(tree): typescript/strong typing of nodes

Aperta
#30,502 2 commenti 6 reazioni 0 assegnatari Vedi su GitHub
area: cdk/tree feature P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con i punti di ingresso MatTreeNodeDef, MatTree e matTreeNodeDef mostrati nell’issue, quindi confronta il workaround TypeSafeMatTreeNodeDefDirective collegato e le discussioni citate. Il lavoro è completato quando la variabile dichiarata da *matTreeNodeDef è fortemente tipizzata senza richiedere il workaround e l’uso documentato dell’albero continua a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
developer-experience, frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.