skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(devtools): update typing of differ objects to fit the new contract of TrackByFunction (rangle/angular-devtools#862)

Browse Source 
Previously `DefaultIterableDiffer` was able to infer the type of it's generic by reading the type contract defined by the user defined trackBy function. This was because `TrackByFunction` can be specified with a generic that is used to type its second argument. If this generic is not provided, like in this case, typescript infers this type from the function contract directly. In this case this inferred type was `FlatNode`. This inference is then propagated to `DefaultIterableDiffer`, which is why we were not seeing this error previously.

A change in the framework made it so the second argument of `TrackByFunction` is typed as a generic that extends the generic passed into `TrackByFunction`. Since we had not previously passed in this generic to `TrackByFunction`, this type was inferred as an extension of `unknown`, causing a type error when passed as an argument to the `DefaultIterableDiffer` constructor.

Now the functions being used are typed directly as `TrackByFunction<FlatNode>`

For clarity, the `DefaultIterableDiffer` generic is now also typed as `FlatNode`.

See https://github.com/angular/angular/pull/41995 for the framework change.
This commit is contained in:
AleksanderBodurri
2021-06-21 20:56:43 -04:00
committed by GitHub
parent c3e8311298
commit 1b97432960
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source.ts
+3 -3
View File
@@ -4,7 +4,7 @@ import { BehaviorSubject, merge, Observable } from 'rxjs';
import { MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
import { map } from 'rxjs/operators';
import { DefaultIterableDiffer } from '@angular/core';
import { DefaultIterableDiffer, TrackByFunction } from '@angular/core';
import { IndexedNode, indexForest } from './index-forest';
import { diff } from '../../diffing';
@@ -22,7 +22,7 @@ export interface FlatNode {
const expandable = (node: IndexedNode) => !!node.children && node.children.length > 0;
const trackBy = (_: number, item: FlatNode) => `${item.id}#${item.expandable}`;
const trackBy: TrackByFunction<FlatNode> = (_: number, item: FlatNode) => `${item.id}#${item.expandable}`;
const getId = (node: IndexedNode) => {
let prefix = '';
@@ -61,7 +61,7 @@ const filterCommentNodes = (nodes: IndexedNode[]) => {
};
export class ComponentDataSource extends DataSource<FlatNode> {
private _differ = new DefaultIterableDiffer(trackBy);
private _differ = new DefaultIterableDiffer<FlatNode>(trackBy);
private _expandedData = new BehaviorSubject<FlatNode[]>([]);
private _flattenedData = new BehaviorSubject<FlatNode[]>([]);
private _nodeToFlat = new WeakMap<IndexedNode, FlatNode>();
projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts
+4 -3
View File
@@ -4,18 +4,19 @@ import { BehaviorSubject, merge, Observable, Subscription } from 'rxjs';
import { MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
import { map } from 'rxjs/operators';
import { DefaultIterableDiffer } from '@angular/core';
import { DefaultIterableDiffer, TrackByFunction } from '@angular/core';
import { diff } from '../../diffing';
import { FlatNode, Property } from './element-property-resolver';
import { arrayifyProps } from './arrayify-props';
const trackBy = (_: number, item: FlatNode) => `#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`;
const trackBy: TrackByFunction<FlatNode> = (_: number, item: FlatNode) =>
`#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`;
export class PropertyDataSource extends DataSource<FlatNode> {
private _data = new BehaviorSubject<FlatNode[]>([]);
private _subscriptions: Subscription[] = [];
private _expandedData = new BehaviorSubject<FlatNode[]>([]);
private _differ = new DefaultIterableDiffer(trackBy);
private _differ = new DefaultIterableDiffer<FlatNode>(trackBy);
constructor(
props: { [prop: string]: Descriptor },