WEBVTT

1
00:00.740 --> 00:02.360
Hi everyone.

2
00:02.960 --> 00:06.110
Let's continue with the inversion of control.

3
00:07.340 --> 00:07.730
Okay.

4
00:07.760 --> 00:15.680
The inversion of control is just a principle and it will achieve the loosely coupled 

5
00:16.460 --> 00:30.020
Now the whole purpose of inversion of control okay is resolve the "tightly coupled" and archive.

6
00:30.350 --> 00:30.650
Okay.

7
00:30.680 --> 00:33.740
And archive a loosely coupled

8
00:35.030 --> 00:43.190
And in this video let me show you what is the tightly coupled okay.

9
00:44.930 --> 00:50.300
Now for example, I will build the application inside the TypeScript playground.

10
00:50.720 --> 00:51.230
Okay.

11
00:51.260 --> 00:53.060
I will show you the concept.

12
00:54.290 --> 01:01.850
In here. I will build the application like I drive a car.

13
01:02.720 --> 01:03.140
Okay.

14
01:03.500 --> 01:08.930
To build this application I will create a two class.

15
01:09.140 --> 01:11.270
The one class will be the "person".

16
01:13.460 --> 01:16.670
And the second class will be the "car" okay.

17
01:17.180 --> 01:21.530
Now in the create person class.

18
01:22.280 --> 01:24.830
And the car.

19
01:27.200 --> 01:27.890
Now.

20
01:30.440 --> 01:31.160
Right here.

21
01:33.470 --> 01:38.450
For example, in the car I will return.

22
01:38.810 --> 01:40.490
Sorry I will have a method.

23
01:40.700 --> 01:41.750
Will get name.

24
01:41.960 --> 01:42.320
Okay.

25
01:42.740 --> 01:43.970
Get name of the car.

26
01:44.540 --> 01:48.530
I will return the name of the car.

27
01:48.890 --> 01:52.010
Let me see Lamborghini right here.

28
01:57.230 --> 01:57.740
Now.

29
01:58.580 --> 02:04.580
And inside the person, I want the drive a car

30
02:04.580 --> 02:04.970
Right.

31
02:05.000 --> 02:06.820
I will have a method called drive.

32
02:06.820 --> 02:07.210
Right?

33
02:09.580 --> 02:11.290
How I can drive a car.

34
02:12.280 --> 02:13.810
That's a question right now.

35
02:13.900 --> 02:20.440
In order to drive the right car, we must be initial

36
02:21.280 --> 02:21.880
Okay.

37
02:22.030 --> 02:26.350
We must init the car inside the person class.

38
02:26.830 --> 02:27.430
The car.

39
02:28.900 --> 02:33.520
Car right here and right here I will 

40
02:33.520 --> 02:39.250
I will console.log(this.car.getName())

41
02:43.090 --> 02:43.480
Actually

42
02:43.480 --> 02:46.360
I will cut that and use backtick

43
02:46.840 --> 02:51.100
I drive a car right here.

44
02:56.230 --> 02:58.630
And right here.

45
02:59.410 --> 03:03.280
I must use a new car.

46
03:03.940 --> 03:06.010
I must init like this

47
03:07.420 --> 03:08.080
Something like this.

48
03:09.940 --> 03:14.680
And now let me show you how I can run this function.

49
03:17.680 --> 03:27.640
You can see in here I will create a p1 equals new person.

50
03:30.820 --> 03:33.880
new Person()

51
03:35.920 --> 03:38.080
And I will call p1.drive()

52
03:41.950 --> 03:43.120
And call the function.

53
03:43.180 --> 03:52.120
Now let me see if I run you can see, it say I drive a Lamborghini.

54
03:53.620 --> 04:05.440
But this is clearly a "tightly coupled" because how I can drive another car, right.

55
04:05.470 --> 04:08.560
For example, later I will duplicate the car here.

56
04:09.190 --> 04:11.050
I will go, this is the car x

57
04:11.470 --> 04:12.940
Like this, okay

58
04:14.350 --> 04:16.870
And this will be the some name of the car.

59
04:17.380 --> 04:22.870
How I can drive a different car, right?

60
04:22.900 --> 04:33.520
In order to to achieve that, I will change the car here and the car here.

61
04:33.550 --> 04:34.360
Right.

62
04:35.410 --> 04:37.540
And if I run.

63
04:39.400 --> 04:44.080
If I run now, you will see it will show like this.

64
04:44.920 --> 04:50.530
But in the real world we don't want to do that.

65
04:50.560 --> 04:51.010
Right.

66
04:51.040 --> 04:56.320
We don't want to update the class.

67
04:58.540 --> 05:07.600
And for that reason, we will use the "loosely coupled" with the idea of inversion of control.

68
05:08.380 --> 05:12.190
Now let me see what is the inversion of control.

69
05:12.190 --> 05:17.740
Right here, instead of use initial a new car.

70
05:18.430 --> 05:22.630
We must use the constructor to initial that car.

71
05:25.540 --> 05:28.450
And right here will be this.car

72
05:29.980 --> 05:35.320
And in order to accept in the into the car here, we must use the car.

73
05:35.980 --> 05:37.690
Car right here

74
05:37.690 --> 05:41.290
this.car = car

75
05:41.290 --> 05:44.710
The car here is the parameter.

76
05:45.400 --> 05:50.380
And here right here will be the property of the class.

77
05:50.800 --> 05:51.940
I can change the name.

78
05:52.120 --> 05:54.460
So a little bit clear okay.

