[bug] experimentalUseElementAccessInTemplate disables type check for used properties

[orimay]

experimentalUseElementAccessInTemplate option makes protected field errors (ts-plugin(2339)) go away, but at the same time, it stops bothering with variables used in the template:

<script lang="ts">
  @Component({}) export default class ... {
    protected config = { whatever: true };
    protected messages = {
      first: 'Success!'
    };
  }
</script>

<template>
  <MyComponent
    :config="cornfig.whatever"
    :message="messages.first"
  />
</template>

It won't complain about cornfig and cornfig.whatever will be of type any. At the same time, if I hover messages in template, it won't hint the type, but it will hint the type for messages.first (string). Is it possible to have properties checked and have their type provided? If I disable experimentalUseElementAccessInTemplate, the ts-plugin(2339) error comes back, but so do the type checks. It will then complain that cornfig does not exist and will show type for messages.

Thank you!

[orimay]

Actually, even messages.boo won't give an error of a non-existant boo property. It will have type of any

[so1ve]

Where does the Component decorator come from?

[orimay]

import Component from 'vue-class-component';

[so1ve]

I guess this is because using index signatures to classes is allowed in typescript:

class a {}

a['foo'] // No errors

[orimay]

But it should error out on unknown property cornfig and should show type of messages

[so1ve]

We read properties directly from the class, so Class.xxx will report an error, but Class['xxx'] doesn't. We need to find a workaround

[KazariEX]

This issue has been fixed by #4354

[orimay]

This issue has been fixed by #4354

@KazariEX, it seems experimentalUseElementAccessInTemplate was removed. Does it work as is? Also, does it work with Vue 2.7?

[KazariEX]

Yes, it will work with Vue 2.7, but may be necessary to ensure that vueCompilerOptions.target = 2.7 in tsconfig.json.

[orimay]

It fails without "vue.server.includeLanguages": ["vue"] in .vscode/settings.json. It can't call include on undefined