Error with td@colspan attribute

[bwolf]

Using vue-tsc gives me the following error:

vue-tsc --noEmit
src/App.vue:5:9 - error TS2322: Type 'string' is not assignable to type 'number | undefined'.
5     <td colspan="2">
  node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:779:3
    779   colspan?: number
    The expected type comes from property 'colspan' which is declared here on type 'TdHTMLAttributes & ReservedProps & VNodeProps & AllowedComponentProps & HTMLAttributes & Record<...>'

The SFC component is just:

<template>
<p>hello</p>
<table>
  <tfoot>
    <td colspan="2">
  </tfoot>
</table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
})
</script>

I don't understand what should be wrong with that template (any ideas?). Sure, it does make any sense, but that is not the point. I created a minimal reproducible demo here: https://github.com/bwolf/error-vue-tsc-colspan

[johnsoncodehk]

Hi @bwolf, please try change colspan="2" to :colspan="2".

[bwolf]

Yes, changing it to :colspan="2" signals no error. But I thought writing :foo="val" is for Vue component properties and <td> is a standard HTML element. I already changed some occurrences of these (e.g. <input size="3" ...> is reported as type error (string instead of integer for the size attribute). Any ideas?

[johnsoncodehk]

This is expected, otherwise we cannot support native html elements type checking.