79
05:54.490 --> 05:57.850
You can see, I will undo

80
05:59.350 --> 06:10.300
Now you can see right now it will have the error because it's expect the one argument.

81
06:10.300 --> 06:11.020
Right.

82
06:11.650 --> 06:17.290
And for that reason we need to initialize the car with a new car.

83
06:18.510 --> 06:23.130
And I will pass the c1 here into the person.

84
06:24.900 --> 06:26.400
And let me run.

85
06:27.690 --> 06:28.440
Let me run.

86
06:29.070 --> 06:33.240
If I run now, you can see it will drive a Lamborghini.

87
06:35.340 --> 06:43.140
But the one more question right now is how the p1 can drive a car

88
06:43.170 --> 06:45.420
X right here, right?

89
06:45.900 --> 06:50.400
Because you can notice in the constructor I used a car here.

90
06:50.430 --> 06:55.380
It's clearly a will be the class of the car.

91
06:56.730 --> 07:04.920
Right now if I create a c2 equals a new CarX.

92
07:06.330 --> 07:12.000
And if I pass the c2 here, you can see it's a work or not.

93
07:12.720 --> 07:16.680
Now let's pause the video and think about does it work or not?

94
07:19.920 --> 07:20.340
Okay.

95
07:20.550 --> 07:27.300
Let me show you if I pass the c2 into p1

96
07:28.050 --> 07:33.390
Now you can see it doesn't have any error right in typescript.

97
07:34.320 --> 07:35.670
If I run this work.

98
07:36.900 --> 07:40.710
But why?

99
07:40.710 --> 07:47.820
Clearly the car how it can be work right here.

100
07:48.360 --> 07:55.080
Now you might think because this is same it's same name.

101
07:55.140 --> 07:58.890
But for example, if I have something like this get.

102
08:01.320 --> 08:01.620
X

103
08:03.420 --> 08:11.790
If you see now you can say it clearly different method, but it also work, right?

104
08:12.000 --> 08:12.660
Why?

105
08:12.660 --> 08:13.410
Why it work.

106
08:14.490 --> 08:17.730
Now let me show you the reason it work.

107
08:17.790 --> 08:22.020
If you look into the dot JS right here, this is compile.

108
08:22.440 --> 08:25.500
It will compile the TypeScript into JavaScript.

109
08:25.830 --> 08:32.490
And if you see when it compile, it will ignore the data type right here, right?

110
08:32.970 --> 08:39.450
So for that reason it works, but it only works in the TypeScript.

111
08:40.410 --> 08:49.350
If you write this code into the Java or C#, it will clearly not work because it's a different data

112
08:49.380 --> 08:49.800
type.

113
08:51.840 --> 08:52.200
Okay.

114
08:52.230 --> 08:54.870
It's only work because this is a.

115
08:57.330 --> 08:58.080
TypeScript.

116
08:59.430 --> 09:00.900
Hopefully this makes sense.

117
09:01.890 --> 09:06.870
And for example, if it not work how I can do that.

118
09:07.470 --> 09:15.570
Okay I will assume this not work because this is a right here.

119
09:17.040 --> 09:28.110
And in order to do that, in order to achieve the "loosely coupled" very clearly "loosely coupled"

120
09:28.110 --> 09:29.670
something call interface.

121
09:30.270 --> 09:30.630
Okay.

122
09:30.660 --> 09:33.570
I will create a interface call Vehical

123
09:35.250 --> 09:40.080
And inside interface I will define the getname.

124
09:40.830 --> 09:41.220
Okay.

125
09:41.250 --> 09:42.900
It will return a string.

126
09:43.380 --> 09:43.800
Okay.

127
09:43.830 --> 09:44.340
That's it

128
09:45.090 --> 09:49.110
And in here I will implement in the class.

129
09:49.140 --> 09:50.010
I will implement the vehical

130
09:51.720 --> 09:56.340
And in the car here I will also implement the vehical.

131
09:59.580 --> 10:00.240
And.

132
10:03.030 --> 10:06.390
In the car here I will change the car into the vehicle.

133
10:08.370 --> 10:13.200
Hopefully this makes sense because we used the interface.

134
10:13.230 --> 10:19.470
So it will work if you write this code right here in the Java or C sharp.

135
10:20.370 --> 10:26.190
And this is a "loosely coupled"

136
10:27.450 --> 10:27.960
Okay.

137
10:30.620 --> 10:32.540
But in TypeScript

138
10:32.540 --> 10:34.700
We usually not.

139
10:34.730 --> 10:35.840
Not write this

140
10:36.050 --> 10:36.800
way

141
10:36.980 --> 10:47.750
Because in the in the laser it will compile the code into .js and it will remove the interface.

142
10:47.780 --> 10:53.210
You can see this doesn't have any interface in the JavaScript right here.

143
10:53.810 --> 10:54.230
Right.

144
10:54.260 --> 11:01.220
For that reason in the Nest.js and in the TypeScript, we will not use the interface right here.

145
11:02.630 --> 11:04.880
And it will be work

146
11:07.190 --> 11:12.440
But now, let's clearly

147
11:14.630 --> 11:16.850
This only works because this is the JavaScript.

148
11:16.880 --> 11:17.660
Hopefully it's make sense

149
11:19.910 --> 11:20.420
Right.

150
11:20.870 --> 11:30.290
And I assume you already understand what is the "tightly coupled" and "loosely coupled"

151
11:32.180 --> 11:34.130
Okay, I will see you in the next one.