1
00:00:00,300 --> 00:00:02,100
- Now I just have a
really simple example here

2
00:00:02,100 --> 00:00:03,330
where we have a person, object

3
00:00:03,330 --> 00:00:05,610
with an id, a name and an age.

4
00:00:05,610 --> 00:00:06,960
Super simple and you can see all

5
00:00:06,960 --> 00:00:08,316
of our code is working fine.

6
00:00:08,316 --> 00:00:10,230
What happens if I wanna make it so

7
00:00:10,230 --> 00:00:12,660
that I can't modify one of my properties?

8
00:00:12,660 --> 00:00:14,220
So for example here, the id,

9
00:00:14,220 --> 00:00:16,830
that's something I probably
don't ever want to change

10
00:00:16,830 --> 00:00:19,110
because the person
shouldn't change their id.

11
00:00:19,110 --> 00:00:21,660
But I can come in here and I
can say the idea is now equal

12
00:00:21,660 --> 00:00:24,570
to two and I'm not gonna get
any errors thrown at all.

13
00:00:24,570 --> 00:00:27,510
So in TypeScript they added
a read-only attribute,

14
00:00:27,510 --> 00:00:29,730
a property that you
can add to any property

15
00:00:29,730 --> 00:00:31,830
inside of an object or
an interface or a type

16
00:00:31,830 --> 00:00:34,020
and that's going to make sure
that that specific property

17
00:00:34,020 --> 00:00:35,850
is only going to be read only.

18
00:00:35,850 --> 00:00:37,350
So whether you have a type or interface

19
00:00:37,350 --> 00:00:39,390
that doesn't matter, they
work exactly the same.

20
00:00:39,390 --> 00:00:41,550
All you do is you just prefix
the thing that you want

21
00:00:41,550 --> 00:00:44,370
to make read only with
the keyword readonly.

22
00:00:44,370 --> 00:00:46,290
And now if I try to modify that id,

23
00:00:46,290 --> 00:00:48,090
it just essentially
says, Hey we can't assign

24
00:00:48,090 --> 00:00:50,220
to this because it's a read only property.

25
00:00:50,220 --> 00:00:52,440
Now technically this is
valid JavaScript code

26
00:00:52,440 --> 00:00:54,750
down here because I can
redefine it if I want,

27
00:00:54,750 --> 00:00:56,760
but by telling TypeScript
that I don't want to

28
00:00:56,760 --> 00:00:58,230
allow this to be redefined,

29
00:00:58,230 --> 00:00:59,580
it's going to make sure it throws an error

30
00:00:59,580 --> 00:01:02,557
anytime I try to compile
or an error inside of

31
00:01:02,557 --> 00:01:03,960
my editor to make me
aware that I marked this

32
00:01:03,960 --> 00:01:06,610
as read only for a reason
and I'm going against that.

33
00:01:07,458 --> 00:01:08,291
So it's obviously
something wrong with either

34
00:01:08,291 --> 00:01:11,370
my code or how I'm thinking
about this problem.

35
00:01:11,370 --> 00:01:13,890
So you can use read
only here inside of just

36
00:01:13,890 --> 00:01:15,990
essentially a type or a interface,

37
00:01:15,990 --> 00:01:18,450
but you can also use it
with an array as well.

38
00:01:18,450 --> 00:01:19,283
So for example,

39
00:01:19,283 --> 00:01:21,330
let's say I'm just gonna
create a brand new type here

40
00:01:21,330 --> 00:01:25,440
and this is just going to be number array

41
00:01:25,440 --> 00:01:28,470
and that is going to be
equal to a number array.

42
00:01:28,470 --> 00:01:29,880
Wow, could you have guessed that?

43
00:01:29,880 --> 00:01:33,030
But I'm gonna mark this as
a read only number array.

44
00:01:33,030 --> 00:01:35,190
Now I can come down here
and I can create an array.

45
00:01:35,190 --> 00:01:36,840
We'll just call it nums

46
00:01:36,840 --> 00:01:38,637
and this is gonna be our number array.

47
00:01:38,637 --> 00:01:40,710
We're gonna say it's one, two, three.

48
00:01:40,710 --> 00:01:42,870
Then if I try to say nums dot push

49
00:01:42,870 --> 00:01:44,760
you'll notice it doesn't even let me.

50
00:01:44,760 --> 00:01:45,593
There's no auto complete for that

51
00:01:45,593 --> 00:01:47,340
and that's because this
is a read-only array.

52
00:01:47,340 --> 00:01:49,650
So this does not even exist on the type.

53
00:01:49,650 --> 00:01:51,810
Also, if I try to like
add a property into here,

54
00:01:51,810 --> 00:01:53,370
for example I try to set this to three,

55
00:01:53,370 --> 00:01:54,360
I'm again gonna get an error

56
00:01:54,360 --> 00:01:55,650
cuz this is a read only array

57
00:01:55,650 --> 00:01:58,710
so I can't make any
modifications to it at all.

58
00:01:58,710 --> 00:02:01,200
So anytime you wanna create
an array that you can't change

59
00:02:01,200 --> 00:02:04,170
in any way, a read only
attribute's gonna be a great way

60
00:02:04,170 --> 00:02:05,400
for you to do that.

61
00:02:05,400 --> 00:02:07,200
And the really nice thing
is it just removes all

62
00:02:07,200 --> 00:02:08,730
the different methods
you could possibly use

63
00:02:08,730 --> 00:02:09,563
from your auto complete.

64
00:02:09,563 --> 00:02:11,010
As you can see, there's
nothing inside of here

65
00:02:11,010 --> 00:02:13,350
that allows me to
actually modify the array.

66
00:02:13,350 --> 00:02:16,140
It leaves in all of the methods
that manipulate the array

67
00:02:16,140 --> 00:02:18,630
without actually changing
anything by returning a new array,

68
00:02:18,630 --> 00:02:20,520
for example, for each or a map

69
00:02:20,520 --> 00:02:22,530
they just loop through the
array and return a new array.

70
00:02:22,530 --> 00:02:25,050
They don't actually make
changes to the array.

71
00:02:25,050 --> 00:02:26,220
So it's a really good way to make sure

72
00:02:26,220 --> 00:02:27,750
that you don't manipulate
something that you

73
00:02:27,750 --> 00:02:29,823
don't actually want to have manipulated.