build: update to typescript 3.9 (#19286)

The Framework team is in the process of updating to TS 3.9 (see angular/angular#36989) which means that soon we'll have to switch to it as well. These changes update us to the latest RC and resolve all of the build issues so that we can quickly switch to the final version once it's available.

Author: crisbeto

integration/ts-compat/BUILD.bazel

@@ -15,6 +15,7 @@ write_file(
 typescript_version_packages = [
     "typescript-3.6",
     "typescript-3.7",
+    "typescript-3.8",
     "typescript",
 ]
 

package.json

@@ -161,9 +161,10 @@
     "tsickle": "0.38.1",
     "tslint": "^6.1.0",
     "tsutils": "^3.0.0",
-    "typescript": "~3.8.3",
+    "typescript": "3.9.1-rc",
     "typescript-3.6": "npm:typescript@~3.6.4",
     "typescript-3.7": "npm:typescript@~3.7.0",
+    "typescript-3.8": "npm:typescript@~3.8.0",
     "vrsource-tslint-rules": "5.1.1",
     "yaml": "^1.7.2",
     "yargs": "15.3.0"

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

@@ -164,7 +164,7 @@ export class DragRef<T = any> {
    * Inline style value of `-webkit-tap-highlight-color` at the time the
    * dragging was started. Used to restore the value once we're done dragging.
    */
-  private _rootElementTapHighlight: string | null;
+  private _rootElementTapHighlight: string;
 
   /** Subscription to pointer movement events. */
   private _pointerMoveSubscription = Subscription.EMPTY;
@@ -772,7 +772,7 @@ export class DragRef<T = any> {
     // otherwise iOS will still add it, even though all the drag interactions on the handle
     // are disabled.
     if (this._handles.length) {
-      this._rootElementTapHighlight = rootElement.style.webkitTapHighlightColor;
+      this._rootElementTapHighlight = rootElement.style.webkitTapHighlightColor || '';
       rootElement.style.webkitTapHighlightColor = 'transparent';
     }
 

src/cdk/drag-drop/drag-styling.ts

@@ -16,9 +16,12 @@ type Writeable<T> = { -readonly [P in keyof T]-?: T[P] };
  * Extended CSSStyleDeclaration that includes a couple of drag-related
  * properties that aren't in the built-in TS typings.
  */
-interface DragCSSStyleDeclaration extends CSSStyleDeclaration {
+export interface DragCSSStyleDeclaration extends CSSStyleDeclaration {
   webkitUserDrag: string;
   MozUserSelect: string; // For some reason the Firefox property is in PascalCase.
+  msScrollSnapType: string;
+  scrollSnapType: string;
+  msUserSelect: string;
 }
 
 /**

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

@@ -23,6 +23,7 @@ import {
   isInsideClientRect,
 } from './client-rect';
 import {ParentPositionTracker} from './parent-position-tracker';
+import {DragCSSStyleDeclaration} from './drag-styling';
 
 /**
  * Proximity, as a ratio to width/height, at which a
@@ -235,15 +236,15 @@ export class DropListRef<T = any> {
 
   /** Starts dragging an item. */
   start(): void {
-    const styles = coerceElement(this.element).style;
+    const styles = coerceElement(this.element).style as DragCSSStyleDeclaration;
     this.beforeStarted.next();
     this._isDragging = true;
 
     // We need to disable scroll snapping while the user is dragging, because it breaks automatic
     // scrolling. The browser seems to round the value based on the snapping points which means
     // that we can't increment/decrement the scroll position.
-    this._initialScrollSnap = styles.msScrollSnapType || (styles as any).scrollSnapType || '';
-    (styles as any).scrollSnapType = styles.msScrollSnapType = 'none';
+    this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || '';
+    styles.scrollSnapType = styles.msScrollSnapType = 'none';
     this._cacheItems();
     this._siblings.forEach(sibling => sibling._startReceiving(this));
     this._viewportScrollSubscription.unsubscribe();
@@ -629,8 +630,8 @@ export class DropListRef<T = any> {
   private _reset() {
     this._isDragging = false;
 
-    const styles = coerceElement(this.element).style;
-    (styles as any).scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
+    const styles = coerceElement(this.element).style as DragCSSStyleDeclaration;
+    styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
 
     // TODO(crisbeto): may have to wait for the animations to finish.
     this._activeDraggables.forEach(item => {

src/material/tooltip/tooltip.spec.ts

@@ -1018,12 +1018,12 @@ describe('MatTooltip', () => {
 
       expect(inputStyle.userSelect).toBeFalsy();
       expect(inputStyle.webkitUserSelect).toBeFalsy();
-      expect(inputStyle.msUserSelect).toBeFalsy();
+      expect((inputStyle as any).msUserSelect).toBeFalsy();
       expect((inputStyle as any).MozUserSelect).toBeFalsy();
 
       expect(textareaStyle.userSelect).toBeFalsy();
       expect(textareaStyle.webkitUserSelect).toBeFalsy();
-      expect(textareaStyle.msUserSelect).toBeFalsy();
+      expect((textareaStyle as any).msUserSelect).toBeFalsy();
       expect((textareaStyle as any).MozUserSelect).toBeFalsy();
     });
 
@@ -1034,10 +1034,11 @@ describe('MatTooltip', () => {
 
       const inputStyle = fixture.componentInstance.input.nativeElement.style;
       const inputUserSelect = inputStyle.userSelect || inputStyle.webkitUserSelect ||
-                              inputStyle.msUserSelect || (inputStyle as any).MozUserSelect;
+                              (inputStyle as any).msUserSelect || (inputStyle as any).MozUserSelect;
       const textareaStyle = fixture.componentInstance.textarea.nativeElement.style;
       const textareaUserSelect = textareaStyle.userSelect || textareaStyle.webkitUserSelect ||
-                                 textareaStyle.msUserSelect || (textareaStyle as any).MozUserSelect;
+                                 (textareaStyle as any).msUserSelect ||
+                                 (textareaStyle as any).MozUserSelect;
 
       expect(inputUserSelect).toBe('none');
       expect(textareaUserSelect).toBe('none');

src/material/tooltip/tooltip.ts

@@ -589,7 +589,7 @@ export class MatTooltip implements OnDestroy, OnInit {
       // If gestures are set to `auto`, we don't disable text selection on inputs and
       // textareas, because it prevents the user from typing into them on iOS Safari.
       if (gestures === 'on' || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA')) {
-        style.userSelect = style.msUserSelect = style.webkitUserSelect =
+        style.userSelect = (style as any).msUserSelect = style.webkitUserSelect =
             (style as any).MozUserSelect = 'none';
       }
 

tools/tslint-rules/tsLoaderRule.js

@@ -3,9 +3,7 @@ const Lint = require('tslint');
 
 // Custom rule that registers all of the custom rules, written in TypeScript, with ts-node.
 // This is necessary, because `tslint` and IDEs won't execute any rules that aren't in a .js file.
-require('ts-node').register({
-  project: path.join(__dirname, '../gulp/tsconfig.json')
-});
+require('ts-node').register({project: path.join(__dirname, './tsconfig.json')});
 
 // Add a noop rule so tslint doesn't complain.
 exports.Rule = class Rule extends Lint.Rules.AbstractRule {

tools/tslint-rules/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "baseUrl": ".",
+    "paths": {
+      // TODO(crisbeto): at the time of writing, tslint is locked to TS 3.8 which causes compilation
+      // errors in our custom rules. We should remove this alias once tslint is updated to TS 3.9.
+      "typescript": ["../../node_modules/typescript-3.8"]
+    }
+  }
+}

yarn.lock

@@ -11725,11 +11725,16 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
   integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==
 
-typescript@3.8.3, typescript@^3.2.2, typescript@~3.8.3:
+"typescript-3.8@npm:typescript@~3.8.0", typescript@3.8.3, typescript@^3.2.2:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
   integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
+typescript@3.9.1-rc:
+  version "3.9.1-rc"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.1-rc.tgz#81d5a5a0a597e224b6e2af8dffb46524b2eaf5f3"
+  integrity sha512-+cPv8L2Vd4KidCotqi2wjegBZ5n47CDRUu/QiLVu2YbeXAz78hIfcai9ziBiNI6JTGTVwUqXRug2UZxDcxhvFw==
+
 typescript@^3.0.3, typescript@^3.4.5, typescript@~3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"