1
00:00:00,680 --> 00:00:05,180
In this video, we're going to do a little bit of environment setup once we set up our local machine

2
00:00:05,180 --> 00:00:08,210
to work with, TypeScript will then begin working on our first project.

3
00:00:08,360 --> 00:00:09,410
So let's get to it.

4
00:00:10,470 --> 00:00:13,920
The first thing we'll do is to install the typescript compiler to install it.

5
00:00:13,950 --> 00:00:15,180
We're going to use NPM.

6
00:00:15,520 --> 00:00:19,590
If you're here in this course, I'm going to assume that you've got a basic understanding of both node

7
00:00:19,590 --> 00:00:20,550
and NPM.

8
00:00:21,000 --> 00:00:25,940
So I'm going to assume in particular that you've already got node and NPM installed on your local system.

9
00:00:26,700 --> 00:00:30,870
If you don't, you'll want to do a quick Google search on how to install node on your local machine.

10
00:00:30,900 --> 00:00:33,960
Again, I'm really assuming that you've got that knowledge ahead of time.

11
00:00:34,980 --> 00:00:39,090
So we're going to use NPRM to install typescript as a global module.

12
00:00:39,420 --> 00:00:42,870
We're also going to install a second module called T.S.A..

13
00:00:43,560 --> 00:00:49,020
T.S.A. is a little command line tool that allows us to compile and execute typescript with one command

14
00:00:49,020 --> 00:00:49,690
at our terminal.

15
00:00:50,070 --> 00:00:54,030
We're going to use it in the first half of this course just for running some typescript very quickly

16
00:00:54,030 --> 00:00:57,420
without having to set up a full tooling installation kind of deal.

17
00:00:57,880 --> 00:00:58,790
So let's get to it.

18
00:00:59,370 --> 00:01:02,250
I'm going to open up my terminal once over here.

19
00:01:02,250 --> 00:01:09,690
I'm going to run NPM, install Dastgir and I'll get TypeScript and TSD node like so.

20
00:01:11,000 --> 00:01:16,040
All right, so that's going to take just a moment or two to install rather quickly, once it is installed,

21
00:01:16,040 --> 00:01:22,070
I can then make sure that it is successfully installed and I can run the compiler by running TSC Dash

22
00:01:22,070 --> 00:01:23,630
dash help like so.

23
00:01:24,650 --> 00:01:26,780
So we installed a package called TypeScript.

24
00:01:28,060 --> 00:01:33,290
It gives us access to a command called TSC, which is sought for, as you might guess, typescript compiler.

25
00:01:33,640 --> 00:01:38,380
This is what we're going to use to actually compile our typescript code into plain JavaScript.

26
00:01:39,300 --> 00:01:44,640
So if I run this command, I should see a bunch of help messages appear on the screen like so if you

27
00:01:44,640 --> 00:01:49,650
see any air that means that you're NPM installation probably has a little issue and you'll need to do

28
00:01:49,650 --> 00:01:50,820
a little bit of troubleshooting.

29
00:01:51,730 --> 00:01:57,370
OK, so that's pretty much it for the actual typescript set up now we're going to walk through a little

30
00:01:57,370 --> 00:02:01,000
additional setup here for setting up Visual Studio code.

31
00:02:01,480 --> 00:02:02,860
Now, this is a code editor.

32
00:02:02,980 --> 00:02:07,810
If you've already got Visual Studio Code installed, I encourage you to still watch this video, because

33
00:02:07,810 --> 00:02:10,270
I'm going to show you some settings that are important for you to have.

34
00:02:11,080 --> 00:02:14,850
If you want to use another code editor inside this course, that's totally fine.

35
00:02:15,100 --> 00:02:19,990
I've tried out many other code editors, and personally, I think that Visual Studio Code is one of

36
00:02:19,990 --> 00:02:22,210
the best ones out there for working with TypeScript.

37
00:02:22,670 --> 00:02:25,840
So if you've never used it, I would recommend at least try it one time.

38
00:02:26,950 --> 00:02:29,560
So I'm going to go through the installation process here really quickly.

39
00:02:30,100 --> 00:02:34,510
Well, first go to that link inside of a new browser tab and I'll find the green download button on

40
00:02:34,510 --> 00:02:35,320
the left hand side.

41
00:02:36,960 --> 00:02:39,960
Once I download the zip file, I'll then open it up.

42
00:02:41,650 --> 00:02:43,360
That's going to extract it.

