Okay so in this video we're going to set up a Typescript 1
project a very basic HTML CSS Typescript project to learn 2
the Typescript basics so you're going to need a NodeJS 3
environment so if you don't already have on your machine 4
you can install the latest stable version here so it's a 5
simple process just press next next install install and to 6
make sure that it's working you just open a new terminal and 7
type npm -v and node -v you can have a different 8
version for mine probably a more recent it's fine and if 9
all this is returning a version you're good you have NPM and 10
NPX installed. Then you're going to need a code editor I 11
strongly suggest visual studio code because it's great it's 12
used worldwide it's used in the professional field , that's the most 13
used at the moment are tons of plugin it's awesome so I would 14
suggest this one but you're free to choose whatever you 15
want. Uh and finally you're going to need Typescript. So 16
if we go on the official Typescript documentation they 17
explain how to install Typescript. So if I click here to 18
install it with NPM here on my computer, they tell you that you 19
can install it directly in the project like this but that's 20
not really great because you don't want Typescript only for 21
a project you want it to globally install on your 22
machine this way you can write Typescript anywhere for any 23
project. So we're going to choose This approach where we 24
install Typscript globally like this with the dash G command so 25
you can open a terminal so going to type this command and 26
just make sure that you have the right to run it so if you 27
are Linux on Mac or Mac maybe you will need a sudo command 28
okay and type your password to install it so once it's 29
installed technically you should be able to type TSC dash 30
V and it should return a version number again if your 31
version is different from mine more recent for example it's 32
fine .Okay so we're good we have Typescript installed globally on 33
our machine so now we're going to create an NPM project that 34
will contain JavaScript HTML CSS etc. So let's do that I'm 35
going to go on my desktop and I'm going to create a new 36
folder that I'm going to call for example Typescript 37
introduction that will be the name of my project and I'm 38
going to move into it so it's been created and now I'm just 39
going to type NPM init to create a new NPM project so by 40
default yes I'm going to keep the default name and then I'm 41
going to press enter, enter, enter, enter, enter, enter, 42
enter and enter. And you're good, technically now inside 43
you should have a package.json, meaning that your NPM 44
project has been correctly initialized. Congratulations. 45
Cool. Now we can open VS code. And I have opened my project. 46
So here is what I have. So I'm going to create my first index 47
dot JS and actually I'm even going to create a new folder 48
that I'm going to call source and I'm going to put this 49
index. JS inside and I'm even going to create an index. HTML 50
then in the index. HTML I'm just going to create a very 51
basic HTML template okay so I'm going to attach it to this 52
video if you don't want to write it by hand so here it is 53
so this is really the bare minimum for an HTML file so I 54
just have a title here and an H1 and here I have linked my 55
index. JS here. So anything that is contained in my index. 56
js will be loaded in my HTML here. Okay? Now we're just 57
going to install a little plugin that is going to be used 58
to create a little server this way our HTML will be reloaded 59
when there will be a change inside. So I'm just going to go 60
and plugin and you can install live server. So it's this one 61
from it's already installed so you can install it once it's 62
done technically now you should see at the bottom here in the 63
the bar the bottom bar here a button that is go live so you 64
can click on it like this and this should open a web page 65
on a specific port so I think by default it will be 5500 66
and I'm going to put this browser page next to my 67
code editor. Okay so I'm going to close that okay so now 68
technically if I type welcome to this course if I save we 69
have the live reloading so that's perfect cool so we are 70
almost set up now I'm going to go in my index.js and I'm just 71
going to start writing some JavaScript so for example I'm 72
going to write "It's going to be awesome" okay I'm going to call 73
"awesome" and I'm just going to inject this in a paragraph here 74
so I'm just going to create a paragraph at the bottom here 75
that is going to be empty and I'm just going to do a document 76
that get element by tag name so it's elements (plural) and I'm 77
going to say that I want to get all the paragraphs and this is 78
going to return an array and I just have one paragraph so I'm 79
just going to grab the first one and inside going to add 80
some text so "innerText" and I'm going to inject "awesome" like 81
this and I'm going to save and as soon as I do that as you can 82
see it's injected okay cool also I'm going to add a little 83
plugin if you don't already have it that is prettier this 84
way when you're going to write code is going to be formatted 85
automatically when you save so you can go in your plugins 86
again and go prettier and Prettier code formatter this one you can 87
install it and once it you can close that and type command 88
shift P or control shift P and type format document with 89
and then configure default formatter and you're going to 90
choose prettier like this and then you have to make sure that 91
in your settings, so mine is full of things, but you should 92
have this line "editor.formatOnSave" to true this way when 93
you're going to save is going to format your and technically 94
now you should have your code formatted okay we are done now 95
with the configuration now we're going to create a 96
Typescript file because this is JavaScript and that's not 97
really what we want okay so I'm going to take all of this and 98
cut it so I'm going to keep it and I'm going to remove my 99
index.js now I'm going to create for example an index.ts 100
that is the extension for Typescript files and I'm going to 101
copy that. So the issue is that now I don't have anymore a 102
javascript file. But if you try to do this this is not going to 103
work okay because as I told you browsers don't understand Type 104
script. They only understand JavaScript. So it means that we 105
have to generate a JavaScript file out of this Typescript 106
file and that is what we're going to do all the time. So 107
I'm going to open a terminal and basically now I'm going to 108
compile this Typescript file to transform it into JavaScript 109
file. So to do that I'm going to do a TSC Typescript 110
compiler and then source slash index. TS and this is going to 111
compile my Typescript file into a JavaScript file and it's 112
going to create a JavaScript file that has the same name and 113
as you can see now since it exists and since it contains 114
the same code well almost the same code is going to work 115
again and as you can see there are small difference is 116
actually only one and it's that here we have a const and 117
here we have a var okay this is because the code is going to be 118
compiled into ES5 that is the version that is the most 119
understood by all the browsers all right so as you can see 120
that's for now the only difference. Also be careful when 121
you open both the two files here you're going to have a 122
conflict, it' s going to say "oh no awesome variable is 123
already used" here so just close it, it's just VSCode that is 124
confused, okay? So just close this one and this way you won't 125
have the error anymore. Okay so this is how you're going to 126
compile a Typescript file. But it's going to be a bit annoying 127
that anytime we're going to make a small update into our 128
file here, well we will have to run again the Typescript compiler 129
okay and then we will see the difference so since this is a 130
bit annoying we can just use the comment dash dash watch 131
here this way the Typescript compilr is going to watch if 132
there is any change in this file all the time and as soon 133
as there will be one... if I save is going to recompile 134
automatically and after some time yes you will see the 135
update. So now you're completely set up to work with 136
Typescript. Uh so in the next video we're going to learn the 137
basics. So see you in the next one.