1
00:00:00,470 --> 00:00:03,360
In the section, we're going to start to discuss classes in, TypeScript.

2
00:00:03,710 --> 00:00:07,910
As usual, we'll get a plain definition, some examples, and then move on to discussing where we're

3
00:00:07,910 --> 00:00:09,330
going to actually use classes.

4
00:00:10,070 --> 00:00:14,660
This is the last big subject we're going to discuss before we start working on some interesting applications.

5
00:00:14,660 --> 00:00:15,740
So let's get to it.

6
00:00:16,219 --> 00:00:16,670
All right.

7
00:00:16,670 --> 00:00:21,030
So first off, definition, so a class is a blueprint of sorts.

8
00:00:21,050 --> 00:00:26,150
We are writing code here, but it's a blue print or a model of sorts that we're going to use to create

9
00:00:26,150 --> 00:00:29,700
an object that has some different fields and methods attached to it.

10
00:00:30,410 --> 00:00:35,270
We use these classes to represent different things or objects inside of our application.

11
00:00:36,050 --> 00:00:40,220
And whenever I say fields, I'm referring to different values that are going to be attached to an object.

12
00:00:40,400 --> 00:00:44,960
And whenever I say methods, we're referring to different functions that will be attached to an object.

13
00:00:46,670 --> 00:00:51,040
Now we're going to break covering classes into kind of two separate subjects, we're going to first

14
00:00:51,050 --> 00:00:55,880
discuss how classes work with methods or functions and then come back and add in the idea of fields

15
00:00:55,880 --> 00:00:56,670
and values to them.

16
00:00:57,380 --> 00:00:58,310
So let's get to it.

17
00:00:58,820 --> 00:01:02,150
I'm going to flip on over to my code editor in inside my project directory.

18
00:01:02,180 --> 00:01:04,830
I'm going to make a new file called Classes Dots.

19
00:01:05,660 --> 00:01:10,310
And inside of here, I want to define a new class that's going to represent a vehicle very similar to

20
00:01:10,310 --> 00:01:12,440
what we did in the last little example we went through.

21
00:01:13,130 --> 00:01:19,550
So I'm going to write out a new class definition by using the class keyword and then the name of the

22
00:01:19,550 --> 00:01:20,120
class.

23
00:01:20,850 --> 00:01:23,150
We're always going to capitalize the name of a class.

24
00:01:24,150 --> 00:01:29,520
Then inside of this class body, we can define different methods, so I might write out a method called

25
00:01:29,520 --> 00:01:35,790
Drive, I'll annotate it as taking no arguments and maybe a return type of void.

26
00:01:36,450 --> 00:01:38,600
And inside of here, maybe I'll do a quick consultation.

27
00:01:38,610 --> 00:01:40,890
Say something like chug, chug a.

28
00:01:43,040 --> 00:01:48,420
When we create a class, we are creating a blueprint or a definition of what a vehicle should be.

29
00:01:49,220 --> 00:01:51,920
We don't actually call the methods attached this class directly.

30
00:01:52,070 --> 00:01:54,980
In some cases we can, but with normal methods, we do not.

31
00:01:55,370 --> 00:02:00,850
Instead, we're going to use a class to create an instance of a class to do so.

32
00:02:00,860 --> 00:02:02,970
We're going to use the new keyword.

33
00:02:02,990 --> 00:02:08,060
So, for example, down here, we might say const vehicle is new vehicle like so.

34
00:02:09,050 --> 00:02:10,910
Notice the capitalization that we're using here.

35
00:02:10,940 --> 00:02:15,320
Traditionally, we're going to name all of our different classes with a capital letter, and then any

36
00:02:15,320 --> 00:02:20,180
time we have an instance of that class, we will sometimes use the same word, but spell it out with

37
00:02:20,180 --> 00:02:21,350
lowercase like so.

38
00:02:22,380 --> 00:02:26,550
So now with this instance of the class, we have access to all the different methods we define inside

39
00:02:26,550 --> 00:02:26,760
there.

40
00:02:27,080 --> 00:02:30,660
So, for example, we could do something like vehicle drive like so.

41
00:02:31,700 --> 00:02:35,960
Now, we've not been running a lot of the different code examples we've put together, but with classes,

42
00:02:35,960 --> 00:02:38,000
it's really important to actually execute some code.

43
00:02:38,000 --> 00:02:39,590
So you get a really good idea of what's going on.

44
00:02:40,120 --> 00:02:43,670
It's going to very quickly save this file and then flip back over my journal to run it.

45
00:02:44,790 --> 00:02:49,740
Back inside my project directory, remember, we can run some code with TS Download and then the name

46
00:02:49,740 --> 00:02:52,260
of the file in this case classes Dotty's.

47
00:02:53,200 --> 00:02:55,080
Now, I can see the council log up right there.

48
00:02:56,160 --> 00:03:00,720
We can attach as many methods as we want to to a class, so, for example, this class might also have

49
00:03:00,720 --> 00:03:01,740
a method called honk.

50
00:03:02,460 --> 00:03:03,780
It's not going to return anything.

51
00:03:04,170 --> 00:03:08,310
And any time I call it, maybe we will do a log of beep like so.

52
00:03:09,500 --> 00:03:12,020
So we can say this file flip back over once again.

53
00:03:12,510 --> 00:03:16,220
OK, one thing I forgot here sorry, down here at the bottom, we want to make sure we also call that

54
00:03:16,220 --> 00:03:17,030
method we just added.

55
00:03:17,030 --> 00:03:18,980
So we'll do a quick vehicle honk like.

56
00:03:18,980 --> 00:03:23,150
So now we'll say the file, flip back over and then run that file again.

57
00:03:23,600 --> 00:03:25,070
And now we can see that beep appear.

58
00:03:26,050 --> 00:03:30,280
Now, I'm going to sue if you're in this course, you've probably seen it classes before, so I just

59
00:03:30,280 --> 00:03:32,650
want to make sure you got a quick reminder, some of the basics around them.

60
00:03:33,250 --> 00:03:34,450
So let's take a quick pause right here.

61
00:03:34,450 --> 00:03:38,830
When we come back, the next video, we're going to start to discuss how classes in typescript are a

62
00:03:38,830 --> 00:03:43,960
little bit different than classes in a traditional like E 2015 JavaScript.

63
00:03:44,380 --> 00:03:46,350
So quick pause and I'll see you in just a minute.