Introduction
Hey, DEV people! π It's time to continue the Simple Errors series with an article about the TypeScript error I encountered when I first decided to convert my Vue.js v3.x
project from regular JavaScript.
As always, don't judge too harshly, write what you think of such articles, suggest your own topics for parsing in the comments... Here we go! π
π Table of contents
Explanation of the error
When I run vue-tsc --noEmit
to check TypeScript, I get errors:
src/components/forms/Input.vue:4:40 - error TS2531:
Object is possibly 'null'.
4 @input="$emit('update:modelValue', $event.target.value)"
~~~~~~~~~~~~~
src/components/forms/Input.vue:4:54 - error TS2339:
Property 'value' does not exist on type 'EventTarget'.
4 @input="$emit('update:modelValue', $event.target.value)"
~~~~~
Found 2 errors.
While I knew what was wrong with error Object is possibly 'null'
, I had to dig deep into the documentation to find the reason for error Property 'value' does not exist on type 'EventTarget'
.
Input data when an error occurs
My Vue component (src/components/forms/Input.vue
) looks like this:
<template>
<input
class="px-3 py-2 border-2 rounded-lg"
@input="$emit('update:modelValue', $event.target.value)"
:type="inputType"
:tabindex="tabIndex"
:placeholder="placeholder"
:value="modelValue"
:required="isRequired"
/>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Input',
props: {
inputType: { type: String, required: true },
tabIndex: { type: String, required: true },
placeholder: { type: String, default: '' },
modelValue: { type: String, default: '' },
isRequired: { type: Boolean, default: false },
},
})
</script>
As you've already noticed, in the @input
attribute of the template, I refer to $event.target.value
as I would do in regular JavaScript.
π€ Note: Even if
$event.target
returnnull
, which has novalue
property, this is not a big problem for regular JavaScript! It will give a run-time error on the client and this web application will crash.
But that's not how TypeScript works. It checks all possible problematic places in the code at the time of building the project and points them out.
That's why we love and use it!
Resolving the error
First, write a new method called handleInputChange(event)
in setup function:
// ...
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
// ...
setup: () => {
// Define event handler for input changes in TypeScript.
const handleInputChange = (event: Event) =>
(event.target as HTMLInputElement).value
return { handleInputChange }
},
})
</script>
In TypeScript, we need to explicitly point to the object we want to work with. In this case, it is the input
field, so its object will be called HTMLInputElement
.
βοΈ Note: The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of
<input>
elements.
Next, let's add this method to the @input
in our template, like this:
<template>
<input
class="px-3 py-2 border-2 rounded-lg"
@input="$emit('update:modelValue', handleInputChange($event))"
:type="inputType"
:tabindex="tabIndex"
:placeholder="placeholder"
:value="modelValue"
:required="isRequired"
/>
</template>
// ...
Run vue-tsc
once again... and boom! π₯ All errors disappeared.
Conclusions
I know how difficult it is to retrain to a new paradigm of interaction with the same objects and properties! But this simple error showed me just how powerful and useful TypeScript is in the real world.
Have a successful work and let simple errors never stop you on the way to realizing your projects! π
Photos and videos by
- Sascha Bosshard https://unsplash.com/photos/qhhp1LwvPSI
- Lucrezia Carnelos https://unsplash.com/photos/yGv-pvgRuiI
P.S.
If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! π»
βοΈ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.
And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!
My main projects that need your help (and stars) π
- π₯ gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
- β¨ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
Top comments (2)
Thank you this was super helpful. I was trying to pass in the checked value for a checkbox, this solved the error for me.
I was trying to figure out how to do this with JSDoc (standard JS Typescript for VS Code) and within the inline property of @change on the component. (so without the need of an extra function), this is what eventually worked:
@change="event => (modelValue = /**@type {HTMLInputElement} */ (event.target).value)"