feat: add support for TypeScript 4.0 (#20368)

With this change we refactor the code to support compilation using TS 4.0.

1) Refactor tests to not delete non optional properties
2) Refactor components not to override properties with accessors and vice-versa which is now not permitted. https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/#breaking-changes
3) update typescript to 4.0, tslint to 6.1.3 and angular packages to 10.1.0-next.8
4) add ts-compat integration test for TypeScript 3.9

Author: alan-agius4

integration/ts-compat/BUILD.bazel

@@ -13,6 +13,7 @@ write_file(
 # List of TypeScript packages that we want to run the compatibility test against.
 # The list contains NPM module names that resolve to the desired TypeScript version.
 typescript_version_packages = [
+    "typescript-3.9",
     "typescript",
 ]
 

package.json

@@ -49,13 +49,13 @@
   },
   "version": "10.2.0-next.0",
   "dependencies": {
-    "@angular/animations": "^10.0.8",
-    "@angular/common": "^10.0.8",
-    "@angular/compiler": "^10.0.8",
-    "@angular/core": "^10.0.8",
-    "@angular/elements": "^10.0.8",
-    "@angular/forms": "^10.0.8",
-    "@angular/platform-browser": "^10.0.8",
+    "@angular/animations": "^10.1.0-next.8",
+    "@angular/common": "^10.1.0-next.8",
+    "@angular/compiler": "^10.1.0-next.8",
+    "@angular/core": "^10.1.0-next.8",
+    "@angular/elements": "^10.1.0-next.8",
+    "@angular/forms": "^10.1.0-next.8",
+    "@angular/platform-browser": "^10.1.0-next.8",
     "@types/googlemaps": "^3.39.3",
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
@@ -71,13 +71,13 @@
     "@angular-devkit/build-optimizer": "^0.1000.5",
     "@angular-devkit/core": "^10.0.5",
     "@angular-devkit/schematics": "^10.0.5",
-    "@angular/bazel": "^10.0.8",
+    "@angular/bazel": "^10.1.0-next.8",
     "@angular/benchpress": "^0.2.1",
-    "@angular/compiler-cli": "^10.0.8",
+    "@angular/compiler-cli": "^10.1.0-next.8",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#d0855af987db4e426477da1780bcd02941c31271",
-    "@angular/platform-browser-dynamic": "^10.0.8",
-    "@angular/platform-server": "^10.0.8",
-    "@angular/router": "^10.0.8",
+    "@angular/platform-browser-dynamic": "^10.1.0-next.8",
+    "@angular/platform-server": "^10.1.0-next.8",
+    "@angular/router": "^10.1.0-next.8",
     "@bazel/bazelisk": "^1.4.0",
     "@bazel/buildifier": "^2.2.1",
     "@bazel/ibazel": "^0.13.0",
@@ -165,14 +165,15 @@
     "ts-api-guardian": "^0.5.0",
     "ts-node": "^8.10.1",
     "tsickle": "0.38.1",
-    "tslint": "^6.1.0",
+    "tslint": "^6.1.3",
     "tsutils": "^3.17.1",
-    "typescript": "3.9.7",
+    "typescript": "4.0.2",
+    "typescript-3.9": "npm:typescript@~3.9.7",
     "vrsource-tslint-rules": "5.1.1",
     "yaml": "^1.10.0"
   },
   "resolutions": {
-    "dgeni-packages/typescript": "3.9.7",
+    "dgeni-packages/typescript": "4.0.2",
     "**/graceful-fs": "4.2.2"
   }
 }

src/cdk-experimental/selection/row-selection.ts

@@ -31,7 +31,7 @@ export class CdkRowSelection<T> {
   @Input('cdkRowSelectionIndex')
   get index(): number|undefined { return this._index; }
   set index(index: number|undefined) { this._index = coerceNumberProperty(index); }
-  private _index?: number;
+  protected _index?: number;
 
   constructor(readonly _selection: CdkSelection<T>) {}
 

src/cdk-experimental/selection/selection-toggle.ts

@@ -44,7 +44,7 @@ export class CdkSelectionToggle<T> implements OnDestroy, OnInit {
   @Input('cdkSelectionToggleIndex')
   get index(): number|undefined { return this._index; }
   set index(index: number|undefined) { this._index = coerceNumberProperty(index); }
-  private _index?: number;
+  protected _index?: number;
 
   /** The checked state of the selection toggle */
   readonly checked: Observable<boolean> = this._selection.change.pipe(

src/cdk-experimental/selection/selection.ts

@@ -57,7 +57,7 @@ export class CdkSelection<T> implements OnInit, AfterContentChecked, CollectionV
   set multiple(multiple: boolean) {
     this._multiple = coerceBooleanProperty(multiple);
   }
-  private _multiple: boolean;
+  protected _multiple: boolean;
 
   /** Emits when selection changes. */
   @Output('cdkSelectionChange') change = new EventEmitter<SelectionChange<T>>();