fixup! feat(compiler): add support for the typeof keyword in templa…

…te expressions.
angular · JeanMeche · Oct 13, 2024 · Oct 14, 2024 · Oct 15, 2024 · Oct 15, 2024
commit 1780abd4ed18b543bac4dab89c52d08364fd7c25
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts
@@ -61,6 +61,14 @@ describe('type check blocks', () => {
     );
   });
 
+  it('should handle typeof expressions', () => {
+    expect(tcb('{{typeof a}}')).toContain('typeof (((this).a))');
+    expect(tcb('{{!(typeof a)}}')).toContain('!(typeof (((this).a)))');
+    expect(tcb('{{!(typeof a === "object")}}')).toContain(
+      '!((typeof (((this).a))) === ("object"))',
+    );
+  });
+
   it('should handle attribute values for directive inputs', () => {
     const TEMPLATE = `<div dir inputA="value"></div>`;
     const DIRECTIVES: TestDeclaration[] = [

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/GOLDEN_PARTIAL.js
@@ -80,6 +80,7 @@ MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-
 	{{ (1 % 2) + 3 / 4 * 5 }}
 	{{ +1 }}
   {{ typeof {} === 'object' }}
+  {{ !(typeof {} === 'object') }}
 `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, decorators: [{
             type: Component,
@@ -89,6 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
 	{{ (1 % 2) + 3 / 4 * 5 }}
 	{{ +1 }}
   {{ typeof {} === 'object' }}
+  {{ !(typeof {} === 'object') }}
 `,
                     standalone: false
                 }]

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators.ts
@@ -6,6 +6,7 @@ import {Component, NgModule} from '@angular/core';
 	{{ (1 % 2) + 3 / 4 * 5 }}
 	{{ +1 }}
   {{ typeof {} === 'object' }}
+  {{ !(typeof {} === 'object') }}
 `,
     standalone: false
 })

diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/operators_template.js
@@ -2,7 +2,7 @@ template: function MyApp_Template(rf, $ctx$) {
 	if (rf & 1) {
 	  $i0$.ɵɵtext(0);
 	} if (rf & 2) {
-	  i0.ɵɵtextInterpolate4(" ", 1 + 2, " ", 1 % 2 + 3 / 4 * 5, " ", +1, " ", typeof i0.ɵɵpureFunction0(4, _c0) === "object","\n");
+	  i0.ɵɵtextInterpolate5(" ", 1 + 2, " ", 1 % 2 + 3 / 4 * 5, " ", +1, " ", typeof i0.ɵɵpureFunction0(5, _c0) === "object", " ", !(typeof i0.ɵɵpureFunction0(6, _c0) === "object"), "\n");
 	}
   }
 
diff --git a/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts b/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts
@@ -700,6 +700,47 @@ runInEachFileSystem(() => {
       expect(diags[0].messageText).toContain(`Property 'input' does not exist on type 'TestCmp'.`);
     });
 
+    it('should error on non valid typeof expressions', () => {
+      env.write(
+        'test.ts',
+        `
+        import {Component} from '@angular/core';
+
+        @Component({
+          standalone: true,
+          template: \` {{typeof {} === 'foobar'}} \`,
+        })
+        class TestCmp {
+        }
+        `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect(diags[0].messageText).toContain(`This comparison appears to be unintentional`);
+    });
+
+    it('should error on misused logical not in typeof expressions', () => {
+      env.write(
+        'test.ts',
+        `
+        import {Component} from '@angular/core';
+
+        @Component({
+          standalone: true,
+          // should be !(typeof {} === 'object')
+          template: \` {{!typeof {} === 'object'}} \`,
+        })
+        class TestCmp {
+        }
+        `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toBe(1);
+      expect(diags[0].messageText).toContain(`This comparison appears to be unintentional`);
+    });
+
     describe('strictInputTypes', () => {
       beforeEach(() => {
         env.write(

diff --git a/packages/compiler/src/expression_parser/ast.ts b/packages/compiler/src/expression_parser/ast.ts
@@ -732,7 +732,7 @@ export class AstTransformer implements AstVisitor {
     return new PrefixNot(ast.span, ast.sourceSpan, ast.expression.visit(this));
   }
 
-  visitTypeofExpresion(ast: PrefixNot, context: any): AST {
+  visitTypeofExpresion(ast: TypeofExpression, context: any): AST {
     return new TypeofExpression(ast.span, ast.sourceSpan, ast.expression.visit(this));
   }
 

diff --git a/packages/compiler/src/expression_parser/parser.ts b/packages/compiler/src/expression_parser/parser.ts
@@ -961,7 +961,7 @@ class _ParseAST {
           result = this.parsePrefix();
           return new PrefixNot(this.span(start), this.sourceSpan(start), result);
       }
-    } else if (this.next.type == TokenType.Keyword && this.next.strValue === 'typeof') {
+    } else if (this.next.isKeywordTypeof()) {
       this.advance();
       const start = this.inputIndex;
       let result = this.parsePrefix();

diff --git a/packages/core/test/acceptance/control_flow_if_spec.ts b/packages/core/test/acceptance/control_flow_if_spec.ts
@@ -277,6 +277,30 @@ describe('control flow - if', () => {
     expect(fixture.nativeElement.textContent).toBe('Something');
   });
 
+  it('should support a condition with the a typeof expression', () => {
+    @Component({
+      standalone: true,
+      template: `
+          @if (typeof value === 'string') {
+            {{value.length}}
+          } @else {
+            {{value}}
+          }
+        `,
+    })
+    class TestComponent {
+      value: string | number = 'string';
+    }
+
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('6');
+
+    fixture.componentInstance.value = 42;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent.trim()).toBe('42');
+  });
+
   describe('content projection', () => {
     it('should project an @if with a single root node into the root node slot', () => {
       @Component({