Ensure that you can run the following commands:
Setup directory:
Create a new TypeScript config:
Install Visual Studio Code.
In watch mode (live compiling on every change).
Some valid code:
Some invalid code:
Enjoy free content straight from your inbox 💌
00:00
Now in order to get started with TypeScript, the first thing that we need to do is to install the node js runtime. Node JS is a standard development tool used for developing both backend as well as frontend applications for JavaScript as well as TypeScript. Now, in order to install node js, open up your browser and head on over to node js.org. Now, the homepage will try to give you a version of node js that you should download and install for your operating system. But in case you want to look at all the available options, you can head on over to the download page and then select the installer specific to your requirements.
00:34
Now, once you have the installer downloaded and execute it, you can verify that the installation succeeded by opening up the command prompt or terminal and running the command node minus minus version. Now the specific version of node js that I have displayed over here is actually not that important as the features that we will be using throughout this course are not actually version specific. Now the node JS installation also installs two additional executables and we will be using them throughout this course so we can verify that they are working correctly as well by running NP space minus minus version,
01:08
and similarly NPX space minus minus version. And that's it for node js installation. Now let's go ahead and use node js to create our first TypeScript project. We open up a new terminal session, create a new directory specific to our project, and then use the NPM innate command to create a new node JS package. We additionally pass in the command line flag minus Y to select the default options. No GS packages are the standard way to do front end as well as backend software development with JavaScript.
01:42
Now because we are using TypeScript, we will additionally install TypeScript by running the command NPMI TypeScript. This will install the TypeScript compiler TSC into this particular package. We can run the version of TSC that comes bundled with TypeScript within this package by using N-P-X-T-S-C. And then for command line flags for TSC, we pass in minus minus in it to initialize a new TS config. A Ts config or J file is used to store TypeScript configuration options. Now, for our initial options, we use minus minus root TIR
02:17
to specify that all our source code will be located in the SRC folder and then a minus minus out TIR lib to indicate that our output JavaScript code should be generated into the lib folder. Now once this command executes, it notifies us that it's created a Ts config J file. Now before we start writing TypeScript code, let's talk about IDs. Now my recommended IDE for starting web development is vs. Code we use Studio Code is by Microsoft, the creators of TypeScript, and it is available for free for Windows
02:50
as well as Mac and Linux. You can go to code or visual studio.com and you can download it from the homepage or you can head on Over to the download section and get an installer that is more specific to your requirements. Now, once you have Visual Studio Code downloaded and installed, you can use it to open up the project folder that we created earlier. Now, let's go ahead and create our first TypeScript source code file. Under source index ts for our basic example, we will create a message variable of type string
03:22
that we will initialize to the value Hello world and use the built-in JavaScript runtime method consult log to log this message to the terminal. Now, TypeScript cannot be executed by node js or the browsers by itself. The first step is to actually take the TypeScript source code and compile it to JavaScript that node GS and browsers can execute. Now, in order to compile the TypeScript files into JavaScript files, we open up the terminal and execute N-P-X-D-S-C and we will start the TypeScript compiler in watch mode with minus minus watch.
03:57
This means that if you make any modifications to our source code, it'll recompile them on the fly. Now, on its initial compile, it's already generated the output JavaScript into the Lib folder. So far our source index or TS file TypeScript has gone ahead and generated lib index js file. And as you can see, the index ts and the index js file are quite similar. The key difference between the index Ts and the index js file is that the type annotation for the message variable that is
04:29
colon string has been removed when the TAs file has been transformed to JavaScript file. Now, once we have the JavaScript file, we can open up a new terminal and use node to execute this JavaScript file using node lib, index orts, and you can see that it simply logs out the message. Now because we left the TypeScript compiler running in watch mode, if you make any modifications to the TypeScript source code, for example, add additional text to the message variable, the compiler immediately generates the new JavaScript. And if you execute the new code using Node, you can see
05:04
that we get the updated result. Now, as we've hinted before, the key difference between TypeScript and JavaScript is simply these type annotations, for example, the annotation for string. What this means is that if we try to assign something like a number to a variable that is annotated at string, we get an immediate compile time error instead of something going weird at time. So even if you are someone who is new to JavaScript, TypeScript is a great way to get started on your JavaScript journey as it will help ensure
05:35
that your code never has any syntactic or type errors. And with that said, congratulations on finishing the first lesson.