refactor(multiple): enable noImplicitOverride typescript option (#22830)

* refactor(multiple): enable `noImplicitOverride` typescript option

Enables the TypeScript `noImplicitOverride` option and adds
the `override` keyword where needed.

* build: add yarn script alias for tsc

Adds a `yarn run` alias for the `tsc` binary. Since we have
multiple versions of TypeScript installed, Yarn can pick
another version (e.g. from `typescript-4.2`) for linking
the `tsc` binary. This is unexpected because `yarn tsc` should
resolve to the TypeScript version that is not installed through
a Yarn alias. Changing the order in the Yarn lock file does not
help, and it seems expected in the context of Yarn which does not
know which package (regardless of alias or not) to prefer.

Author: devversion

package.json

@@ -50,6 +50,7 @@
     "check-mdc-tests": "ts-node --project scripts/tsconfig.json scripts/check-mdc-tests.ts",
     "check-mdc-exports": "ts-node --project scripts/tsconfig.json scripts/check-mdc-exports.ts",
     "check-tools": "yarn tsc --project tools/tsconfig-ci.json",
+    "tsc": "node ./node_modules/typescript/bin/tsc",
     "prepare": "husky install"
   },
   "version": "12.2.0-next.0",

src/bazel-tsconfig-build.json

@@ -14,6 +14,7 @@
     "strictNullChecks": true,
     "noImplicitReturns": true,
     "strictFunctionTypes": true,
+    "noImplicitOverride": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
     "noImplicitThis": true,

src/cdk-experimental/dialog/dialog-container.ts

@@ -196,7 +196,7 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
    * @deprecated To be turned into a method.
    * @breaking-change 10.0.0
    */
