build: enforce consistent readonly array type (#20290)

Author: rafaelss95

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -3,7 +3,7 @@ import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/k
 import {CdkTableModule} from '@angular/cdk/table';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {CommonModule} from '@angular/common';
-import {Component, Directive, ElementRef, Type, ViewChild} from '@angular/core';
+import {Component, Directive, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick, inject} from '@angular/core/testing';
 import {FormsModule, NgForm} from '@angular/forms';
 import {BidiModule, Direction} from '@angular/cdk/bidi';
@@ -359,12 +359,12 @@ class CdkTableInCell extends BaseTestComponent {
   }
 }
 
-const testCases: ReadonlyArray<[Type<BaseTestComponent>, string]> = [
+const testCases = [
   [VanillaTableOutOfCell, 'Vanilla HTML table; edit defined outside of cell'],
   [VanillaTableInCell, 'Vanilla HTML table; edit defined within cell'],
   [CdkFlexTableInCell, 'Flex cdk-table; edit defined within cell'],
   [CdkTableInCell, 'Table cdk-table; edit defined within cell'],
-];
+] as const;
 
 describe('CDK Popover Edit', () => {
   for (const [componentClass, label] of testCases) {
@@ -381,7 +381,7 @@ describe('CDK Popover Edit', () => {
         inject([OverlayContainer], (oc: OverlayContainer) => {
           overlayContainer = oc;
         })();
-        fixture = TestBed.createComponent(componentClass);
+        fixture = TestBed.createComponent<BaseTestComponent>(componentClass);
         component = fixture.componentInstance;
         fixture.detectChanges();
         tick(10);

src/cdk-experimental/selection/selection.ts

@@ -93,7 +93,7 @@ export class CdkSelection<T> implements OnInit, AfterContentChecked, CollectionV
       return;
     }
 
-    let dataStream: Observable<T[]|ReadonlyArray<T>>|undefined;
+    let dataStream: Observable<readonly T[]>|undefined;
 
     if (isDataSource(this._dataSource)) {
       dataStream = this._dataSource.connect(this);
@@ -219,4 +219,4 @@ export class CdkSelection<T> implements OnInit, AfterContentChecked, CollectionV
 }
 
 type SelectAllState = 'all'|'none'|'partial';
-type TableDataSource<T> = DataSource<T>|Observable<ReadonlyArray<T>|T[]>|ReadonlyArray<T>|T[];
+type TableDataSource<T> = DataSource<T>|Observable<readonly T[]>|readonly T[];

src/cdk/collections/array-data-source.ts

@@ -12,11 +12,11 @@ import {DataSource} from './data-source';
 
 /** DataSource wrapper for a native array. */
 export class ArrayDataSource<T> extends DataSource<T> {
-  constructor(private _data: T[] | ReadonlyArray<T> | Observable<T[] | ReadonlyArray<T>>) {
+  constructor(private _data: readonly T[] | Observable<readonly T[]>) {
     super();
   }
 
-  connect(): Observable<T[] | ReadonlyArray<T>> {
+  connect(): Observable<readonly T[]> {
     return isObservable(this._data) ? this._data : observableOf(this._data);
   }
 

src/cdk/collections/data-source.ts

@@ -18,7 +18,7 @@ export abstract class DataSource<T> {
    *     data source.
    * @returns Observable that emits a new value when the data changes.
    */
-  abstract connect(collectionViewer: CollectionViewer): Observable<T[] | ReadonlyArray<T>>;
+  abstract connect(collectionViewer: CollectionViewer): Observable<readonly T[]>;
 
   /**
    * Disconnects a collection viewer (such as a data-table) from this data source. Can be used

src/cdk/drag-drop/drop-list-ref.ts

@@ -161,10 +161,10 @@ export class DropListRef<T = any> {
   private _previousSwap = {drag: null as DragRef | null, delta: 0, overlaps: false};
 
   /** Draggable items in the container. */
-  private _draggables: ReadonlyArray<DragRef> = [];
+  private _draggables: readonly DragRef[] = [];
 
   /** Drop lists that are connected to the current one. */
-  private _siblings: ReadonlyArray<DropListRef> = [];
+  private _siblings: readonly DropListRef[] = [];
 
   /** Direction in which the list is oriented. */
   private _orientation: 'horizontal' | 'vertical' = 'vertical';
@@ -413,7 +413,7 @@ export class DropListRef<T = any> {
   }
 
   /** Gets the scrollable parents that are registered with this drop container. */
-  getScrollableParents(): ReadonlyArray<HTMLElement> {
+  getScrollableParents(): readonly HTMLElement[] {
     return this._scrollableElements;
   }
 

src/cdk/drag-drop/parent-position-tracker.ts

@@ -31,7 +31,7 @@ export class ParentPositionTracker {
   }
 
   /** Caches the positions. Should be called at the beginning of a drag sequence. */
-  cache(elements: HTMLElement[] | ReadonlyArray<HTMLElement>) {
+  cache(elements: readonly HTMLElement[]) {
     this.clear();
     this.positions.set(this._document, {
       scrollPosition: this._viewportRuler.getViewportScrollPosition(),

src/cdk/schematics/update-tool/utils/decorators.ts

@@ -24,7 +24,7 @@ export interface NgDecorator {
  * (e.g. "@angular/core") from a list of decorators.
  */
 export function getAngularDecorators(
-    typeChecker: ts.TypeChecker, decorators: ReadonlyArray<ts.Decorator>): NgDecorator[] {
+    typeChecker: ts.TypeChecker, decorators: readonly ts.Decorator[]): readonly NgDecorator[] {
   return decorators.map(node => ({node, importData: getCallDecoratorImport(typeChecker, node)}))
       .filter(({importData}) => importData && importData.moduleName.startsWith('@angular/'))
       .map(

src/cdk/scrolling/virtual-for-of.ts

@@ -151,7 +151,7 @@ export class CdkVirtualForOf<T> implements
   }
 
   /** Emits whenever the data in the current DataSource changes. */
-  dataStream: Observable<T[] | ReadonlyArray<T>> = this._dataSourceChanges
+  dataStream: Observable<readonly T[]> = this._dataSourceChanges
   .pipe(
       // Start off with null `DataSource`.
       startWith(null),
@@ -168,7 +168,7 @@ export class CdkVirtualForOf<T> implements
   private _differ: IterableDiffer<T> | null = null;
 
   /** The most recent data emitted from the DataSource. */
-  private _data: T[] | ReadonlyArray<T>;
+  private _data: readonly T[];
 
   /** The currently rendered items. */
   private _renderedItems: T[];
@@ -299,7 +299,7 @@ export class CdkVirtualForOf<T> implements
 
   /** Swap out one `DataSource` for another. */
   private _changeDataSource(oldDs: DataSource<T> | null, newDs: DataSource<T> | null):
-      Observable<T[] | ReadonlyArray<T>> {
+      Observable<readonly T[]> {
 
     if (oldDs) {
       oldDs.disconnect(this);

src/cdk/scrolling/virtual-scroll-repeater.ts

@@ -13,6 +13,6 @@ import {ListRange} from '@angular/cdk/collections';
  * An item to be repeated by the VirtualScrollViewport
  */
 export interface CdkVirtualScrollRepeater<T> {
-  dataStream: Observable<T[] | ReadonlyArray<T>>;
+  dataStream: Observable<readonly T[]>;
   measureRangeSize(range: ListRange, orientation: 'horizontal' | 'vertical'): number;
 }

src/cdk/table/sticky-position-listener.ts

@@ -16,7 +16,7 @@ export type StickySize = number|null|undefined;
 export type StickyOffset = number|null|undefined;
 
 export interface StickyUpdate {
-  elements?: ReadonlyArray<HTMLElement[]|undefined>;
+  elements?: readonly (HTMLElement[]|undefined)[];
   offsets?: StickyOffset[];
   sizes: StickySize[];
 }

src/cdk/table/table.ts

@@ -106,7 +106,7 @@ export interface RowOutlet {
  * @docs-private
  */
 type CdkTableDataSourceInput<T> =
-    DataSource<T>|Observable<ReadonlyArray<T>|T[]>|ReadonlyArray<T>|T[];
+    readonly T[]|DataSource<T>|Observable<readonly T[]>;
 
 /**
  * Provides a handle for the table to grab the view container's ng-container to insert data rows.
@@ -227,7 +227,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
   private _document: Document;
 
   /** Latest data provided by the data source. */
-  protected _data: T[]|ReadonlyArray<T>;
+  protected _data: readonly T[];
 
   /** Subject that emits when the component has been destroyed. */
   private _onDestroy = new Subject<void>();
@@ -953,7 +953,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
       return;
     }
 
-    let dataStream: Observable<T[]|ReadonlyArray<T>>|undefined;
+    let dataStream: Observable<readonly T[]>|undefined;
 
     if (isDataSource(this.dataSource)) {
       dataStream = this.dataSource.connect(this);

src/cdk/tree/tree.ts

@@ -200,7 +200,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
 
   /** Set up a subscription for the data provided by the data source. */
   private _observeRenderChanges() {
-    let dataStream: Observable<T[] | ReadonlyArray<T>> | undefined;
+    let dataStream: Observable<readonly T[]> | undefined;
 
     if (isDataSource(this._dataSource)) {
       dataStream = this._dataSource.connect(this);
@@ -219,7 +219,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, CollectionViewer,
   }
 
   /** Check for changes made in the data and render each change (node added/removed/moved). */
-  renderNodeChanges(data: T[] | ReadonlyArray<T>, dataDiffer: IterableDiffer<T> = this._dataDiffer,
+  renderNodeChanges(data: readonly T[], dataDiffer: IterableDiffer<T> = this._dataDiffer,
                     viewContainer: ViewContainerRef = this._nodeOutlet.viewContainer,
                     parentData?: T) {
     const changes = dataDiffer.diff(data);

src/components-examples/material/chips/chips-input/chips-input-example.ts

@@ -19,7 +19,7 @@ export class ChipsInputExample {
   selectable = true;
   removable = true;
   addOnBlur = true;
-  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  readonly separatorKeysCodes = [ENTER, COMMA] as const;
   fruits: Fruit[] = [
     {name: 'Lemon'},
     {name: 'Lime'},

src/material-experimental/column-resize/column-resize.spec.ts

@@ -2,7 +2,6 @@ import {
   Component,
   Directive,
   ElementRef,
-  Type,
   ViewChild,
   ChangeDetectionStrategy,
 } from '@angular/core';
@@ -322,7 +321,7 @@ const approximateMatcher = {
   })
 };
 
-const testCases: ReadonlyArray<[Type<object>, Type<BaseTestComponent>, string]> = [
+const testCases = [
   [MatColumnResizeModule, MatResizeTest, 'opt-in table-based mat-table'],
   [MatColumnResizeModule, MatResizeOnPushTest, 'inside OnPush component'],
   [MatColumnResizeModule, MatResizeFlexTest, 'opt-in flex-based mat-table'],
@@ -342,7 +341,7 @@ const testCases: ReadonlyArray<[Type<object>, Type<BaseTestComponent>, string]>
     MatDefaultEnabledColumnResizeModule, MatResizeDefaultFlexRtlTest,
     'default enabled rtl flex-based mat-table'
   ],
-];
+] as const;
 
 describe('Material Popover Edit', () => {
   for (const [resizeModule, componentClass, label] of testCases) {

src/material-experimental/popover-edit/popover-edit.spec.ts

@@ -3,7 +3,7 @@ import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/k
 import {MatTableModule} from '@angular/material/table';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {CommonModule} from '@angular/common';
-import {Component, Directive, ElementRef, Type, ViewChild} from '@angular/core';
+import {Component, Directive, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick, inject} from '@angular/core/testing';
 import {FormsModule, NgForm} from '@angular/forms';
 import {OverlayContainer} from '@angular/cdk/overlay';
@@ -282,10 +282,10 @@ class MatTableInCell extends BaseTestComponent {
   dataSource = new ElementDataSource();
 }
 
-const testCases: ReadonlyArray<[Type<BaseTestComponent>, string]> = [
+const testCases = [
   [MatFlexTableInCell, 'Flex mat-table; edit defined within cell'],
   [MatTableInCell, 'Table mat-table; edit defined within cell'],
-];
+] as const;
 
 describe('Material Popover Edit', () => {
   for (const [componentClass, label] of testCases) {

src/material/tooltip/tooltip.ts

@@ -660,7 +660,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
   }
 
   private _addListeners(
-      listeners: ReadonlyArray<readonly [string, EventListenerOrEventListenerObject]>) {
+      listeners: (readonly [string, EventListenerOrEventListenerObject])[]) {
     listeners.forEach(([event, listener]) => {
       this._elementRef.nativeElement.addEventListener(event, listener, passiveListenerOptions);
     });

tools/public_api_guard/cdk/collections.d.ts

@@ -46,8 +46,8 @@ export declare const enum _ViewRepeaterOperation {
 }
 
 export declare class ArrayDataSource<T> extends DataSource<T> {
-    constructor(_data: T[] | ReadonlyArray<T> | Observable<T[] | ReadonlyArray<T>>);
-    connect(): Observable<T[] | ReadonlyArray<T>>;
+    constructor(_data: readonly T[] | Observable<readonly T[]>);
+    connect(): Observable<readonly T[]>;
     disconnect(): void;
 }
 
@@ -56,7 +56,7 @@ export interface CollectionViewer {
 }
 
 export declare abstract class DataSource<T> {
-    abstract connect(collectionViewer: CollectionViewer): Observable<T[] | ReadonlyArray<T>>;
+    abstract connect(collectionViewer: CollectionViewer): Observable<readonly T[]>;
     abstract disconnect(collectionViewer: CollectionViewer): void;
 }
 

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -406,7 +406,7 @@ export declare class DropListRef<T = any> {
     enter(item: DragRef, pointerX: number, pointerY: number, index?: number): void;
     exit(item: DragRef): void;
     getItemIndex(item: DragRef): number;
-    getScrollableParents(): ReadonlyArray<HTMLElement>;
+    getScrollableParents(): readonly HTMLElement[];
     isDragging(): boolean;
     isReceiving(): boolean;
     start(): void;

tools/public_api_guard/cdk/scrolling.d.ts

@@ -84,7 +84,7 @@ export declare class CdkVirtualForOf<T> implements CdkVirtualScrollRepeater<T>,
     set cdkVirtualForTemplateCacheSize(size: number);
     get cdkVirtualForTrackBy(): TrackByFunction<T> | undefined;
     set cdkVirtualForTrackBy(fn: TrackByFunction<T> | undefined);
-    dataStream: Observable<T[] | ReadonlyArray<T>>;
+    dataStream: Observable<readonly T[]>;
     viewChange: Subject<ListRange>;
     constructor(
     _viewContainerRef: ViewContainerRef,
@@ -112,7 +112,7 @@ export declare type CdkVirtualForOfContext<T> = {
 };
 
 export interface CdkVirtualScrollRepeater<T> {
-    dataStream: Observable<T[] | ReadonlyArray<T>>;
+    dataStream: Observable<readonly T[]>;
     measureRangeSize(range: ListRange, orientation: 'horizontal' | 'vertical'): number;
 }
 

tools/public_api_guard/cdk/table.d.ts

@@ -198,7 +198,7 @@ export declare class CdkTable<T> implements AfterContentChecked, CollectionViewe
     _contentFooterRowDefs: QueryList<CdkFooterRowDef>;
     _contentHeaderRowDefs: QueryList<CdkHeaderRowDef>;
     _contentRowDefs: QueryList<CdkRowDef<T>>;
-    protected _data: T[] | ReadonlyArray<T>;
+    protected _data: readonly T[];
     protected readonly _differs: IterableDiffers;
     protected readonly _dir: Directionality;
     protected readonly _elementRef: ElementRef;
@@ -361,7 +361,7 @@ export declare class StickyStyler {
 }
 
 export interface StickyUpdate {
-    elements?: ReadonlyArray<HTMLElement[] | undefined>;
+    elements?: readonly (HTMLElement[] | undefined)[];
     offsets?: StickyOffset[];
     sizes: StickySize[];
 }

tools/public_api_guard/cdk/tree.d.ts

@@ -54,7 +54,7 @@ export declare class CdkTree<T, K = T> implements AfterContentChecked, Collectio
     ngAfterContentChecked(): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
-    renderNodeChanges(data: T[] | ReadonlyArray<T>, dataDiffer?: IterableDiffer<T>, viewContainer?: ViewContainerRef, parentData?: T): void;
+    renderNodeChanges(data: readonly T[], dataDiffer?: IterableDiffer<T>, viewContainer?: ViewContainerRef, parentData?: T): void;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<CdkTree<any, any>, "cdk-tree", ["cdkTree"], { "dataSource": "dataSource"; "treeControl": "treeControl"; "trackBy": "trackBy"; }, {}, ["_nodeDefs"], never>;
     static ɵfac: i0.ɵɵFactoryDef<CdkTree<any, any>, never>;
 }

tslint.json

@@ -8,6 +8,13 @@
     "node_modules/codelyzer"
   ],
   "rules": {
+    "ban-types": [
+      true,
+      [
+        "ReadonlyArray<.+>",
+        "Use 'readonly T[]' instead."
+      ]
+    ],
     "max-line-length": [true, {
       "limit": 100,
       "check-strings": true,