build: update to TypeScript 5.0

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

@@ -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/BUILD.bazel

@@ -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/package.json

@@ -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/yarn.lock

@@ -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

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"
   }
 }

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

@@ -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

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

@@ -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'">

tools/tslint-rules/lifecycleHookInterfaceRule.ts

@@ -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);
+  }
+}

tools/tslint-rules/memberNamingRule.ts

@@ -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);
   }
 }

tslint.json

@@ -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,