Visual Studio Code with NPM and TypeScript (Part 1 : NPM)

Posted on: 2017-02-13

Creating a new project that use TypeScript with Visual Studio code can be not as straight forward as expected. A quick search on the web shows dozen of different ways and none of them are the same. Most current example are out of date or use so many npm packages that it's hard to follow for people coming from full blown IDE and framework. This article goal is to present the simplest possible way to have a TypeScript project up and running. Even if we want to be very simple, a lot of technologies will be required. We will try to use the minimum.

Before getting started, you need to have NodeJs. This is a requirement because we will use npm. Right there, you may wonder what these two words means. NodeJs is needed to use npm which is the biggest JavaScript libraries repository. For the simplicity of this article, see NodeJs as a system that allows you to run tools and npm is one of the tool. See npm like NuGet for .Net ecosystem, but this time for JavaScript. Installing NodeJs can be done directly on the website : https://nodejs.org/en/download/

Using npm needs to use Powershell or a command line. But before, let's create a new directory where we will host the project and initialize npm.

mkdir tsWithCode1 npm init

The npm command creates a package.json file where information about which packages is needed. See this as a cart of library that you need and that later we will download and install. For your project, we want to use TypeScript, JQuery and Gulp. The first one is the TypeScript library, the second is a popular library that is not written in TypeScript and the third one is a task runner. We will go in more detail soon, just keep in mind that they are 3 different libraries that needs to be handle differently. One different is that TypeScript and Gulp are used at development time, while JQuery is needed in development and in production. We need to install differently because of this difference since we do not want to have libraries not needed in production.

npm install --save-dev typescript
npm install --save-dev gulp
npm install --save jquery

The output should have the init parameters provided (name, description, etc) and two sections.

{
  "name": "tswithcode1",
  "version": "1.0.0",
  "description": "TypeScript with NPM and VSCODE",
  "main": "index.js",
  "scripts": { "test": "test" },
  "author": "Patrick Desjardins",
  "license": "ISC", "
  devDependencies": {
    "gulp": "^3.9.1",
    "typescript": "^2.1.5"
    },
  "dependencies": {
    "jquery": "^3.1.1"
  }
}

At this point, you can look in your directory and see a new one generated named "node_modules". This folder doesn't need to be in your source control since you can simply invoke "npm install" in the directory to get the folder back with all the libraries. When using the install command, NPM looks in the package.json configuration file and get what needed. I suggest that you delete the "node_modules" and try the command. But before doing so, look at how many folder contains the "node_module". At the time I am writing this article, the number if 162. The count is way more than just 3 (TypeScript, Gulp and JQuery) because each of these libraries have dependencies on other libraries that also have dependencies and so on. Since it's an introduction article, I won't go in too much detail, but it's possible to install package globally in your computer (%AppData%\npm\node_modules). If you are developing several projects, you may want to install common utility tools globally, like TypeScript or Gulp. The advantage is that you avoid having in all project the same files, hence saving disk space.

Before going to the next article that will setup the HTML file and create the first TypeScript file, let's add an additional library: requirejs. This library will be used to handle TypeScript module that we will see soon.

npm install --save requirejs