1
00:00:02,200 --> 00:00:08,620
Now classes and all the constructor functions which have been around for longer do not just have properties

2
00:00:08,620 --> 00:00:12,810
which you can use to define the general structure of the object.

3
00:00:12,820 --> 00:00:18,880
You can also add methods we do actually do have a constructor method there but that's just a utility

4
00:00:19,090 --> 00:00:22,900
function which is called when you do instantiate the class.

5
00:00:22,990 --> 00:00:25,990
Remember in the past we only had constructor functions.

6
00:00:25,990 --> 00:00:31,540
Now we have that syntactic sugar but we still have to constructor function which we can add to run any

7
00:00:31,540 --> 00:00:33,300
initialization code.

8
00:00:33,370 --> 00:00:39,610
You might also want to add a couple of functions or methods as they're then called which you can call

9
00:00:39,670 --> 00:00:46,060
on the created object for example at describe method here on our department class.

10
00:00:46,060 --> 00:00:54,160
Now a method is added like this the name of the method then no colon no equal sign instead parentheses

11
00:00:54,430 --> 00:00:59,110
and then curly braces the parentheses take any arguments you might need.

12
00:00:59,110 --> 00:01:00,620
Now let's say here we don't need any.

13
00:01:00,830 --> 00:01:04,890
Otherwise you could add parameters just as you do it in a regular function.

14
00:01:05,230 --> 00:01:11,690
And what you'd typically always need though is a function body or a method body but we need curly braces.

15
00:01:12,070 --> 00:01:19,480
Here you now to find a logic of your method and there we might want to output the name of the department

16
00:01:19,600 --> 00:01:24,770
with a little bit of extra information maybe we can do it as of course you're with counsel law.

17
00:01:24,770 --> 00:01:30,160
For example the part meant colon and then maybe name.

18
00:01:30,670 --> 00:01:32,080
However this would not work.

19
00:01:32,140 --> 00:01:38,650
This would look for a variable name which has to exist inside of this described method or outside of

20
00:01:38,650 --> 00:01:40,730
the class as a global variable.

21
00:01:40,900 --> 00:01:46,000
And as you see fit choose H I get an error for a name I don't do this or I don't get this because there

22
00:01:46,000 --> 00:01:50,140
actually is a global name variable in the browser in the window object.

23
00:01:50,140 --> 00:01:56,050
Nonetheless this would not refer to this name property here but to some global name variable outside

24
00:01:56,050 --> 00:02:01,880
of this class to refer to a class property or method from inside of the class.

25
00:02:01,990 --> 00:02:05,680
We have to use the this keyword as we do it here in the constructor.

26
00:02:05,680 --> 00:02:12,970
This stand typically refers back to the concrete instance office class that was created and there with

27
00:02:12,970 --> 00:02:17,660
the dot notation we can access all the properties and methods of this instance.

28
00:02:17,680 --> 00:02:19,330
In this case the stock name.

29
00:02:19,990 --> 00:02:27,760
So if I now down there Call Accounting dot describe like this The this keyword when this executes will

30
00:02:27,760 --> 00:02:33,650
refer to this concrete accounting object that was built based on this class.

31
00:02:33,790 --> 00:02:38,750
So if I now safe it and we reload we should see this output here.

32
00:02:38,920 --> 00:02:42,150
Which of course has a typo but generally it works.

33
00:02:42,160 --> 00:02:44,260
Let's now fix the typo here.

34
00:02:44,320 --> 00:02:46,210
So this is how we can add a method.

35
00:02:46,240 --> 00:02:51,400
Now what important word about the this keyword as you probably know if you've worked with JavaScript

36
00:02:51,400 --> 00:02:54,940
a bit the this keyword can be tricky.

37
00:02:54,940 --> 00:03:06,730
For example if I would add another object here accounting copy and does this object which just has the

38
00:03:06,760 --> 00:03:14,650
describe method and dare I point at accounting dot describe then if I call accounting copy Dr. scribe

39
00:03:14,740 --> 00:03:17,140
as a method what do you think will happen.

40
00:03:17,170 --> 00:03:19,070
Do you think we get an error.

41
00:03:19,240 --> 00:03:26,280
We certainly get no compilation error that compiles just fine but at runtime we see department undefined.

42
00:03:26,410 --> 00:03:32,200
And the reason for Dad is that what I'm doing is I'm adding a disk drive property to this object which

43
00:03:32,200 --> 00:03:39,250
is created with the object literal not based on this class but just as a dummy object not based on any

44
00:03:39,250 --> 00:03:41,530
specific class you to find.

