1
00:00:00,240 --> 00:00:06,120
In this lecture, we're going to look at how to apply types to an object working with objects, and

2
00:00:06,120 --> 00:00:07,740
TypeScript is interesting.

3
00:00:08,100 --> 00:00:13,230
We can add optional properties, interfaces and work with nested structures.

4
00:00:13,500 --> 00:00:15,580
Let's take it one step at a time.

5
00:00:15,930 --> 00:00:19,560
Below the array, we will add an object called accounts.

6
00:00:22,190 --> 00:00:25,310
The accounts object will represent a bank accounts.

7
00:00:25,640 --> 00:00:30,170
Will keep it simple by adding two properties called name and balance.

8
00:00:32,710 --> 00:00:38,120
The name property has a string value, the balanced property has a number of value.

9
00:00:38,350 --> 00:00:40,420
We haven't annotated the object.

10
00:00:40,690 --> 00:00:46,540
Luckily, type inference kicks in since we're initializing the object with some values.

11
00:00:46,840 --> 00:00:53,380
If we hover our mouse over the object, TypeScript will correctly infer the types of our properties.

12
00:00:54,040 --> 00:01:00,160
It's also possible to explicitly define the type for an object after the variable name.

13
00:01:00,340 --> 00:01:04,150
Let's add a colon, followed by a pair of square brackets.

14
00:01:06,610 --> 00:01:11,650
The syntax for annotating an object is similar to creating an object itself.

15
00:01:12,010 --> 00:01:17,560
The annotation should be an object with a list of properties that can be found within the object.

16
00:01:17,920 --> 00:01:24,640
If we decide to annotate properties in our object explicitly, we must set a type for every property.

17
00:01:25,000 --> 00:01:30,820
If there's a property inside our object that's not annotated, TypeScript will throw an error.

18
00:01:32,090 --> 00:01:36,380
Inside this object, we'll add the name and balance properties.

19
00:01:36,680 --> 00:01:40,130
They will be set to string and no, respectively.

20
00:01:42,860 --> 00:01:46,670
In some scenarios, you may want to make a property optional.

21
00:01:46,880 --> 00:01:50,780
For example, let's say we had a property called status.

22
00:01:51,080 --> 00:01:54,260
The type for this property will be set to string.

23
00:01:56,950 --> 00:02:03,070
After adding this type, an error is thrown by TypeScript taking a closer look at the error.

24
00:02:03,280 --> 00:02:07,060
It's telling us the status type is missing from the object.

25
00:02:07,420 --> 00:02:12,700
It's possible we may want to add this property at a later point in our application.

26
00:02:13,120 --> 00:02:19,720
We can get around this error without adding the property in our object by making it optional in the

27
00:02:19,720 --> 00:02:21,130
annotation object.

28
00:02:21,220 --> 00:02:25,270
We will add a question mark symbol after the status property.

29
00:02:27,890 --> 00:02:30,410
We're adding this symbol to the annotation.

30
00:02:30,650 --> 00:02:33,680
It's not being applied to the value itself.

31
00:02:34,010 --> 00:02:39,830
It can be confusing with the syntax, since the annotation and value are formatted the same.

32
00:02:40,310 --> 00:02:43,310
After adding the symbol, the error has disappeared.

33
00:02:43,550 --> 00:02:44,000
Great.

34
00:02:44,660 --> 00:02:48,500
Before I end this lecture, there's one more thing I want to mention.

35
00:02:48,770 --> 00:02:52,280
It's not uncommon to have to combine arrays and objects.

36
00:02:52,580 --> 00:02:59,450
For example, instead of a single account, we may need to work with multiple accounts below this variable.

37
00:02:59,480 --> 00:03:02,630
We will declare another variable called accounts.

38
00:03:05,260 --> 00:03:08,350
For the sake of simplicity, it won't have a value.

39
00:03:08,620 --> 00:03:14,620
We will annotate this variable by adding curly braces, followed by a pair of square brackets.

40
00:03:17,130 --> 00:03:22,560
This syntax will tell TypeScript the variable will store an array of objects.

41
00:03:22,950 --> 00:03:25,600
That's all there is to it in the next lecture.

42
00:03:25,710 --> 00:03:29,940
We will look at how we can clean this up by using interfaces.