build: update to TypeScript 5.0 (#26755)

Updates the repo to TypeScript 5 and resolves some errors that came up along the way. The most notable one is that none of the Codelyzer lint rules work anymore, because they depended upon deprecated APIs that have been deleted. I decided to reimplement the rule that asserts that lifecycle hook interfaces are present, but the remaining rules didn't seem that useful so I've removed them.

Author: crisbeto

integration/yarn-pnp-compat/.yarn/releases/yarn-3.3.1.cjs

@@ -1,3 +1,3 @@
 nodeLinker: pnp
 
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

integration/yarn-pnp-compat/.yarn/releases/yarn-3.4.1.cjs

@@ -3,7 +3,14 @@ load("//tools:defaults.bzl", "node_integration_test")
 load("//tools:integration.bzl", "CLI_PROJECT_MAPPINGS")
 
 npmPackageMappings = dicts.add(
-    CLI_PROJECT_MAPPINGS,
+    dicts.omit(
+        CLI_PROJECT_MAPPINGS,
+        # Exclude typescript, because Yarn PnP hasn't been updated to support versions 5.0+ yet.
+        [
+            "@npm//:typescript_archive",
+            "typescript",
+        ],
+    ),
     {
         "//src/cdk:npm_package_archive": "@angular/cdk",
         "//src/material:npm_package_archive": "@angular/material",

integration/yarn-pnp-compat/.yarnrc.yml

@@ -37,7 +37,7 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "file:../../node_modules/typescript"
+    "typescript": "~4.9.3"
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@3.4.1"
 }

integration/yarn-pnp-compat/BUILD.bazel

@@ -9696,23 +9696,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@file:../../node_modules/typescript::locator=yarn-pnp-compat%40workspace%3A.":
-  version: 4.9.4
-  resolution: "typescript@file:../../node_modules/typescript#../../node_modules/typescript::hash=7421fa&locator=yarn-pnp-compat%40workspace%3A."
+"typescript@npm:~4.9.3":
+  version: 4.9.5
+  resolution: "typescript@npm:4.9.5"
   bin:
-    tsc: ./bin/tsc
-    tsserver: ./bin/tsserver
-  checksum: 37f6e2c3c5e2aa5934b85b0fddbf32eeac8b1bacf3a5b51d01946936d03f5377fe86255d4e5a4ae628fd0cd553386355ad362c57f13b4635064400f3e8e05b9d
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@file%3A../../node_modules/typescript#~builtin<compat/typescript>":
-  version: 4.9.4
-  resolution: "typescript@patch:typescript@file%3A../../node_modules/typescript%23../../node_modules/typescript%3A%3Ahash=7421fa&locator=yarn-pnp-compat%2540workspace%253A.#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"
+"typescript@patch:typescript@~4.9.3#~builtin<compat/typescript>":
+  version: 4.9.5
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=23ec76"
   bin:
-    tsc: ./bin/tsc
-    tsserver: ./bin/tsserver
-  checksum: 1caaea6cb7f813e64345190fddc4e6c924d0b698ab81189b503763c4a18f7f5501c69362979d36e19c042d89d936443e768a78b0675690b35eb663d19e0eae71
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: ab417a2f398380c90a6cf5a5f74badd17866adf57f1165617d6a551f059c3ba0a3e4da0d147b3ac5681db9ac76a303c5876394b13b3de75fdd5b1eaa06181c9d
   languageName: node
   linkType: hard
 
@@ -10269,7 +10269,7 @@ __metadata:
     karma-jasmine-html-reporter: ~1.7.0
     rxjs: ~7.5.0
     tslib: ^2.3.0
-    typescript: "file:../../node_modules/typescript"
+    typescript: ~4.9.3
     zone.js: ~0.11.4
   languageName: unknown
   linkType: soft

integration/yarn-pnp-compat/package.json

@@ -56,12 +56,12 @@
   },
   "version": "16.0.0-next.1",
   "dependencies": {
-    "@angular/animations": "^16.0.0-next.0",
-    "@angular/common": "^16.0.0-next.0",
-    "@angular/compiler": "^16.0.0-next.0",
-    "@angular/core": "^16.0.0-next.0",
-    "@angular/forms": "^16.0.0-next.0",
-    "@angular/platform-browser": "^16.0.0-next.0",
+    "@angular/animations": "^16.0.0-next.2",
+    "@angular/common": "^16.0.0-next.2",
+    "@angular/compiler": "^16.0.0-next.2",
+    "@angular/core": "^16.0.0-next.2",
+    "@angular/forms": "^16.0.0-next.2",
+    "@angular/platform-browser": "^16.0.0-next.2",
     "@types/google.maps": "^3.47.3",
     "@types/youtube": "^0.0.46",
     "rxjs": "^6.6.7",
@@ -70,18 +70,18 @@
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0-next.0",
-    "@angular-devkit/core": "^16.0.0-next.0",
-    "@angular-devkit/schematics": "^16.0.0-next.0",
+    "@angular-devkit/build-angular": "^16.0.0-next.3",
+    "@angular-devkit/core": "^16.0.0-next.3",
+    "@angular-devkit/schematics": "^16.0.0-next.3",
     "@angular/bazel": "15.0.4",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#16f13b9e919478d61ec98ce60901f3bdebb5d4e5",
-    "@angular/cli": "^16.0.0-next.0",
-    "@angular/compiler-cli": "^16.0.0-next.0",
-    "@angular/localize": "^16.0.0-next.0",
+    "@angular/cli": "^16.0.0-next.3",
+    "@angular/compiler-cli": "^16.0.0-next.2",
+    "@angular/localize": "^16.0.0-next.2",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#46a6cb28a6ca6a3a7a096656280ed27b02243e9a",
-    "@angular/platform-browser-dynamic": "^16.0.0-next.0",
-    "@angular/platform-server": "^16.0.0-next.0",
-    "@angular/router": "^16.0.0-next.0",
+    "@angular/platform-browser-dynamic": "^16.0.0-next.2",
+    "@angular/platform-server": "^16.0.0-next.2",
+    "@angular/router": "^16.0.0-next.2",
     "@axe-core/webdriverjs": "^4.3.2",
     "@babel/core": "^7.16.12",
     "@bazel/bazelisk": "1.12.1",
@@ -146,7 +146,7 @@
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@schematics/angular": "^16.0.0-next.0",
+    "@schematics/angular": "^16.0.0-next.3",
     "@types/babel__core": "^7.1.18",
     "@types/browser-sync": "^2.26.3",
     "@types/fs-extra": "^9.0.13",
@@ -165,7 +165,7 @@
     "autoprefixer": "^10.4.2",
     "browser-sync": "2.26.13",
     "chalk": "^4.1.0",
-    "codelyzer": "^6.0.2",
+    "cross-env": "^7.0.3",
     "date-fns": "^2.28.0",
     "dgeni": "^0.4.14",
     "dgeni-packages": "^0.29.5",
@@ -215,17 +215,17 @@
     "tsickle": "0.39.1",
     "tslint": "^6.1.3",
     "tsutils": "^3.21.0",
-    "typescript": "~4.9.3",
+    "typescript": "5.0.1-rc",
     "vrsource-tslint-rules": "6.0.0",
     "yaml": "^1.10.2",
     "yargs": "^17.3.1",
     "zx": "^6.2.4"
   },
   "resolutions": {
-    "@angular/build-tooling/typescript": "~4.9.3",
-    "@angular/ng-dev/typescript": "~4.9.3",
+    "@angular/build-tooling/typescript": "5.0.1-rc",
+    "@angular/ng-dev/typescript": "5.0.1-rc",
     "browser-sync-client": "2.26.13",
-    "dgeni-packages/typescript": "~4.9.3",
+    "dgeni-packages/typescript": "5.0.1-rc",
     "**/https-proxy-agent": "5.0.0"
   }
 }

