1
00:00:01,580 --> 00:00:04,520
Now, we've completed our initial implementation of our user.

2
00:00:04,640 --> 00:00:10,490
We can try to actually make use of it inside of our index sites file in general any time we create a

3
00:00:10,490 --> 00:00:13,190
file that houses a single class in typescript.

4
00:00:13,340 --> 00:00:17,070
We're not going to have any actual code in here that does anything with the class.

5
00:00:17,480 --> 00:00:22,710
Instead, we will usually import this class into some other more central location and use it from there.

6
00:00:23,510 --> 00:00:29,090
So in order to get access to this class inside of our indexed Ortez file, we first have to export it.

7
00:00:29,480 --> 00:00:33,950
So to make the class available somewhere else inside of our project, I'm going to put the export keyword

8
00:00:33,950 --> 00:00:35,030
in front of it like so.

9
00:00:36,310 --> 00:00:41,050
Then inside of index starts at the very top of the file, I'm going to delete that console log really

10
00:00:41,050 --> 00:00:41,350
quick.

11
00:00:41,830 --> 00:00:48,190
We can write out to import a set of curly braces and then user from the user file.

12
00:00:49,230 --> 00:00:54,310
Now, if you're coming from a background of reactivates, chances are the syntax looks really familiar.

13
00:00:54,870 --> 00:00:57,540
Once again, we are going to look into the user file.

14
00:00:58,060 --> 00:01:04,110
We're going to find something inside there called user and pull it into the index file as a variable

15
00:01:04,110 --> 00:01:04,739
called user.

16
00:01:05,860 --> 00:01:10,330
Notice how we've got the curly braces on here, won't have a very quick aside on what those curly braces

17
00:01:10,330 --> 00:01:11,260
are doing for us.

18
00:01:12,100 --> 00:01:18,220
So any time that we export something from a file using just the export keyword by itself, we will always

19
00:01:18,220 --> 00:01:23,150
receive that in another file by placing that word inside of a set of curly braces.

20
00:01:23,920 --> 00:01:28,210
We do this so that we can safely export multiple different variables from this file.

21
00:01:28,720 --> 00:01:32,650
So, for example, if we had another variable inside of here that we wanted to export, like, let's

22
00:01:32,650 --> 00:01:35,530
say a variable called red, that was literally just a string red.

23
00:01:36,350 --> 00:01:43,100
I can now import this into index notes by adding it as an additional thing that we want to import from

24
00:01:43,100 --> 00:01:43,610
user.

25
00:01:46,610 --> 00:01:52,010
Once again, if you're coming from the world of react, the syntax might seem a little bit strange because

26
00:01:52,010 --> 00:01:56,210
in the react world we typically will export things using the default keyword.

27
00:01:56,660 --> 00:01:59,000
The default keyword is available inside of TypeScript as well.

28
00:01:59,120 --> 00:02:01,250
If you haven't used the default keyword, totally fine.

29
00:02:01,280 --> 00:02:02,840
Let's take a look at how it works really quickly.

30
00:02:03,750 --> 00:02:09,610
So right now, we've seen an example of how we can export very specific variables from a given file.

31
00:02:10,229 --> 00:02:14,790
However, we can choose to also export something as the default export from a file as well.

32
00:02:14,790 --> 00:02:19,680
So I could say export default and then just a single value by itself.

33
00:02:20,310 --> 00:02:23,920
So in this case, I did not provide a name for this value.

34
00:02:23,940 --> 00:02:24,900
I'm trying to export.

35
00:02:25,560 --> 00:02:30,480
Previously I had given it a name of red, which means I could import it into another file as the name

36
00:02:30,480 --> 00:02:30,800
Red.

37
00:02:31,200 --> 00:02:33,980
But this time it's literally just the string red by itself.

38
00:02:34,740 --> 00:02:42,120
So to import this value into another file, I would write out no curly braces and just the name of the

