Learning TypeScript Part 1 – Getting Started


Typescript is a open sourced programming language developed by Microsoft. It is a Superset of Javascript and it compiles down to plain Javascript.

Typescript offers support for the latest and evolving Javascript features including ECMAScript2015 and future proposals like async.

Why Typescript?

Typescript provides a way to add optional static typing to our Javascript code.

It makes is possible to use future Javascript editions in the current Javascript engines.

Why typing?

Before going into typings we should remember that types are completely optional in Typescript.

One of the main advantage of statically typed languages are they provide great tooling during development process like static checking, compile time errors, code refactoring.

Types can enhance code quality and understandability.

All Javascript are Typescript!!

Typescript provides compile time type checking for your javascript code. but it does so in a less intrusive way. Since types are optional even though if there are any error related to types in your code Typescript will go ahead and generate the equivalent JavaScript code irrespective of the typing errors.

So to get started with typescript all you need to do is rename all your .js file to .ts file

Getting Started

Lets get started by installing the node package by using command below

>npm install typescript -g

Note: If you are Visual Studio 2015 and Visual Studio 2013 update 2 typescript works by default otherwise you can install it from Extensions

You can pick the editor of your choice, but I’m choosing Visual Code editor since it is Open Source and offers great support for typescript.

Inside your project directory create a file called helloworld.ts and include the below content.

function greet(name: string) {
return "Hello, " + name;

var greeter = greet("World");

Create a tsconfig.json file in the root directory

"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true

The presence of tsconfig.json file indicates typescript that the directory is the root of a TypeScript project

Now lets add task.json file to make the editor build typescript files automatically

Create a task.json file under .vscode directory

// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-w", "-p", "."],
"showOutput": "silent",
"isWatching": true,
"problemMatcher": "$tsc-watch"

now if you press Ctrl+Shift+B the editor will automatically create .js files for each ts files and it will continue to watch for changes in the project directory



In this section we have seen the design goals of TypeScript and to setup a development env. We will dig deeper in the upcoming blogs.

All the coding that will be done in this series of blogs can be found here


.Net activity logs Agile Azure bad parts C# C#7.0 C# Tuples CSS Framework CSS Styling Customization designpatterns dotnet dotnet-core event hubs frontend development functions getting-started Hype Cycle JavaScript learn Next.js Node node_modules npm objects vs functions performance optimization React Redux rimraf scalability server-side rendering Software Development SOLID State management static site generation Tailwind CSS Tips Tricks Tuple Tuples Umamaheswaran Visual Studio Web Design web development

Daily writing prompt
What sacrifices have you made in life?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: