fix(language-service): apply suggestion (#34177)

PR Close #34177

packages/language-service/src/typescript_symbols.ts

@@ -249,8 +249,8 @@ class TypeWrapper implements Symbol {
     if (symbol) {
       return symbol.name;
     } else {
-      // the js primitive type(e.g. 'string') doesn't have Symbol.
-      // use the ts.TypeChecker to get the type name.
+      // A primitive type (e.g. 'string') doesn't have Symbol,
+      // so use the ts.TypeChecker to get the type name.
       return this.context.checker.typeToString(this.tsType);
     }
   }
@@ -314,7 +314,9 @@ class TypeWrapper implements Symbol {
   }
 }
 
-class StringIndexTypeWrappr extends TypeWrapper {
+// If stringIndexType a primitive type(e.g. 'string'), the Symbol is undefined;
+// and in AstType.resolvePropertyRead method, the Symbol.type should get the right type.
+class StringIndexTypeWrapper extends TypeWrapper {
   public readonly type = new TypeWrapper(this.tsType, this.context);
 }
 
@@ -516,11 +518,7 @@ class SymbolTableWrapper implements SymbolTable {
       //   obj.stringIndex // equivalent to obj['stringIndex'];
       //
       // In this case, return the type indexed by an arbitrary string key.
-
-      // if stringIndexType is js primitive type(e.g. 'string'), the Symbol is undefined;
-      // and In AstType.resolvePropertyRead method, the Symbol.type should get the right type.
-      // so I add a new Symbol type, 'StringIndexTypeWrappr'
-      return new StringIndexTypeWrappr(this.stringIndexType, this.context);
+      return new StringIndexTypeWrapper(this.stringIndexType, this.context);
     }
 
     return undefined;

packages/language-service/test/completions_spec.ts

@@ -146,6 +146,13 @@ describe('completions', () => {
         const completions = ngLS.getCompletionsAt(TEST_TEMPLATE, marker.start);
         expectContain(completions, CompletionKind.PROPERTY, ['id', 'name']);
       });
+
+      it('should work with dot notation if stringIndexType is a primitive type', () => {
+        mockHost.override(TEST_TEMPLATE, `{{ primitiveIndexType.test.~{string-primitive-type}}}`);
+        const marker = mockHost.getLocationMarkerFor(TEST_TEMPLATE, 'string-primitive-type');
+        const completions = ngLS.getCompletionsAt(TEST_TEMPLATE, marker.start);
+        expectContain(completions, CompletionKind.METHOD, ['substring']);
+      });
     });
   });
 

packages/language-service/test/diagnostics_spec.ts

@@ -173,10 +173,9 @@ describe('diagnostics', () => {
             .toBe(`Identifier 'badProperty' is not defined. 'Hero' does not contain such a member`);
       });
 
-      it('should not produce errors with dot notation if stringIndexType is js primitive type',
+      it('should not produce errors with dot notation if stringIndexType is a primitive type',
          () => {
-           mockHost.override(TEST_TEMPLATE, `
-        {{primitiveType.test}}`);
+           mockHost.override(TEST_TEMPLATE, `{{primitiveIndexType.test}}`);
            const diags = ngLS.getDiagnostics(TEST_TEMPLATE);
            expect(diags.length).toBe(0);
          });

packages/language-service/test/project/app/parsing-cases.ts

@@ -192,7 +192,7 @@ export class TemplateReference {
   tupleArray: [string, Hero] = ['test', this.hero];
   league: Hero[][] = [this.heroes];
   heroesByName: {[name: string]: Hero} = {};
-  primitiveType: {[name: string]: string} = {};
+  primitiveIndexType: {[name: string]: string} = {};
   anyValue: any;
   myClick(event: any) {}
 }