Merge pull request #2426 from yoyo930021/fix-optional-in-template

Fix optional chaining in template

CHANGELOG.md

@@ -21,6 +21,7 @@
 - 🙌 Fix error when optional camel-cased props are missing. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #2314 and #2342.
 - 🙌 Fix Vetur formatting not working. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #2388 and #2389.
 - 🙌 Improve ts perf when `vetur.experimental.templateInterpolationService: true`. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #2192 and #2374.
+- 🙌 Fix optional chaining in template. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #2423 and #2426.
 
 ### 0.28.0 | 2020-09-23 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.28.0/vspackage)
 

server/src/services/typescriptService/test/transformTemplate.test.ts

@@ -120,5 +120,11 @@ suite('transformTemplate', () => {
       check('new Date(test)', 'new Date(this.test)', ['Date']);
       check('new Test()', 'new this.Test()');
     });
+
+    test('Optional Chaining and Nullish coalescing', () => {
+      check('a?.b', 'this.a?.b', []);
+      check('a ?? b', 'this.a ?? this.b', []);
+      check('a?.b ?? c', 'this.a?.b ?? this.c', []);
+    });
   });
 });

server/src/services/typescriptService/walkExpression.ts

@@ -26,6 +26,14 @@ export function walkExpression(
   }
 
   function loop(node: ts.Expression, scope: ts.Identifier[]): ts.Expression {
+    if (ts.isPropertyAccessChain(node)) {
+      const expression = loop(node.expression, scope);
+      return visit(
+        update({ expression }, node, ts.createPropertyAccessChain(expression, node.questionDotToken, node.name)),
+        scope
+      );
+    }
+
     if (ts.isPropertyAccessExpression(node)) {
       const expression = loop(node.expression, scope);
       return visit(update({ expression }, node, ts.createPropertyAccess(expression, node.name)), scope);

test/interpolation/features/diagnostics/basic.test.ts

@@ -263,7 +263,8 @@ describe('Should find template-diagnostics in <template> region', () => {
     'no-implicit-any-v-for-array.vue',
     'issue-1745-duplicate-event-with-modifiers.vue',
     'issue-2254.vue',
-    'issue-2258.vue'
+    'issue-2258.vue',
+    'optional-in-template.vue'
   ];
 
   noErrorTests.forEach(t => {

test/interpolation/fixture/diagnostics/optional-in-template.vue

@@ -0,0 +1,17 @@
+<template>
+  <p>{{ a?.b ?? '1' }}</p>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data () {
+    return {
+      a: {
+        b: ''
+      } as { b: string } | null
+    }
+  }
+})
+</script>