angular / angular/components

feat(tree): typescript/strong typing of nodes

オープン
#30,502 コメント 2 件 リアクション 6 件 担当者 0 名 GitHub で見る
area: cdk/tree feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Issue に示されている MatTreeNodeDef、MatTree、matTreeNodeDef のエントリポイントから始め、リンクされている TypeSafeMatTreeNodeDefDirective の workaround と参照されている議論を比較します。*matTreeNodeDef で宣言される変数が workaround を必要とせずに強く型付けされ、ドキュメントに記載された tree の使用方法が引き続き機能すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
developer-experience, frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。