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