Good morning my friends!
It’s been a while since our last contact, and I’m happy to be here again!
Today I want to talk about how to create a basic installation of Visual Studio Code, in order to create a simple TypeScript project. But before we begin, let’s review some basic concepts…
What are Visual Studio Code and TypeScript?
Now let’s spend some words about TypeScript…
Installing Visual Studio Code
The installation of Visual Studio Code is quite simple, at least on Windows (I didn’t tried other OS yet). You can download the installation package at this url: https://code.visualstudio.com/.
Run the setup when the download has been completed. You should see something similar:
Click “Next” to go on:
Choose you preferred installation path and click “Next”:
Again select your preferred options and click “Next”.
We are in the last step. Just click “Install” to begin the installation.
Now you are ready to launch your brand new code editor:
Before we begin, there are some more configuration steps which we will see in the next paragraphs.
Installing npm package manager
I usually download and install the recommended version, which at this moment is 16.13.0 LTS.
Execute the downloaded package to begin the installation.
Like Visual Studio Code, the installation of Node.js does not involve particular problems and I usually stick to the default options. The only option I suggest you to select is the one you can see in the following step of the installation:
At a certain point during the setup, you will see a window like this:
Like the window says, press any key to continue the installation… Consider that on my PC this step required several minutes, during which you will see a window like following:
Once the installation has been completed, restart Visual Studio Code to check if npm is working correctly.
To do this, once Visual Studio Code is ready, open a new terminal window (click on menu Terminal -> New terminal) and simply type the command “npm”. If everything is ok, the npm command should respond, as can be seen in the next screenshot:
It can sometimes happen that instead you receive the message:
“The term npm is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.”
If that happens, close the current terminal window using the “Kill terminal” command
and open a new one like said before, then try again typing “npm” in the terminal window.
Installing the TypeScript compiler
To install the TypeScript compiler, simply type the following command in Visual Studio Code terminal window:
npm install -g typescript
To check if the TypeScript compiler is working correctly, just type the following command in Visual Studio Code terminal window:
that should return the the following message:
PS C:\MyTests\MyFirstTSApp> tsc --version
Unfortunately, in some Windows environments, you may run into this error message:
tsc : File C:\Users\xxxx\AppData\Roaming\npm\tsc.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. At line:1 char:1 + tsc --version + ~~~ + CategoryInfo : SecurityError: (:) , PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess
To solve the problem, run a PowerShell instance in administrator mode, as shown in the following screenshot:
and execute the following command:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine
You will see the following:
Type “Y” and press enter to continue.
Now if you try again, the command
should print the TypeScript version just installed.
We have come to the end of this tutorial where we have seen how to set up a Visual Studio Code installation to work with TypeScript. In the next post we will see how to configure a basic TypeScript project with Visual Studio Code and we will explore some features of this development tool.
Don’t miss it!