43
00:02:44,460 --> 00:02:49,380
Here's the Visual Studio Code application, and if you're on Mac, all you have to do is drag and drop

44
00:02:49,380 --> 00:02:51,000
that into the applications folder.

45
00:02:51,720 --> 00:02:54,620
If you're on Windows, you're going to instead see a little installer.

46
00:02:54,870 --> 00:02:57,340
All you have to do is go through the installation process.

47
00:02:57,390 --> 00:02:58,770
It's just a couple of clicks.

48
00:03:00,150 --> 00:03:05,370
Now that we've got the code installed, we're going to do just a couple steps of configuration, so

49
00:03:05,370 --> 00:03:06,670
this is what we're going to go through.

50
00:03:06,720 --> 00:03:09,060
I'm mostly showing you these configuration steps.

51
00:03:09,060 --> 00:03:12,080
Just you understand the exact settings that I'm running locally.

52
00:03:12,840 --> 00:03:18,420
Now, just to be clear, I just did a fresh installation of this code, like I completely deleted my

53
00:03:18,420 --> 00:03:19,490
previous installation.

54
00:03:20,100 --> 00:03:24,500
So when I go through these settings, you're going to see a fresh installation being set up here.

55
00:03:24,510 --> 00:03:27,000
So I don't have any previous set up whatsoever.

56
00:03:27,990 --> 00:03:32,400
All right, so let's get to it, the first thing I'm going to do is open up a visual studio code.

57
00:03:35,200 --> 00:03:39,340
And it's going to take just a moment, this first time that it boots up to actually open, so it's going

58
00:03:39,340 --> 00:03:40,150
to let it do its thing.

59
00:03:42,070 --> 00:03:43,110
All right, there we go.

60
00:03:47,000 --> 00:03:50,990
All right, so once I've got Visual Studio Code open, we're going to go through each of these different

61
00:03:50,990 --> 00:03:52,550
set up steps right here.

62
00:03:53,220 --> 00:03:57,110
The first thing I'm going to do is set up code in my path variable.

63
00:03:57,680 --> 00:04:02,210
And what this essentially does is allow me to launch my code editor from the terminal, which I'm going

64
00:04:02,210 --> 00:04:03,850
to be doing quite a bit throughout this course.

65
00:04:04,580 --> 00:04:10,670
So to do so, I'm going to go over to the editor and I'll go up to view and then find command pallet.

66
00:04:11,690 --> 00:04:17,269
And then once here, I'm going to search for ad path, actually, not ad path, I think it's install

67
00:04:17,269 --> 00:04:17,740
path.

68
00:04:17,990 --> 00:04:18,410
There we go.

69
00:04:18,740 --> 00:04:23,510
So install a code command in path we have to do is click that and that's pretty much it.

70
00:04:23,510 --> 00:04:25,160
We'll see a little notification down here.

71
00:04:26,040 --> 00:04:31,020
If I now flip on over to my terminal, I can open up a new window, make sure you open up a new window,

72
00:04:31,020 --> 00:04:34,320
if you try to run this command in an existing window, it's probably going to fail.

73
00:04:35,010 --> 00:04:39,810
And then once over here, you can open up your code editor in any directory by running code and then

74
00:04:39,810 --> 00:04:40,470
dot like.

75
00:04:40,470 --> 00:04:44,130
So as you'll see, it'll pop up in my code editor right away.

76
00:04:45,620 --> 00:04:49,010
All right, so let's keep going through these installation steps, the other ones are going to be pretty

77
00:04:49,010 --> 00:04:49,340
quick.

78
00:04:49,950 --> 00:04:52,880
The next one is going to be to install the prettier extension.

79
00:04:53,720 --> 00:04:55,210
Prettier is a code formatter.

80
00:04:55,250 --> 00:04:59,810
It's going to take a look at your code every time you save a file and automatically format it in some

81
00:04:59,960 --> 00:05:01,010
fixed fashion.

82
00:05:01,490 --> 00:05:04,820
So I usually use pretty or just have some very consistent looking code.

83
00:05:05,130 --> 00:05:06,940
I highly recommend you try it out as well.

84
00:05:07,860 --> 00:05:12,240
To install this extension, I'll go back over to my editor, I'll find a view.

85
00:05:13,310 --> 00:05:14,990
Well, then, look for extension's.

86
00:05:16,140 --> 00:05:19,110
And then on the left hand side, I'll search for prettier.

