Vue 2 cannot assert type in template

[jaredmcateer]

Minimal test case

https://github.com/jaredmcateer/vue2-volar-type-error

Issue explanation

When passing an object with a variable key to :checked on an input element I am getting a type error where the types might not align.
I've tried various ways of calming the error but have not found an ideal solution.

<script lang="ts">
import { defineComponent, PropType } from "@vue/composition-api";

export default defineComponent({
  props: {
    features: { type: Object as PropType<Record<string, string | boolean>>, required: true }
  },
  data() {
    return {
      feature: 'foo',
    };
  },
});
</script>

<template>
  <div>
    <h2>Error in ide</h2>
      <label>Checkbox <input
        type="checkbox"
        :checked="features[feature]"
        ^------- Type 'string | boolean' is not assignable to type 'any[] | Booleanish | Set<any> | undefined'
      />
     </label>
  </div>
</template>

I tried changing the line to :checked="(feature[feature] as boolean)" which calms the error in the IDE but is a runtime error (unexpected token)

Other things I've tried is adding:

v-if="typeof features[feature] === 'boolean'"

and

adding a method that has a type predicate

methods: 
  isBoolean(feature: any): feature is boolean {
    return typeof features[feature] === 'boolean';
  }
}

with

v-if="isBoolean(features[feature])

But these do not work. However if I try them with accessing the property directly such as:

<label>Checkbox <input
  type="checkbox"
  v-if="isBoolean(features.foo)"
  :checked="features.foo"
  />
</label>

Then it works (but doesn't for my real world usage)

[hexf00]

It seems that your error prompt is not caused by volar, your ide type interface works correctly.
but I found that type assertion syntax(as xxxx) cannot be used in template in vue2. I think this is related to the compiler used in vue2.

I think the reason why your last code can work is that TS has a feature that context judgment can narrow the range of types.

Maybe you can try,it works well with me

<input  type="checkbox"  :checked="isBoolean(features[feature])"  />

[jaredmcateer]

Technically that would work but :checked="typeof features[feature] === 'boolean'" isn't the same as :checked="features[feature]". But I get from what you're saying my solution would be to use a method with a boolean return type or .

[johnsoncodehk]

Hi @jaredmcateer, please try

<script lang="ts">
import { defineComponent, PropType } from "@vue/composition-api";

export default defineComponent({
  props: {
-    features: { type: Object as PropType<Record<string, string | boolean>>, required: true }
+    features: { type: Object as PropType<Record<string, 'true' | 'false' | boolean>>, required: true }
  },
  data() {
    return {
      feature: 'foo',
    };
  },
});
</script>