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

2
00:00:05,290 --> 00:00:08,400
work with typescript will then begin working on our first project.

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

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

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

6
00:00:15,610 --> 00:00:19,570
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,630 --> 00:00:21,070
and NPM.

8
00:00:21,070 --> 00:00:26,710
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,800 --> 00:00:30,930
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,970 --> 00:00:36,430
Again I'm really assuming that you've got that knowledge ahead of time so we're going to use NPM to

11
00:00:36,430 --> 00:00:39,460
install typescript as a global module.

12
00:00:39,490 --> 00:00:45,340
We're also going to install a second module called T S node G US node is a little command line tool

13
00:00:45,370 --> 00:00:50,140
that allows us to compile and execute typescript with one command at our terminal.

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

15
00:00:54,040 --> 00:00:57,900
without having to setup a full tooling installation kind of deal.

16
00:00:57,940 --> 00:00:59,430
So let's get to it.

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

18
00:01:02,260 --> 00:01:11,370
I'm going to run npm install dash G and I'll get TypeScript and T.S. dash node like so all right.

19
00:01:11,410 --> 00:01:16,050
That's going to take just a moment or two to install rather quickly once it is installed.

20
00:01:16,060 --> 00:01:21,190
I can then make sure that it is successfully installed and then I can run the compiler by running TSC

21
00:01:21,760 --> 00:01:23,070
dash dash help.

22
00:01:23,140 --> 00:01:30,880
Like so we installed a package called typescript it gives us access to a command called TSC which is

23
00:01:30,880 --> 00:01:33,700
short for as you might guess typescript compiler.

24
00:01:33,700 --> 00:01:39,580
This is what we're going to use to actually compile our typescript code into plain JavaScript So if

25
00:01:39,580 --> 00:01:45,070
I run this command I should see a bunch of health messages appear on the screen like so if you see any

26
00:01:45,070 --> 00:01:49,960
error that means that you're NPM installation probably has a little issue and you'll need to do a little

27
00:01:49,960 --> 00:01:52,090
bit of troubleshooting okay.

28
00:01:52,140 --> 00:01:55,560
That's pretty much it for the actual typescript setup.

29
00:01:55,710 --> 00:02:01,600
Now we're going to walk through a little additional setup here for setting up visual studio code.

30
00:02:01,620 --> 00:02:06,810
Now this is a code editor if you've already got visual studio code installed I encourage you to still

31
00:02:06,810 --> 00:02:11,410
watch this video because I'm going to show you some settings that are important for you to have if you

32
00:02:11,410 --> 00:02:13,960
want to use another code editor inside this course.

33
00:02:13,960 --> 00:02:15,190
That's totally fine.

34
00:02:15,190 --> 00:02:20,050
I've tried out many other code editors and personally I think that visual studio code is one of the

35
00:02:20,050 --> 00:02:22,720
best ones out there for working with typescript.

36
00:02:22,720 --> 00:02:28,160
So if you've never used it I would recommend at least try at one time so I to go through the installation

37
00:02:28,160 --> 00:02:30,180
process here really quickly.

38
00:02:30,290 --> 00:02:34,760
First go to that link inside of a new browser tab and I'll find the green download button on the left

39
00:02:34,760 --> 00:02:38,790
hand side once I download the zip file.

40
00:02:38,910 --> 00:02:46,850
I'll then open it up that's going to instruct extract it here's the visual studio code application.

41
00:02:46,850 --> 00:02:51,410
And if you're on Mac all you have to do is drag and drop that into the Applications folder.

42
00:02:51,800 --> 00:02:54,920
If you're on Windows you're going to instead see a little installer.

43
00:02:54,950 --> 00:02:57,430
Well you have to do is go through the installation process.

44
00:02:57,440 --> 00:03:01,960
It's just a couple clicks Now that we've got the US Code installed.

45
00:03:01,970 --> 00:03:04,980
We're going to do just a couple steps of configuration.

46
00:03:05,210 --> 00:03:06,770
So this is what we're going to go through.

47
00:03:06,770 --> 00:03:11,510
I'm mostly showing you these configuration steps just you understand the exact settings that I'm running

48
00:03:11,570 --> 00:03:12,940
locally.

49
00:03:12,950 --> 00:03:18,830
Now just to be clear I just did a fresh installation of the U.S. Code Like I completely deleted my previous

50
00:03:18,830 --> 00:03:20,180
installation.

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

52
00:03:24,590 --> 00:03:28,010
So I don't have any previous setup whatsoever.

53
00:03:28,140 --> 00:03:28,350
All right.

54
00:03:28,350 --> 00:03:29,750
So let's get to it.

55
00:03:29,790 --> 00:03:32,400
The first thing I'm going to do is open up a visual studio code

56
00:03:35,320 --> 00:03:36,630
and it's going to take just a moment.

57
00:03:36,630 --> 00:03:38,710
This first time that it boots up to actually open.

58
00:03:38,710 --> 00:03:42,600
So it's going to let it do its thing all right.

59
00:03:42,610 --> 00:03:46,980
There we go.

60
00:03:47,140 --> 00:03:47,320
All right.

61
00:03:47,320 --> 00:03:51,910
So once I've got visual studio code open we're going to go through each of these different setup steps

62
00:03:52,090 --> 00:03:53,240
right here.

63
00:03:53,240 --> 00:03:58,870
It's the first thing I'm going to do is setup code in my path variable and what this essentially does

64
00:03:58,870 --> 00:04:03,220
is allow me to launch my code Ed from the terminal which I'm going to be doing quite a bit throughout

65
00:04:03,220 --> 00:04:04,080
this course.

66
00:04:04,630 --> 00:04:10,690
So to do so I'm going to go over to the editor and I'll go up to view and then find a command pallet

67
00:04:11,770 --> 00:04:17,710
and then once here I'm going to search for ADD path actually not add path a thing it's install path.

68
00:04:17,840 --> 00:04:17,970
Yeah.

69
00:04:17,980 --> 00:04:18,790
There we go.

70
00:04:18,790 --> 00:04:22,600
So install a code command in path 0 if to do is click that.

71
00:04:22,720 --> 00:04:23,490
And that's pretty much it.

72
00:04:23,500 --> 00:04:29,690
We'll see a little notification down here if I now flip on over to my terminal I can open up a new window.

73
00:04:29,690 --> 00:04:33,800
Make sure you open up a new window if you try to run this command in an existing window it's probably

74
00:04:33,800 --> 00:04:34,900
going to fail.

75
00:04:35,080 --> 00:04:40,190
And then once over here you can open up your code editor in any directory by running code and then dot

76
00:04:40,250 --> 00:04:46,000
like so now as you'll see it'll pop up in my code editor right away all right.

77
00:04:46,010 --> 00:04:47,960
So let's keep going through these installation steps.

78
00:04:47,960 --> 00:04:49,770
The other ones are going to be pretty quick.

79
00:04:50,000 --> 00:04:55,300
The next one is going to be to install the prettier extension prettier is a code for matter.

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

81
00:05:00,020 --> 00:05:01,490
fixed fashion.

82
00:05:01,550 --> 00:05:06,200
So I usually use pretty or just have some very consistent looking code and I highly recommend you try

83
00:05:06,200 --> 00:05:07,400
it out as well.

84
00:05:07,910 --> 00:05:11,420
To install this extension I'll go back over to my editor.

85
00:05:11,420 --> 00:05:17,570
I'll find a view I'll then look for extensions and then on the left hand side.

86
00:05:17,600 --> 00:05:23,150
I'll search for prettier and it's going to be the first one right here.

87
00:05:23,210 --> 00:05:30,140
Bye has been Peterson soul hit install and that's pretty much it.

88
00:05:30,210 --> 00:05:32,670
Now we're going to do a little bit of configuration on prettier.

89
00:05:32,700 --> 00:05:37,380
We're going to make sure first that it formats every file when we save it.

90
00:05:37,380 --> 00:05:44,860
So to do so I'll go back over I'm going to again go to my view menu and I'm going to look for excuse

91
00:05:44,860 --> 00:05:49,630
me not view I'm looking for preferences or Soviet code preferences settings.

92
00:05:49,630 --> 00:05:50,170
There it is

93
00:05:53,020 --> 00:06:01,660
and then once I've got the settings tab up right here I'll do a search for format on Save and I'll see

94
00:06:01,670 --> 00:06:03,910
in a setting right here called format on save.

95
00:06:04,580 --> 00:06:07,180
So we just have to check that and that's pretty much it.

96
00:06:08,880 --> 00:06:12,060
Next up I'm going to configure prettier to use single quotes.

97
00:06:12,060 --> 00:06:13,970
Now this is entirely personal.

98
00:06:13,980 --> 00:06:16,290
If you want to use double quotes totally fine.

99
00:06:16,290 --> 00:06:20,020
You can use either single quotes or double quotes safely with typescript.

100
00:06:20,130 --> 00:06:25,620
I just prefer single quotes to the set up prettier to format my code in that fashion.

101
00:06:25,620 --> 00:06:33,310
I'll go back over my settings page I'll look for single quotes and I'll scroll down just a little bit

102
00:06:33,310 --> 00:06:37,030
right here and I'll see a setting called prettier single quotes and check it

103
00:06:40,030 --> 00:06:40,280
all right.

104
00:06:40,280 --> 00:06:45,430
Next one is I'm going to make sure that I use two spaces for indentation as opposed to tabs.

105
00:06:45,440 --> 00:06:48,120
Again this is very personal you can go either way.

106
00:06:48,200 --> 00:06:54,350
I personally like to use two spaces for indentation so to do so I'm going to delete the search term

107
00:06:54,350 --> 00:07:01,240
up here and then scroll down on the default settings here just a little bit and I should see tab size

108
00:07:01,240 --> 00:07:02,550
right here.

109
00:07:02,560 --> 00:07:04,990
Now let's change it to 2 like so

110
00:07:08,470 --> 00:07:08,710
all right.

111
00:07:08,710 --> 00:07:13,540
So last thing I'm going to set my theme to be civilized light so much just going to change the coloring

112
00:07:13,540 --> 00:07:15,810
of my editor a little bit.

113
00:07:15,810 --> 00:07:22,070
So to do so I'm gonna go back over once again I'll look for theme I'll find a color theme right here

114
00:07:22,520 --> 00:07:28,500
right now the default is dark and I'm going to change it to soulless eyes light instead and that's it

115
00:07:29,930 --> 00:07:30,290
okay.

116
00:07:30,310 --> 00:07:35,560
Now one less little thing I'm going to do here I am going to hide this bar on the left hand side I can

117
00:07:35,560 --> 00:07:42,720
find that setting by looking up activity bar so workbench activity bar visible and I'm just gonna do

118
00:07:42,720 --> 00:07:46,150
select that's that little bar on the side goes away all right.

119
00:07:46,160 --> 00:07:46,690
So that's it.

120
00:07:46,700 --> 00:07:49,070
That's all the configuration I do to my editor.

121
00:07:49,070 --> 00:07:53,480
So if you went through these steps you now have an editor that set up identically to mine.

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

123
00:07:57,080 --> 00:07:59,150
and we're gonna start writing some code in the next video.