Search code examples
typescriptvue.js

How exactly Typescript expects me to write a "number"?

Very short question.

<q-drawer v-model="leftDrawer" side="left" bordered content-class="bg-grey-2" width=100>
</q-drawer>

Using https://quasar.dev/layout/drawer/ 's width attribute, component's width expects a number, gets a number, and component works nicely, gets smaller/larger each time I change the number. But VSCode TS doesnt stop erroring out.

enter image description here

Type 'string' is not assignable to type 'number'.ts(2322)
index.d.ts(3934, 3): The expected type comes from property 'width' which is declared here on type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & QDrawerProps & Record<string, unknown>'
(property) QDrawerProps.width?: number | undefined
Width of drawer (in pixels) Default value: 300

How do I write a "number" to satisfy the check of Typescript? Just, how?

100

so this is not a number?

"100"

this neither?

{100}

so what is a number according to the Typescript?

Solution

  • Try binding with a colon in front of the width, as in:

    <q-drawer v-model="leftDrawer" side="left" bordered content-class="bg-grey-2" :width="100">
</q-drawer>

    In HTML and Vue templates, when you set an attribute without binding it using v-bind: (or the shorthand :), its value is always treated as a string.