45
00:03:41,560 --> 00:03:48,130
And then the value for describe property is a pointer at the describe method in my accounting object.

46
00:03:49,050 --> 00:03:52,620
So I am pointing at this method here.

47
00:03:52,620 --> 00:03:54,720
The find for this concrete object.

48
00:03:54,750 --> 00:04:00,840
I'm not executing it so I'm not passing the value off this function execution to describe I'm really

49
00:04:00,840 --> 00:04:04,140
passing the function itself to describe here.

50
00:04:04,140 --> 00:04:08,920
So when I then call describe here on the copy it does indeed execute the method.

51
00:04:08,930 --> 00:04:10,470
This all works correctly.

52
00:04:10,470 --> 00:04:17,030
The problem just is when this method executes this will not refer to this object.

53
00:04:17,040 --> 00:04:20,790
This method was part of originally so not to the accounting object.

54
00:04:21,210 --> 00:04:25,050
Instead this and that's a good rule of thumb you can memorize.

55
00:04:25,050 --> 00:04:31,290
Typically refers to the thing which is responsible for calling a method and responsible for calling

56
00:04:31,290 --> 00:04:39,210
to describe method here in this case is accounting copy because we call describe on accounting copy.

57
00:04:39,210 --> 00:04:45,180
So this will refer to the thing in front of the dot here which is accounting copy that however is an

58
00:04:45,180 --> 00:04:47,570
object which has no name property.

59
00:04:47,580 --> 00:04:55,890
So when I access this stored name I get an error because this does not refer to an object with a name

60
00:04:55,890 --> 00:05:02,120
property so name yields as undefined indeed and that's why I'm getting this strange output.

61
00:05:02,280 --> 00:05:07,530
That's one thing you have to keep in mind not just in typescript it's a javascript thing.

62
00:05:07,530 --> 00:05:11,510
And of course therefore it can happen to you in typescript as well.

63
00:05:11,550 --> 00:05:18,890
Now to work around this this problem you can add a parameter to this describe method which is called

64
00:05:18,950 --> 00:05:19,690
this.

65
00:05:19,770 --> 00:05:23,450
That's a special parameter a special instruction.

66
00:05:23,460 --> 00:05:30,720
Understood by typescript if you add a parameter named this here it's not really a parameter which is

67
00:05:30,720 --> 00:05:31,470
expected.

68
00:05:31,470 --> 00:05:36,490
You still can call describe without passing in any value instead.

69
00:05:36,500 --> 00:05:43,070
This is interpreted by typescript to be a hint regarding what this should be referred to.

70
00:05:43,200 --> 00:05:49,920
And now it's important to assign a type to this and the type here in this case should be our class type

71
00:05:49,920 --> 00:05:50,130
here.

72
00:05:50,160 --> 00:05:58,520
So dept what I'm saying with this is when describe is executed this inside of describe.

73
00:05:58,530 --> 00:06:06,120
So in this case here should always refer to an instance that's based on the department class so an object

74
00:06:06,150 --> 00:06:12,420
which in the end would be of type department and therefore now we actually get an error down there.

75
00:06:12,420 --> 00:06:19,740
We get an error here because what we got here is that when we call describe here on accounting copy

76
00:06:19,830 --> 00:06:24,140
we're not calling it on an instance of department.

77
00:06:24,150 --> 00:06:26,400
So data for this will be violated.

78
00:06:26,400 --> 00:06:32,290
This in this case will not refer to an object of type department.

79
00:06:32,310 --> 00:06:39,030
So here we add some extra type safety by adding this dummy parameter because now if I try to save this

80
00:06:39,510 --> 00:06:45,270
I do get an error related to this line here because now indeed we would execute some code that would

81
00:06:45,270 --> 00:06:46,990
not work as expected.

82
00:06:47,100 --> 00:06:54,440
So we have to fix this for example by adding a name property here for that to work because now typescript

83
00:06:54,440 --> 00:07:03,350
sees OK the object on which you're calling describe now has a name property just like this expects it

84
00:07:03,350 --> 00:07:08,120
to have because this is based on the department object which also has a name property.

85
00:07:08,120 --> 00:07:12,210
So now here types could would be happy because we added name.

86
00:07:12,320 --> 00:07:18,740
If I remove it we get the error back with name however it does works and we avoid this undefined output

87
00:07:18,740 --> 00:07:19,790
from before.

88
00:07:19,820 --> 00:07:26,180
So that's important to understand about this and it's important to be aware of this improvement.

89
00:07:26,180 --> 00:07:32,840
You could add to your code to make sure that you catch unwanted behaviors like we had down there before.