87
00:05:20,740 --> 00:05:26,320
And it's going to be the first one right here by SBN Peterson, so I'll hit install.

88
00:05:27,530 --> 00:05:28,640
And that's pretty much it.

89
00:05:30,110 --> 00:05:32,450
Now we're going to do a little bit of configuration on prettier.

90
00:05:32,630 --> 00:05:36,460
We're going to make sure first that it format's every file when we save it.

91
00:05:37,310 --> 00:05:39,050
So to do so, I'll go back over.

92
00:05:39,780 --> 00:05:41,840
I'm going to again go to my view menu.

93
00:05:43,100 --> 00:05:49,100
And I'm going to look for excuse me, not you, I'm looking for preferences or civic code preferences

94
00:05:49,100 --> 00:05:49,620
settings.

95
00:05:49,640 --> 00:05:50,180
There it is.

96
00:05:52,920 --> 00:05:57,720
And then once I've got the Settings tab up right here, I'll do a search for format.

97
00:05:58,710 --> 00:06:00,300
On Save.

98
00:06:01,150 --> 00:06:06,160
And we'll see a setting right here called format on save, so we just have to check that and that's

99
00:06:06,160 --> 00:06:06,780
pretty much it.

100
00:06:08,800 --> 00:06:11,830
Next up, I'm going to configure prettier to use single quotes.

101
00:06:11,980 --> 00:06:13,960
Now, this is entirely personal.

102
00:06:13,960 --> 00:06:16,030
If you want to use double quotes, totally fine.

103
00:06:16,210 --> 00:06:19,900
You cannot use either single quotes or double quotes safely with typescript.

104
00:06:20,050 --> 00:06:21,480
I just prefer single quotes.

105
00:06:21,960 --> 00:06:25,060
So to set up prettier to format my code in that fashion.

106
00:06:25,540 --> 00:06:27,070
I'll go back over my settings page.

107
00:06:27,350 --> 00:06:29,680
I'll look for single quotes.

108
00:06:31,210 --> 00:06:35,980
And I'll scroll down just a little bit right here and I'll see a sudden called prettier single quotes

109
00:06:36,220 --> 00:06:37,020
and check it.

110
00:06:39,880 --> 00:06:45,160
All right, next one is I'm going to make sure that I use two spaces for indentation as opposed to tabs.

111
00:06:45,370 --> 00:06:46,890
Again, this is very personal.

112
00:06:46,900 --> 00:06:47,860
You can go either way.

113
00:06:48,100 --> 00:06:50,620
I personally like to use two spaces for indentation.

114
00:06:51,460 --> 00:06:54,760
So to do so, I'm going to delete the search term up here.

115
00:06:56,040 --> 00:07:01,410
And then scroll down on the default settings here just a little bit, and I should see tab size right

116
00:07:01,410 --> 00:07:01,780
here.

117
00:07:02,460 --> 00:07:05,010
Now, let's change it to two like so.

118
00:07:08,330 --> 00:07:13,040
All right, so last thing, I'm going to set my theme to be civilized light specials, going to change

119
00:07:13,040 --> 00:07:14,840
the coloring of my editor a little bit.

120
00:07:15,740 --> 00:07:17,780
So to do so, I'm going to go back over once again.

121
00:07:18,080 --> 00:07:19,400
I'll look for theme.

122
00:07:20,490 --> 00:07:25,690
I'll find color theme right here, right now, the default is dark, and I'm going to change it to solar

123
00:07:25,690 --> 00:07:26,700
rays light instead.

124
00:07:27,940 --> 00:07:28,560
And that's it.

125
00:07:29,840 --> 00:07:34,460
OK, now one last little thing I'm going to do here, I am going to hide this bar on the left hand side,

126
00:07:35,120 --> 00:07:38,090
I can find that setting by looking up activity bar.

127
00:07:39,640 --> 00:07:44,200
So workbench activity bar visible, and I'm just going to deselect that's that little bar on the side

128
00:07:44,200 --> 00:07:44,710
goes away.

129
00:07:45,760 --> 00:07:49,900
All right, so that's it, that's all the configuration I do to my editor, so if you went through these

130
00:07:49,900 --> 00:07:53,050
steps, you now have an editor that set up identically to mine.

131
00:07:53,650 --> 00:07:57,070
So now that we've got everything set up for our local environment, let's take a quick pause right here.

132
00:07:57,070 --> 00:07:59,170
And we're going to start writing some code in the next video.