-  attachDomPortal = (portal: DomPortal) => {
+  override attachDomPortal = (portal: DomPortal) => {
     if (this._portalHost.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       throwDialogContentAlreadyAttachedError();
     }

src/cdk-experimental/menu/menu-bar.ts

@@ -86,7 +86,7 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit,
     super();
   }
 
-  ngAfterContentInit() {
+  override ngAfterContentInit() {
     super.ngAfterContentInit();
 
     this._setKeyManager();
@@ -287,7 +287,7 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit,
     return !!this._openItem;
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
     super.ngOnDestroy();
 
     this._destroyed.next();

src/cdk-experimental/menu/menu-item-checkbox.ts

@@ -31,7 +31,7 @@ import {CdkMenuItem} from './menu-item';
 })
 export class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
   /** Toggle the checked state of the checkbox. */
-  trigger() {
+  override trigger() {
     super.trigger();
 
     if (!this.disabled) {

src/cdk-experimental/menu/menu-item-radio.ts

@@ -63,15 +63,15 @@ export class CdkMenuItemRadio extends CdkMenuItemSelectable implements OnDestroy
   }
 
   /** Toggles the checked state of the radio-button. */
-  trigger() {
+  override trigger() {
     super.trigger();
 
     if (!this.disabled) {
       this._selectionDispatcher.notify(this.id, this.name);
     }
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
     super.ngOnDestroy();
     this._removeDispatcherListener();
   }

src/cdk-experimental/menu/menu-item-selectable.ts

@@ -40,7 +40,7 @@ export abstract class CdkMenuItemSelectable extends CdkMenuItem {
   @Input() id: string = `cdk-selectable-item-${nextId++}`;
 
   /** If the element is not disabled emit the click event */
-  trigger() {
+  override trigger() {
     if (!this.disabled) {
       this.toggled.next(this);
     }

src/cdk-experimental/menu/menu-stack.ts

@@ -130,5 +130,5 @@ export class MenuStack {
 /** NoopMenuStack is a placeholder MenuStack used for inline menus. */
 export class NoopMenuStack extends MenuStack {
   /** Noop push - does not add elements to the MenuStack. */
-  push(_: MenuStackItem) {}
+  override push(_: MenuStackItem) {}
 }

src/cdk-experimental/menu/menu.ts

@@ -124,7 +124,7 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
     this._registerWithParentPanel();
   }
 
-  ngAfterContentInit() {
+  override ngAfterContentInit() {
     super.ngAfterContentInit();
 
     this._completeChangeEmitter();
@@ -348,7 +348,7 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
     return this._menuStack instanceof NoopMenuStack;
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
     this._emitClosedEvent();
     this._pointerTracker?.destroy();
   }

src/cdk-experimental/popover-edit/table-directives.ts

@@ -362,15 +362,15 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   inputs: POPOVER_EDIT_INPUTS,
 })
 export class CdkPopoverEditTabOut<C> extends CdkPopoverEdit<C> {
-  protected focusTrap?: FocusEscapeNotifier;
+  protected override focusTrap?: FocusEscapeNotifier;
 
   constructor(
       elementRef: ElementRef, viewContainerRef: ViewContainerRef, services: EditServices,
       protected readonly focusEscapeNotifierFactory: FocusEscapeNotifierFactory) {
     super(services, elementRef, viewContainerRef);
   }
 
-  protected initFocusTrap(): void {
+  protected override initFocusTrap(): void {
     this.focusTrap = this.focusEscapeNotifierFactory.create(this.overlayRef!.overlayElement);
 
     this.focusTrap.escapes().pipe(takeUntil(this.destroyed)).subscribe(direction => {

src/cdk/a11y/focus-trap/configurable-focus-trap.ts

@@ -21,8 +21,8 @@ import {ConfigurableFocusTrapConfig} from './configurable-focus-trap-config';
  */
 export class ConfigurableFocusTrap extends FocusTrap implements ManagedFocusTrap {
   /** Whether the FocusTrap is enabled. */
-  get enabled(): boolean { return this._enabled; }
-  set enabled(value: boolean) {
+  override get enabled(): boolean { return this._enabled; }
+  override set enabled(value: boolean) {
     this._enabled = value;
     if (this._enabled) {
       this._focusTrapManager.register(this);
@@ -44,7 +44,7 @@ export class ConfigurableFocusTrap extends FocusTrap implements ManagedFocusTrap
   }
 
   /** Notifies the FocusTrapManager that this FocusTrap will be destroyed. */
-  destroy() {
+  override destroy() {
     this._focusTrapManager.deregister(this);
     super.destroy();
   }

src/cdk/a11y/key-manager/activedescendant-key-manager.ts

@@ -29,17 +29,17 @@ export class ActiveDescendantKeyManager<T> extends ListKeyManager<Highlightable
    * from the previously active item.
    * @param index Index of the item to be set as active.
    */
-  setActiveItem(index: number): void;
+  override setActiveItem(index: number): void;
 
   /**
    * Sets the active item to the item to the specified one and adds the
    * active styles to the it. Also removes active styles from the
    * previously active item.
    * @param item Item to be set as active.
    */
-  setActiveItem(item: T): void;
+  override setActiveItem(item: T): void;
 
-  setActiveItem(index: any): void {
+  override setActiveItem(index: any): void {
     if (this.activeItem) {
       this.activeItem.setInactiveStyles();
     }

src/cdk/a11y/key-manager/focus-key-manager.ts

@@ -36,15 +36,15 @@ export class FocusKeyManager<T> extends ListKeyManager<FocusableOption & T> {
    * index and focuses the newly active item.
    * @param index Index of the item to be set as active.
    */
-  setActiveItem(index: number): void;
+  override setActiveItem(index: number): void;
 
   /**
    * Sets the active item to the item that is specified and focuses it.
    * @param item Item to be set as active.
    */
-  setActiveItem(item: T): void;
+  override setActiveItem(item: T): void;
 
-  setActiveItem(item: any): void {
+  override setActiveItem(item: any): void {
     super.setActiveItem(item);
 
     if (this.activeItem) {

src/cdk/drag-drop/directives/drag.spec.ts

@@ -6601,7 +6601,7 @@ class DraggableWithCanvasInDropZone extends DraggableInDropZone implements After
     super(elementRef);
   }
 
-  ngAfterViewInit() {
+  override ngAfterViewInit() {
     super.ngAfterViewInit();
     const canvases = this._elementRef.nativeElement.querySelectorAll('canvas');
 

src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.ts

@@ -25,7 +25,7 @@ export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
   }
 
   /** Add a new overlay to the list of attached overlay refs. */
-  add(overlayRef: OverlayReference): void {
+  override add(overlayRef: OverlayReference): void {
     super.add(overlayRef);
 
     // Lazily start dispatcher once first overlay is added

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts

@@ -27,7 +27,7 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
   }
 
   /** Add a new overlay to the list of attached overlay refs. */
-  add(overlayRef: OverlayReference): void {
+  override add(overlayRef: OverlayReference): void {
     super.add(overlayRef);
 
     // Safari on iOS does not generate click events for non-interactive

src/cdk/overlay/fullscreen-overlay-container.ts

@@ -28,15 +28,15 @@ export class FullscreenOverlayContainer extends OverlayContainer implements OnDe
     super(_document, platform);
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
     super.ngOnDestroy();
 
     if (this._fullScreenEventName && this._fullScreenListener) {
       this._document.removeEventListener(this._fullScreenEventName, this._fullScreenListener);
     }
   }
 
-  protected _createContainer(): void {
+  protected override _createContainer(): void {
     super._createContainer();
     this._adjustParentForFullscreenChange();
     this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());

src/cdk/overlay/overlay.spec.ts

@@ -337,7 +337,7 @@ describe('Overlay', () => {
     class CustomErrorHandler extends ErrorHandler {
       constructor(private _overlay: Overlay) { super(); }
 
-      handleError(error: any) {
+      override handleError(error: any) {
         const overlayRef = this._overlay.create({hasBackdrop: !!error});
         overlayRef.dispose();
       }

src/cdk/portal/dom-portal-outlet.ts

@@ -115,7 +115,7 @@ export class DomPortalOutlet extends BasePortalOutlet {
    * @deprecated To be turned into a method.
    * @breaking-change 10.0.0
    */
-  attachDomPortal = (portal: DomPortal) => {
+  override attachDomPortal = (portal: DomPortal) => {
     // @breaking-change 10.0.0 Remove check and error once the
     // `_document` constructor parameter is required.
     if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) {
@@ -146,7 +146,7 @@ export class DomPortalOutlet extends BasePortalOutlet {
   /**
    * Clears out a portal from the DOM.
    */
-  dispose(): void {
+  override dispose(): void {
     super.dispose();
     if (this.outletElement.parentNode != null) {
       this.outletElement.parentNode.removeChild(this.outletElement);

src/cdk/portal/portal-directives.ts

@@ -195,7 +195,7 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
    * @deprecated To be turned into a method.
    * @breaking-change 10.0.0
    */
-  attachDomPortal = (portal: DomPortal) => {
+  override attachDomPortal = (portal: DomPortal) => {
     // @breaking-change 9.0.0 Remove check and error once the
     // `_document` constructor parameter is required.
     if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) {

src/cdk/portal/portal.ts

@@ -144,12 +144,12 @@ export class TemplatePortal<C = any> extends Portal<EmbeddedViewRef<C>> {
    * When a context is provided it will override the `context` property of the `TemplatePortal`
    * instance.
    */
-  attach(host: PortalOutlet, context: C | undefined = this.context): EmbeddedViewRef<C> {
+  override attach(host: PortalOutlet, context: C | undefined = this.context): EmbeddedViewRef<C> {
     this.context = context;
     return super.attach(host);
   }
 
-  detach(): void {
+  override detach(): void {
     this.context = undefined;
     return super.detach();
   }

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

@@ -166,7 +166,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
   /** Subscription to changes in the viewport size. */
   private _viewportChanges = Subscription.EMPTY;
 
-  constructor(public elementRef: ElementRef<HTMLElement>,
+  constructor(public override elementRef: ElementRef<HTMLElement>,
               private _changeDetectorRef: ChangeDetectorRef,
               ngZone: NgZone,
               @Optional() @Inject(VIRTUAL_SCROLL_STRATEGY)
@@ -185,7 +185,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
     });
   }
 
-  ngOnInit() {
+  override ngOnInit() {
     super.ngOnInit();
 
     // It's still too early to measure the viewport at this point. Deferring with a promise allows
@@ -210,7 +210,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
     }));
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
     this.detach();
     this._scrollStrategy.detach();
 
@@ -367,7 +367,8 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
    * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
    *     in horizontal mode.
    */
-  measureScrollOffset(from?: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number {
+  override measureScrollOffset(
+      from?: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number {
     return from ?
       super.measureScrollOffset(from) :
       super.measureScrollOffset(this.orientation === 'horizontal' ? 'start' : 'top');

src/cdk/table/row.ts

@@ -104,7 +104,7 @@ export class CdkHeaderRowDef extends _CdkHeaderRowDefBase implements CanStick, O
 
   // Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
   // Explicitly define it so that the method is called as part of the Angular lifecycle.
-  ngOnChanges(changes: SimpleChanges): void {
+  override ngOnChanges(changes: SimpleChanges): void {
     super.ngOnChanges(changes);
   }
 
@@ -135,7 +135,7 @@ export class CdkFooterRowDef extends _CdkFooterRowDefBase implements CanStick, O
 
   // Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
   // Explicitly define it so that the method is called as part of the Angular lifecycle.
-  ngOnChanges(changes: SimpleChanges): void {
+  override ngOnChanges(changes: SimpleChanges): void {
     super.ngOnChanges(changes);
   }
 

src/cdk/testing/private/mock-ng-zone.ts

@@ -18,17 +18,17 @@ import {EventEmitter, Injectable, NgZone} from '@angular/core';
  */
 @Injectable()
 export class MockNgZone extends NgZone {
-  readonly onStable = new EventEmitter(false);
+  override readonly onStable = new EventEmitter(false);
 
   constructor() {
     super({enableLongStackTrace: false});
   }
 
-  run(fn: Function): any {
+  override run(fn: Function): any {
     return fn();
   }
 
-  runOutsideAngular(fn: Function): any {
+  override runOutsideAngular(fn: Function): any {
     return fn();
   }
 

src/cdk/testing/tests/harnesses/sub-component-harness.ts

@@ -41,5 +41,5 @@ export class SubComponentHarness extends ComponentHarness {
 }
 
 export class SubComponentSpecialHarness extends SubComponentHarness {
-  static readonly hostSelector = 'test-sub.test-special';
+  static override readonly hostSelector = 'test-sub.test-special';
 }

src/cdk/tree/control/flat-tree-control.ts

@@ -18,7 +18,8 @@ export class FlatTreeControl<T, K = T> extends BaseTreeControl<T, K> {
 
   /** Construct with flat tree data node functions getLevel and isExpandable. */
   constructor(
-      public getLevel: (dataNode: T) => number, public isExpandable: (dataNode: T) => boolean,
+      public override getLevel: (dataNode: T) => number,
+      public override isExpandable: (dataNode: T) => boolean,
       public options?: FlatTreeControlOptions<T, K>) {
     super();
 

src/cdk/tree/control/nested-tree-control.ts

@@ -18,7 +18,7 @@ export interface NestedTreeControlOptions<T, K> {
 export class NestedTreeControl<T, K = T> extends BaseTreeControl<T, K> {
   /** Construct with nested tree function getChildren. */
   constructor(
-      public getChildren: (dataNode: T) => (Observable<T[]>| T[] | undefined | null),
+      public override getChildren: (dataNode: T) => (Observable<T[]>| T[] | undefined | null),
       public options?: NestedTreeControlOptions<T, K>) {
     super();