refactor(devtools): make component-only properties on DirectiveMetadata optional (angular#60475)

This type was incorrect, as only components have `encapsulation` and `onPush` values. `ng.getDirectiveMetadata` does not return these properties for directive inputs.

Unfortunately the `| Partial<AngularComponentDebugMetadata>` is necessary to reference these properties or else TypeScript will reject their usage.

PR Close angular#60475

Author: dgp1130

devtools/projects/ng-devtools-backend/src/lib/component-tree.ts

@@ -16,6 +16,7 @@ import type {
   Type,
   ValueProvider,
   ɵAngularComponentDebugMetadata as AngularComponentDebugMetadata,
+  ɵAngularDirectiveDebugMetadata as AngularDirectiveDebugMetadata,
   ɵProviderRecord as ProviderRecord,
 } from '@angular/core';
 import {
@@ -219,7 +220,9 @@ const enum DirectiveMetadataKey {
 // the method directly interacts with the directive/component definition.
 const getDirectiveMetadata = (dir: any): DirectiveMetadata => {
   const getMetadata = ngDebugClient().getDirectiveMetadata!;
-  const metadata = getMetadata?.(dir) as AngularComponentDebugMetadata;
+  const metadata = getMetadata?.(dir) as
+    | (AngularDirectiveDebugMetadata & Partial<AngularComponentDebugMetadata>)
+    | null;
   if (metadata) {
     return {
       inputs: metadata.inputs,
@@ -249,7 +252,7 @@ const getDirectiveMetadata = (dir: any): DirectiveMetadata => {
 
 export function isOnPushDirective(dir: any): boolean {
   const metadata = getDirectiveMetadata(dir.instance);
-  return metadata.onPush;
+  return Boolean(metadata.onPush);
 }
 
 export function getInjectorProviders(injector: Injector) {

devtools/projects/protocol/src/lib/messages.ts

@@ -102,8 +102,8 @@ export interface DirectivesProperties {
 export interface DirectiveMetadata {
   inputs: {[name: string]: string};
   outputs: {[name: string]: string};
-  encapsulation: ViewEncapsulation;
-  onPush: boolean;
+  encapsulation?: ViewEncapsulation;
+  onPush?: boolean;
   dependencies?: SerializedInjectedService[];
 }