textarea on vue not accepting null - node.js

Question

I use:
- "vue": "3.2.26",
- "vee-validate": "4.5.6",
- "typescript": "4.5.4"
While creating a textarea field on vue3 I ran into a problem
i have
example with vee-validate
import { Field, useForm } from 'vee-validate'
<Field v-slot="{ field, errors }" name="name" type="text">
<VControl icon="feather:edit-2" :has-error="Boolean(formErrors.name)">
<input
v-bind="field"
class="input is-primary-focus"
type="text"
placeholder="Placeholder"
autocomplete="name"
/>
<p v-if="errors" class="help is-danger">{{ formErrors.name}}</p>
</VControl>
</Field>
simple example
<textarea
v-model="fieldValues.description"
class="textarea is-success-focus"
rows="3"
placeholder="Description"
></textarea>
for model
export interface iCat {
id: number
name: string
description: string | null
}
but textarea return error
Type 'null' is not assignable to type 'string | number | string[] | undefined'.
for vee-validate
const {
values: fieldValues,
errors: formErrors,
handleSubmit,
} = useForm({
initialValues: {
id: 0,
name: '',
description: ''
},
validationSchema: object({
id: number().required().integer(),
name: string().required(),
description: string().notRequired().default(null).nullable()
}),
})
if check #vue/runtime-dom/dist/runtime-dom.d.ts
export interface TextareaHTMLAttributes extends HTMLAttributes {
....
value?: string | string[] | number
...
}
If I look in node-moduls, I see that the textarea does not accept null as a value - how can I properly solve this problem then?

Answer 1

Unfortunately, you can't change the existing type of value for TextareaHTMLAttributes (at least not in TypeScript 4.5.5). Type augmentation only allows extension (adding properties to the type, or creating a new type that extends the original TextareaHTMLAttributes interface with a new type for value).
A workaround is to use a new type that extends iCat, changing its description type to the expected type of TextareaHTMLAttributes's value:
Declare a new type (named "iFieldValues"), using Omit to exclude the original description property from iCat, and an intersection with a new description property that has a type of TextareaHTMLAttributes['value'].
Use type assertion (as iFieldValues) on the values returned from useForm().
// MyForm.vue
<script setup lang="ts">
import { toRefs } from 'vue'
import type { TextareaHTMLAttributes } from '#vue/runtime-dom'
import { useForm } from 'vee-validate'
import { object, number, string } from 'yup'
export interface iCat {
id: number
name: string
description: string | null
}
1️⃣
type iFieldValues = Omit<iCat, 'description'> & {
description: TextareaHTMLAttributes['value']
}
const {
values,
errors: formErrors,
handleSubmit,
} = useForm({
initialValues: {
id: 0,
name: '',
description: ''
},
validationSchema: object({
id: number().required().integer(),
name: string().required(),
description: string().notRequired().default(null).nullable()
}),
})
2️⃣
const fieldValues = values as iFieldValues
</script>