integration/yarn-pnp-compat/yarn.lock

@@ -41,7 +41,7 @@
      [class.mdc-text-field--no-label]="!_hasFloatingLabel()"
      [class.mdc-text-field--disabled]="_control.disabled"
      [class.mdc-text-field--invalid]="_control.errorState"
-     (click)="_control.onContainerClick && _control.onContainerClick($event)">
+     (click)="_control.onContainerClick($event)">
   <div class="mat-mdc-form-field-focus-overlay" *ngIf="!_hasOutline() && !_control.disabled"></div>
   <div class="mat-mdc-form-field-flex">
     <div *ngIf="_hasOutline()" matFormFieldNotchedOutline

package.json

@@ -1,6 +1,6 @@
 <div class="mat-form-field-wrapper">
   <div class="mat-form-field-flex" #connectionContainer
-       (click)="_control.onContainerClick && _control.onContainerClick($event)">
+       (click)="_control.onContainerClick($event)">
 
     <!-- Outline used for outline appearance. -->
     <ng-container *ngIf="appearance == 'outline'">

src/material/form-field/form-field.html

@@ -0,0 +1,58 @@
+import ts from 'typescript';
+import * as Lint from 'tslint';
+
+const HOOKS_TO_INTERFACES: Record<string, string> = {
+  'ngOnChanges': 'OnChanges',
+  'ngOnInit': 'OnInit',
+  'ngDoCheck': 'DoCheck',
+  'ngAfterContentInit': 'AfterContentInit',
+  'ngAfterContentChecked': 'AfterContentChecked',
+  'ngAfterViewInit': 'AfterViewInit',
+  'ngAfterViewChecked': 'AfterViewChecked',
+  'ngOnDestroy': 'OnDestroy',
+  'ngDoBootstrap': 'DoBootstrap',
+};
+
+/**
+ * Rule that requires classes using Angular lifecycle hooks to implement the appropriate interfaces.
+ */
+export class Rule extends Lint.Rules.AbstractRule {
+  apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
+    return this.applyWithWalker(new Walker(sourceFile, this.getOptions()));
+  }
+}
+
+class Walker extends Lint.RuleWalker {
+  override visitClassDeclaration(node: ts.ClassDeclaration) {
+    for (const member of node.members) {
+      if (
+        !ts.isMethodDeclaration(member) ||
+        !ts.isIdentifier(member.name) ||
+        !HOOKS_TO_INTERFACES.hasOwnProperty(member.name.text)
+      ) {
+        continue;
+      }
+
+      const requiredInterface = HOOKS_TO_INTERFACES[member.name.text];
+      const hasRequiredInterface = node.heritageClauses?.some(
+        clause =>
+          clause.token === ts.SyntaxKind.ImplementsKeyword &&
+          clause.types.some(
+            type =>
+              ts.isExpressionWithTypeArguments(type) &&
+              ts.isIdentifier(type.expression) &&
+              type.expression.text === requiredInterface,
+          ),
+      );
+
+      if (!hasRequiredInterface) {
+        this.addFailureAtNode(
+          node.name || node,
+          `Class must implement interface ${requiredInterface}, because it uses Angular lifecycle hook ${member.name.text}`,
+        );
+      }
+    }
+
+    return super.visitClassDeclaration(node);
+  }
+}

