Learning TypeScript – Getting Started with Visual Studio Code

Learning TypeScript is tutorials series using Visual Studio Code (VS Code).

What is Typescript?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

What we will learn?

  1. Setup environment for learning TypeScript
  2. Using Visual Studio Code as editor for learning typescript
  3. Configuring TypeScript options and start learning
  4. Setting Task Runner to transpile AKA compile to JavaScript
  5. Using lite-server for running web application in Visual Studio code (VS Code)

Let’s get started with series on Learning TypeScript

Note: This series only requires Visual Studio Code, TypeScript, lite-server, NPM on Windows 7/8.1/10, Linux or Mac OS

Step 1: Setup environment for learning TypeScript

We need following technologies for get started

  • NPM (Node Package Manager) – Its package management tool for almost all packages related to web technologies.

We will first install NPM on our machines, just go through “Installing Node.js and updating npm

Learning TypeScript

Verifying NPM Version installed

  • TypeScript – We can install TypeScript using NPM by running following command

npm install -g typescript

This will install the latest version of TypeScript globally meaning PATH environment variable is set. We can verify installation as shown below

Learning TypeScript

Verify TypeScript Installed

Note: If Visual Studio 2013/2015 is already installed then TypeScript will already be available but using above command to install latest version and delete any existing versions.

Step 2: Using Visual Studio Code(VS Code) as editor for learning TypeScript

We need a code editor for learning TypeScript with best developer tooling experience.

Download Visual Studio Code, install it. It’s cross platform code editor which can be used in Linux, Mac OS and Windows OS.  This is one time setup.

Step 3: Configuring TypeScript options

Create folder “src” acting as source code folder, open Visual Studio Code from Program Files installation path

Click File a Open Folder a enter “src” folder full path and VS Code open this folder as source code containing folder. It’s empty as of now.

Learning TypeScript

Create “Src” folder, open it VS Code

TypeScript (TS) files don’t directly run on browser, they are compiled (AKA Transpiled) to JavaScript so that we can refer them in HTML/ other JavaScript pages. To do this we need to add “tsconfig.json”

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

Let’s add “tsconfig.json” file to “src” folder by either adding that in windows folder or create them in VS code.

TypeScript Compiler Options says “Target es5 standards of JavaScript” and “move transpiled JS files to scripts/ folder”.

Might be wondering why “outDir” is needed!! outDir is Output Directory for transpiled (compiled) typescript files to stored. Keeping all JS files in one folder is easy to maintain and keeps it clean.

If you want still “outDir” can be omitted because its compiler option.

It’s time to add out first TypeScript file, very simple example but worthy to understand importance of TypeScript. Just create file with .ts extension

Its simple function “ShowTime” taking Date as parameter to function, then sets innerHTML of div element. ShowTime takes strong type parameter of Date.

Let’s add HTML file “index.html”, containing just HTML button with onclick event calling ShowTime function passing Date as parameter and H2 to show message.

If you observe carefully the SCRIPT tag; I have not created any “scripts” folder nor created “first.js” file.

Step 4: Setting Task Runner to transpile AKA compile TypeScript to JavaScript

The definition of TypeScript says that it’s TYPED superset which compiled to JavaScript because all the browsers understand JS code rather TS code.

Transpiling TypeScript code is process of converting it to JavaScript code. Its synonyms to compiling.

Learning TypeScript

Transpiling TS to JS files

 

When we build now using Cntrl+Shift+B in VS code, we get this warning telling “No task runner configured”. Then click on “Configure Task Runner” to create tasks.json file which is collection of Tasks for various things TypeScript, Gulp, Grunt etc.

Learning TypeScript

Configure TaskRunner message

Now that tasks.json is created, we need to modify little bit to make sure that all TypeScript files are transpiled to JS files. There are lots of tasks commented keep them as is, we can use them later

From the image below refer Step 2, ensure that “args” is empty so that it takes all TS files for transpiling

Learning TypeScript

Configure Tasks.Json

Point 3 shows “scripts” folder with “first.js” after Cntrl+Shift+B (Build). If you see them it’s working properly.

Step 5 Using lite-server for running web application in VS code

VS Code is just code editor, we can’t run web application just as we do in Visual Studio IDE. We have install some kind of web server which run web application in browser.

I choose lite-server because its lightweight node server, opens it in browser, refreshers when HTML or JS changes and many other things. To install it globally, open command prompt and then below command

$ npm install -g lite-server

After it successfully installs, right click on “index.html”, click “Open in Command Prompt”. This will navigate to source folder. Then enter “lite-server” in console, it will open web browser showing index.html

Index.html is treated as default page, so don’t name anything else.

Learning TypeScript

Running lite-server

 

Learning TypeScript

index.html showing TS – JS code on browser

Now it open index.html page in browser as below, do click “Show Time” to display it.

You may also like...

8 Responses

  1. Kishor K Acharya says:

    Thanks Awesome Guide !!!

    @for others : if js file is not created in you solution, please check the folder structure

    .vscode folder and ts files should be in same folder

  2. saiprathap says:

    Thanks. How to debug typescript code in VS with lite-server??

  3. Mohit Sharma says:

    Thanks!!! It is step by step guide.

  1. September 26, 2016

    […] TypeScript(TS) would be new for most of developers, maybe these will give get started on TypeScript […]

Leave a Reply