1
00:00:00,270 --> 00:00:06,720
In this lecture, we're going to explore the error thrown by TypeScript continuing where we left off.

2
00:00:06,810 --> 00:00:09,690
Let's examine the issue in our component.

3
00:00:09,840 --> 00:00:16,440
We are trying to update the image you are L property to the events dot target dot value property.

4
00:00:16,800 --> 00:00:24,420
According to the error, we're trying to access a non-existent property called value in regular JavaScript.

5
00:00:24,600 --> 00:00:29,280
The browser exposes the value of an input through the value property.

6
00:00:29,940 --> 00:00:35,160
Technically, if TypeScript weren't so strict, our code would work perfectly.

7
00:00:35,460 --> 00:00:36,480
So what's the deal?

8
00:00:36,720 --> 00:00:40,890
The issue we're encountering stems from TypeScript, not angular.

9
00:00:41,130 --> 00:00:45,510
To better understand, let's hover our mouse over the E object.

10
00:00:46,020 --> 00:00:52,020
If you're using Visual Studio Code, the editor will provide you with information on the data type.

11
00:00:52,320 --> 00:00:58,890
For example, our editors will tell us the E object is annotated with the keyboard event type.

12
00:00:59,370 --> 00:01:03,090
That makes sense since we annotated the argument in the method.

13
00:01:03,750 --> 00:01:06,900
Let's check out the data type of the target property.

14
00:01:07,200 --> 00:01:12,690
This time, the editor is indicating the data type is set to event targets.

15
00:01:13,050 --> 00:01:19,620
In the resource section of this lecture, I provide a link to the documentation page for this interface.

16
00:01:20,920 --> 00:01:26,320
The event target interface is defined by TypeScript on the right side.

17
00:01:26,440 --> 00:01:32,290
The documentation will provide you with the path to the file if you're interested in the definition

18
00:01:32,290 --> 00:01:33,370
of the interface.

19
00:01:33,700 --> 00:01:36,490
Let's scroll to a section called Index.

20
00:01:37,060 --> 00:01:41,110
The index section contains a list of properties and methods.

21
00:01:41,410 --> 00:01:47,050
Immediately, you'll realize the interface does not define a property called value.

22
00:01:47,650 --> 00:01:50,740
Hopefully, the error is starting to become apparent.

23
00:01:51,040 --> 00:01:56,290
TypeScript isn't aware there's a property called value on the target object.

24
00:01:56,650 --> 00:02:02,770
This behavior can be helpful because it can prevent us from accessing properties that don't exist on

25
00:02:02,770 --> 00:02:03,550
an object.

26
00:02:04,060 --> 00:02:07,930
However, the value property does exist on the target.

27
00:02:07,930 --> 00:02:13,780
Object input elements expose the field's value through the value property.

28
00:02:14,200 --> 00:02:19,750
So why did the development team decide not to add the target property to the interface?

29
00:02:19,990 --> 00:02:21,790
Let's think about this for a moment.

30
00:02:22,390 --> 00:02:25,790
Keyboard events can be emitted on various elements.

31
00:02:26,110 --> 00:02:28,540
They're not exclusive to input elements.

32
00:02:28,810 --> 00:02:35,800
If a keyboard event was emitted on a non input element, the value property would be undefined.

33
00:02:36,130 --> 00:02:42,970
For this reason, the interface does not guarantee the value property will always exist on the target

34
00:02:42,970 --> 00:02:43,630
object.

35
00:02:44,230 --> 00:02:46,990
This type of problem can appear from time to time.

36
00:02:47,360 --> 00:02:52,570
Sometimes, a property or variable can be annotated with an incomplete interface.

37
00:02:52,840 --> 00:02:57,070
Luckily, TypeScript offers a feature called Type Assertion.

38
00:02:57,460 --> 00:03:02,500
Type assertion allows us to change the type from the compilers perspective.

39
00:03:03,100 --> 00:03:07,450
I'll explain more in detail, but first, let's check out the syntax.

40
00:03:07,690 --> 00:03:09,280
Switch back to the editor.

41
00:03:11,870 --> 00:03:17,360
We can fix this error by wrapping the OECD target property with parentheses.

42
00:03:19,780 --> 00:03:25,060
Next, we need to add the following as HTML input element.

43
00:03:27,580 --> 00:03:34,810
The as key word will force the TypeScript compiler to assume a different type for an object or property.

44
00:03:35,170 --> 00:03:37,750
This behavior is known as type assertion.

45
00:03:38,080 --> 00:03:41,320
It's a way of helping the compiler understand the value.

46
00:03:41,590 --> 00:03:49,750
Technically, the event target interface is correct, but the HTML input element interface is more accurate.

47
00:03:50,110 --> 00:03:54,790
This interface should be applied to input elements on this interface.

48
00:03:54,940 --> 00:03:59,470
The value property is defined after asserting the type.

49
00:03:59,650 --> 00:04:01,180
The error has gone away.

50
00:04:01,540 --> 00:04:08,110
If we hover our mouse over the target property, the type is being set to event target.

51
00:04:10,770 --> 00:04:17,720
Switching over to the value property, the type completely changes, the type has been changed to a

52
00:04:17,880 --> 00:04:19,500
Gmail input element.

53
00:04:19,860 --> 00:04:23,670
Our new type has been asserted before accessing the value.

54
00:04:24,090 --> 00:04:25,440
TypeScript is happy.

55
00:04:25,710 --> 00:04:27,870
Let's check out the app in the browser.

56
00:04:30,540 --> 00:04:32,700
The app is rendering at text input.

57
00:04:33,090 --> 00:04:36,060
It's pretty filled with the property from our class.

58
00:04:36,420 --> 00:04:39,090
We can change the image to whatever we want.

59
00:04:39,390 --> 00:04:44,730
In the resource section of this lecture, I provide a link to a tool called Pick Some.

60
00:04:45,030 --> 00:04:48,120
It's a tool for delivering dummy images for apps.

61
00:04:48,330 --> 00:04:51,900
It's super convenient if you need a random set of images.

62
00:04:52,470 --> 00:04:57,110
Feel free to browse through the list of images below every image.

63
00:04:57,120 --> 00:05:00,090
There is an ID we can use to reference an image.

64
00:05:02,610 --> 00:05:09,660
Back to our app, we can change to a different image by changing the first number in the URL, for example.

65
00:05:09,840 --> 00:05:12,570
Let's change the number to 10 25.

66
00:05:15,020 --> 00:05:18,080
We will get another picture of a dog, great.

67
00:05:18,380 --> 00:05:26,030
Our event is working as expected, event binding is a powerful feature for listening to events on elements.

68
00:05:26,240 --> 00:05:33,170
In some cases, we may need to help the compiler understand U-values data type by asserting the type.

69
00:05:33,470 --> 00:05:36,980
We will continue working with components in the next lecture.