39
00:02:42,120 --> 00:02:42,990
thing I want to pull in.

40
00:02:43,200 --> 00:02:44,880
It's now red would be that string red.

41
00:02:45,720 --> 00:02:48,480
This name right here can actually be any variable we want to call it.

42
00:02:48,480 --> 00:02:53,610
So I could call it red or I could call it color or user color or whatever we want it to be.

43
00:02:55,330 --> 00:02:57,280
If we then did a console log of that.

44
00:02:58,590 --> 00:03:01,350
We would see literally just a strong red, that's it.

45
00:03:02,320 --> 00:03:06,610
In typescript, we usually do not use these default statements like the one you see right here.

46
00:03:07,240 --> 00:03:12,120
The reason for that is that when you're first getting started with these modules, like this import

47
00:03:12,130 --> 00:03:16,390
statement and this expert statement right here, it gets really confusing really quickly when you should

48
00:03:16,390 --> 00:03:18,390
use curly braces and when you shouldn't.

49
00:03:19,000 --> 00:03:23,940
So convention inside of TypeScript is to never use default export statements.

50
00:03:23,980 --> 00:03:28,780
Now, of course, there will be some people out there who disagree and who want to still use default

51
00:03:28,780 --> 00:03:29,770
default statements.

52
00:03:30,070 --> 00:03:34,570
If you work on a project where that is the case and you want to use default statements, totally fine.

53
00:03:35,230 --> 00:03:39,670
All I'm saying is that in the typescript world, it's a little bit more community convention to not

54
00:03:39,670 --> 00:03:41,500
use default exports.

55
00:03:42,410 --> 00:03:46,370
And once again, the reason for that is that then we don't have to worry about whether or not we have

56
00:03:46,370 --> 00:03:47,870
to include those curly braces.

57
00:03:48,880 --> 00:03:54,820
So if I don't have any default exports whatsoever, that means every time I import any code that is

58
00:03:54,820 --> 00:03:57,430
mine, I'm always going to put on those curly braces.

59
00:03:58,000 --> 00:04:02,380
So it just makes it really easy for me to remember and avoids simple little typos.

60
00:04:03,640 --> 00:04:10,030
Now, of course, that rule does not apply to third party modules, so new modules we use might still

61
00:04:10,030 --> 00:04:13,390
have a default expert statement, as is the case with Fakher right here.

62
00:04:13,750 --> 00:04:14,750
And that's totally fine.

63
00:04:14,770 --> 00:04:15,690
It is unavoidable.

64
00:04:16,120 --> 00:04:20,920
Nonetheless, the rule for us for code that we write is that we will avoid default statements if we

65
00:04:20,920 --> 00:04:21,279
can.

66
00:04:22,490 --> 00:04:25,870
OK, so that's a lot on default exports and all that kind of good stuff.

67
00:04:26,060 --> 00:04:31,340
So last thing, now that we've got the user inside of our index file, let's try to use it to create

68
00:04:31,340 --> 00:04:32,960
a new instance of a user.

69
00:04:34,950 --> 00:04:36,720
And then just log out that user.

70
00:04:39,970 --> 00:04:43,990
All right, now that I've got that, I'll flip back over to my terminal, I've already got a live reload

71
00:04:43,990 --> 00:04:46,810
here and you'll see that I've got a console log of my users.

72
00:04:46,810 --> 00:04:52,210
They have a name and a location that is an object with the latitude and longitude property as well.

73
00:04:52,780 --> 00:04:53,230
Perfect.

74
00:04:53,950 --> 00:04:54,250
All right.

75
00:04:54,250 --> 00:04:58,840
So now we've got our user all put together and we can access them inside of our index file.

76
00:04:59,050 --> 00:05:02,680
We're not going to repeat this whole same process for a company as well.

77
00:05:03,070 --> 00:05:05,050
It's a quick pause and I'll see you in just a minute.