build: update to TypeScript 5.0

crisbeto · crisbeto · commit f707ef7ea3b0 · 2023-03-09T09:52:07.000+01:00
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.
diff --git a/integration/yarn-pnp-compat/.yarn/releases/yarn-3.3.1.cjs b/integration/yarn-pnp-compat/.yarn/releases/yarn-3.3.1.cjs
diff --git a/integration/yarn-pnp-compat/.yarn/releases/yarn-3.4.1.cjs b/integration/yarn-pnp-compat/.yarn/releases/yarn-3.4.1.cjs
diff --git a/integration/yarn-pnp-compat/.yarnrc.yml b/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
diff --git a/integration/yarn-pnp-compat/package.json b/integration/yarn-pnp-compat/package.json
@@ -39,5 +39,5 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "file:../../node_modules/typescript"
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@3.4.1"
 }
diff --git a/package.json b/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,6 @@
     "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",
@@ -216,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"
   }
 }
diff --git a/src/material/form-field/form-field.html b/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
diff --git a/src/material/legacy-form-field/form-field.html b/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'">
diff --git a/tools/tslint-rules/lifecycleHookInterfaceRule.ts b/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);
+  }
+}
diff --git a/tools/tslint-rules/memberNamingRule.ts b/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);
   }
 }
diff --git a/tslint.json b/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,
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`nodeLinker: pnp`
`2`	`2`
`3`		`-yarnPath: .yarn/releases/yarn-3.3.1.cjs`
	`3`	`+yarnPath: .yarn/releases/yarn-3.4.1.cjs`
Original file line number	Diff line number	Diff line change
`@@ -39,5 +39,5 @@`
`39`	`39`	`"karma-jasmine-html-reporter": "~1.7.0",`
`40`	`40`	`"typescript": "file:../../node_modules/typescript"`
`41`	`41`	`},`
`42`		`- "packageManager": "yarn@3.3.1"`
	`42`	`+ "packageManager": "yarn@3.4.1"`
`43`	`43`	`}`