src/material/legacy-form-field/form-field.html

@@ -37,7 +37,7 @@ class Walker extends Lint.RuleWalker {
   override visitClassDeclaration(node: ts.ClassDeclaration) {
     node.members.forEach(member => {
       // Members without a modifier are considered public.
-      if (!member.modifiers || this._hasModifier(member, ts.SyntaxKind.PublicKeyword)) {
+      if (this._hasModifier(member, ts.SyntaxKind.PublicKeyword)) {
         this._validateMember(member, 'public');
       } else if (this._hasModifier(member, ts.SyntaxKind.PrivateKeyword)) {
         this._validateMember(member, 'private');
@@ -105,6 +105,6 @@ class Walker extends Lint.RuleWalker {
     node: ts.ClassElement | ts.ParameterDeclaration,
     targetKind: ts.SyntaxKind,
   ): boolean {
-    return !!node.modifiers?.some(({kind}) => kind === targetKind);
+    return ts.canHaveModifiers(node) && !!node.modifiers?.some(({kind}) => kind === targetKind);
   }
 }

tools/tslint-rules/lifecycleHookInterfaceRule.ts

@@ -1,10 +1,6 @@
 {
   "extends": ["rxjs-tslint-rules"],
-  "rulesDirectory": [
-    "./tools/tslint-rules/",
-    "node_modules/vrsource-tslint-rules/rules",
-    "node_modules/codelyzer"
-  ],
+  "rulesDirectory": ["./tools/tslint-rules/", "node_modules/vrsource-tslint-rules/rules"],
   "rules": {
     "ban-types": [true, ["ReadonlyArray<.+>", "Use 'readonly T[]' instead."]],
     // Disable this flag because of SHA tslint#48b0c597f9257712c7d1f04b55ed0aa60e333f6a
@@ -58,15 +54,6 @@
     "await-promise": [true, "PromiseLike"],
     "array-type": [true, "array"],
 
-    // Codelyzer
-    "template-banana-in-box": true,
-    "contextual-lifecycle": true,
-    "contextual-decorator": true,
-    "no-output-on-prefix": true,
-    "prefer-output-readonly": true,
-    "template-no-negated-async": true,
-    "use-lifecycle-interface": true,
-
     // RxJS
     "rxjs-no-unsafe-takeuntil": true,
     "rxjs-no-unsafe-catch": true,
@@ -80,6 +67,7 @@
     "no-undecorated-class-with-angular-features": true,
     "setters-after-getters": true,
     "ng-on-changes-property-access": true,
+    "lifecycle-hook-interface": true,
     "require-breaking-change-version": true,
     "no-nested-ternary": true,
     "prefer-const-enum": true,