1
00:00:00,890 --> 00:00:04,700
In this video, we're going to right out just a little bit of code to get a better idea of what's going

2
00:00:04,700 --> 00:00:05,570
on with these types.

3
00:00:05,870 --> 00:00:09,650
Now, this first little bit of code that we're going to right around type's is going to be really simple

4
00:00:09,650 --> 00:00:13,430
and straightforward just to kind of hammer home some of the concepts that we've been talking about.

5
00:00:13,970 --> 00:00:17,990
But on some of the other examples or other topics we're going to discuss very shortly, we're going

6
00:00:17,990 --> 00:00:20,030
to read out much more complete code snippets.

7
00:00:20,300 --> 00:00:21,740
So anyways, let's get started.

8
00:00:22,220 --> 00:00:24,470
I'm going to begin by flipping on over to my code editor.

9
00:00:25,300 --> 00:00:27,700
I'm still inside of my fetch JSON directory.

10
00:00:28,150 --> 00:00:32,770
I'm going to change out into my workspace folder and then inside of here I'm going to make a new project

11
00:00:32,770 --> 00:00:36,880
directory to hold all these different code snippets we're going to put together as we're going through

12
00:00:36,880 --> 00:00:38,680
some basic features of TypeScript.

13
00:00:39,200 --> 00:00:42,430
So I'm going to make a new directory here called Features.

14
00:00:43,480 --> 00:00:47,800
I'll then change into that directory and then I'll open up my code editor inside there.

15
00:00:49,810 --> 00:00:53,740
Once my editors open and then going to make a new file and I'm just going to call it type.

16
00:00:54,650 --> 00:00:59,200
So like I said, I just want to write out one or two quick snippets of code just to get a better idea

17
00:00:59,200 --> 00:00:59,920
of what's going on.

18
00:01:01,390 --> 00:01:06,730
So I want you to remember that the entire idea behind this type system is that it is an easy way for

19
00:01:06,730 --> 00:01:10,390
us to refer to the different properties and functions that a value has.

20
00:01:11,080 --> 00:01:15,880
In addition, every value, everything that we can assign to a variable has a type.

21
00:01:16,760 --> 00:01:21,590
So to get started, I'm going to flip back over my code editor and I want to just try creating a variable

22
00:01:21,620 --> 00:01:24,530
that's going to point to an instance of a date object.

23
00:01:24,980 --> 00:01:28,850
So I'll say Kohn's today is going to be a new date like so.

24
00:01:29,650 --> 00:01:36,070
If I hover over that variable, my editor will then tell me the type of value that this variable is

25
00:01:36,070 --> 00:01:36,730
pointing at.

26
00:01:36,850 --> 00:01:41,440
So this is saying that the today variable is pointing out an object of type data.

27
00:01:42,340 --> 00:01:47,410
TypeScript can now use that information to decide exactly what we can do with that variable.

28
00:01:48,040 --> 00:01:54,490
So, for example, if I put down today and then I dot, I see my autocomplete pop up right here, this

29
00:01:54,490 --> 00:01:58,570
is listing out all the different functions and properties that a date object has.

30
00:01:59,710 --> 00:02:05,740
TypeScript only knows to show this information right here because it has an internal definition of exactly

31
00:02:05,740 --> 00:02:06,820
what a date is.

32
00:02:07,240 --> 00:02:11,860
In other words, TypeScript knows the properties and methods that a date has so it can print them up

33
00:02:11,860 --> 00:02:12,820
in this list right here.

34
00:02:13,620 --> 00:02:16,050
And I can easily select one and call it like so.

35
00:02:16,940 --> 00:02:21,770
And then, as we saw just a moment ago, because typescript knows what methods a date has and what properties

36
00:02:21,770 --> 00:02:26,770
it has, if we tried to reference one that doesn't exist, we will very quickly get an error message.

37
00:02:27,200 --> 00:02:28,820
So that's the whole point of type's.

38
00:02:29,000 --> 00:02:34,910
It is a shortcut to say here are the different properties and methods that this value right here has.

39
00:02:36,540 --> 00:02:40,620
OK, so that's an example of looking at the type that a date object brings up.

40
00:02:40,980 --> 00:02:43,740
Let's now try creating and explain JavaScript object.

41
00:02:44,020 --> 00:02:45,900
So I'll say something like consed person.

42
00:02:46,790 --> 00:02:52,700
Is going to be an object like so, and I'll give this person how about like just an age of 20 if I now

43
00:02:52,700 --> 00:02:57,950
hover over that person variable, I'll see a person or a person excuse me.

44
00:02:58,160 --> 00:03:03,530
And then right after that, in this case, I don't get a nice name for the type because I've not actually

45
00:03:03,740 --> 00:03:05,740
given this object right here.

46
00:03:06,320 --> 00:03:07,880
A name is shortened name.

47
00:03:08,660 --> 00:03:12,860
So we can kind of see our definition, that of a type kind of holds up here.

48
00:03:13,280 --> 00:03:19,040
If we don't have a shortened definition of what this object is, then TypeScript is just going to default

49
00:03:19,040 --> 00:03:23,550
to printing out all the different properties and methods that the object has.

50
00:03:23,570 --> 00:03:26,030
So in this case, it has just an age that is a No.

51
00:03:27,170 --> 00:03:31,880
And once again, if we tried to reference some property on that variable that doesn't actually exist,

52
00:03:32,630 --> 00:03:33,830
we're going to get an error message.

53
00:03:35,350 --> 00:03:40,780
OK, just one more quick example here, so down here, I'm going to try to create a class, I'll call

54
00:03:40,780 --> 00:03:43,330
it color, I'm not going to give it any implementation.

55
00:03:43,870 --> 00:03:46,480
Now, even if you don't know what a class is, that's totally fine.

56
00:03:46,480 --> 00:03:49,000
We're going to go into great detail on classes later on.

57
00:03:50,520 --> 00:03:57,090
I can now use this class to make a new instance of a color Salceda like, say, consed red is new color

58
00:03:57,090 --> 00:03:57,690
like so.

59
00:03:58,530 --> 00:04:03,780
And now, just as we've seen twice before now, if I hover over read, TypeScript knows that this variable

60
00:04:03,780 --> 00:04:06,810
is pointing at an object that is of type color.

61
00:04:07,240 --> 00:04:12,030
That means that this variable right here has access to all the properties and all the methods that a

62
00:04:12,030 --> 00:04:13,260
color object has.

63
00:04:13,800 --> 00:04:17,250
In this case, none, because we haven't actually implemented anything here.

64
00:04:17,640 --> 00:04:23,910
And we can see that if we write out a red and then like so there are no properties associated with this

65
00:04:23,910 --> 00:04:24,720
class of color.

66
00:04:24,930 --> 00:04:26,850
So we don't get any autocomplete whatsoever.

67
00:04:27,180 --> 00:04:31,440
If I try to reference anything as usual, I'll get a very quick error message here as well.

68
00:04:32,840 --> 00:04:37,970
OK, so that's just a couple of quick example, examples of types, so let's take a quick pause right

69
00:04:37,970 --> 00:04:38,240
here.

70
00:04:38,270 --> 00:04:43,520
We're going to wrap up this idea of type's with a quick discussion, really quick, I promise, on where

71
00:04:43,520 --> 00:04:46,010
we're going to use type's in a normal project.

72
00:04:46,250 --> 00:04:48,190
So quick pause and I'll see you in just a minute.