In this lecture, we're going to explore the error thrown by TypeScript continuing where we left off.
Let's examine the issue in our component.
We are trying to update the image you are L property to the events dot target dot value property.
According to the error, we're trying to access a non-existent property called value in regular JavaScript.
The browser exposes the value of an input through the value property.
Technically, if TypeScript weren't so strict, our code would work perfectly.
So what's the deal?
The issue we're encountering stems from TypeScript, not angular.
To better understand, let's hover our mouse over the E object.
If you're using Visual Studio Code, the editor will provide you with information on the data type.
For example, our editors will tell us the E object is annotated with the keyboard event type.
That makes sense since we annotated the argument in the method.
Let's check out the data type of the target property.
This time, the editor is indicating the data type is set to event targets.
In the resource section of this lecture, I provide a link to the documentation page for this interface.
The event target interface is defined by TypeScript on the right side.
The documentation will provide you with the path to the file if you're interested in the definition
of the interface.
Let's scroll to a section called Index.
The index section contains a list of properties and methods.
Immediately, you'll realize the interface does not define a property called value.
Hopefully, the error is starting to become apparent.
TypeScript isn't aware there's a property called value on the target object.
This behavior can be helpful because it can prevent us from accessing properties that don't exist on
an object.
However, the value property does exist on the target.
Object input elements expose the field's value through the value property.
So why did the development team decide not to add the target property to the interface?
Let's think about this for a moment.
Keyboard events can be emitted on various elements.
They're not exclusive to input elements.
If a keyboard event was emitted on a non input element, the value property would be undefined.
For this reason, the interface does not guarantee the value property will always exist on the target
object.
This type of problem can appear from time to time.
Sometimes, a property or variable can be annotated with an incomplete interface.
Luckily, TypeScript offers a feature called Type Assertion.
Type assertion allows us to change the type from the compilers perspective.
I'll explain more in detail, but first, let's check out the syntax.
Switch back to the editor.
We can fix this error by wrapping the OECD target property with parentheses.
Next, we need to add the following as HTML input element.
The as key word will force the TypeScript compiler to assume a different type for an object or property.
This behavior is known as type assertion.
It's a way of helping the compiler understand the value.
Technically, the event target interface is correct, but the HTML input element interface is more accurate.
This interface should be applied to input elements on this interface.
The value property is defined after asserting the type.
The error has gone away.
If we hover our mouse over the target property, the type is being set to event target.
Switching over to the value property, the type completely changes, the type has been changed to a
Gmail input element.
Our new type has been asserted before accessing the value.
TypeScript is happy.
Let's check out the app in the browser.
The app is rendering at text input.
It's pretty filled with the property from our class.
We can change the image to whatever we want.
In the resource section of this lecture, I provide a link to a tool called Pick Some.
It's a tool for delivering dummy images for apps.
It's super convenient if you need a random set of images.
Feel free to browse through the list of images below every image.
There is an ID we can use to reference an image.
Back to our app, we can change to a different image by changing the first number in the URL, for example.
Let's change the number to 10 25.
We will get another picture of a dog, great.
Our event is working as expected, event binding is a powerful feature for listening to events on elements.
In some cases, we may need to help the compiler understand U-values data type by asserting the type.
We will continue working with components in the next lecture.