feat(tree): typescript/strong typing of nodes
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Feature Description
Currently `*matTreeNodeDef` types the resulting variable as `any`:

### 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