TypeScriptLang tells us that “TypeScript is a superset of JavaScript that compiles to plain JavaScript.” Therefore, it is essentially JavaScript, but with Object-Oriented features and keywords to help keep your code clean and maintainable. This blog post is a TypeScript 101 of sorts in which I will explain why you should use it and how to set it up.

Why Use TypeScript?

While developing with JavaScript, you may notice that as your code grows, it tends to get messier and messier, eventually turning into “spaghetti code.” This is a dark path that can easily lead to a lack of maintainability and reuse. Of course, there are ways to avoid that, such as following a pattern and refactoring. But for enterprise-level applications, this can become quite cumbersome. TypeScript provides Object-Oriented features and strong typing, which allow you to utilize modularization, encapsulation, interfaces, classes, lambda functions, etc.

Since JavaScript is a weakly typed language, it can become difficult to keep track of what type you want a variable to hold, especially if you don’t utilize === in explicit checks that you set up in your code. TypeScript allows you to strongly type variables so you don’t have to worry about explicitly adding checks throughout your code.

TypeScript also provides a great “low risk” area to practice Object-Oriented techniques. If you’re just getting into programming, TypeScript still allows weak typing and applies implicit type correction like JavaScript, but it also allows for you to start honing your Object-Oriented techniques. To elaborate on this, since TypeScript is a superset of JavaScript that compiles to plain JavaScript, you can paste plain JavaScript into a TypeScript file and it will work as expected. On the other side of the spectrum, if you are more familiar with Object-Oriented techniques and are starting to peek into client-side coding, TypeScript provides a familiar framework for you to quickly get started.

Additionally, some editors, such as Visual Studio and Sublime Text, provide Intellisense and syntax checking functionality for TypeScript upon installation. Since it is essentially JavaScript, you can also use TypeScript with anything that is JavaScript compatible such as Node and Angular.

Supported Types

One of the biggest draws of TypeScript is the ability to add strong typing to your code. To declare a variable to be of a certain type, just add :type to your declaration. Even without explicitly declaring a type, TypeScript will guess the type based on the value that is stored in the variable. Of course, to fully utilize the strong typing that TypeScript offers, you will want to explicitly declare a variables type at initialization. 

Boolean

var isFound: boolean = false;

Number 
Note: All numbers in TypeScript are floating point variables.

var timeLeft: number = 100;

String

var firstName: string = "John";

Array – They Array type can be declared one of two ways, as shown below.

var people: string[] = ["John", "Jane"];

var people: Array<string> = ["John", "Jane"];

Enum
Note: By default, enums begin their numbering at 0, unless otherwise specified.

enum Day {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
var weekStart: Day = Day.Sun; 

Any – The Any type allows users to deactivate type checking.

var something: any[] = ["name", 12, true];

Void – The Void type allows users to explicitly declare that a type will be absent.

function helloWorld(): void { console.log("Hello World!") };

Installing TypeScript

For those of you using Visual Studio 2015, TypeScript comes pre-installed. But for everyone else, to begin utilizing TypeScript you will have to install it in some way or another. If you are using Visual Studio 2013 or 2012, you can easily install it as an extension through the Visual Studio Gallery. To access this in Visual Studio 2013, go to Tools in the upper toolbar, click “Extensions and Updates…”, and search for TypeScript.

For those of you not using Visual Studio as your editor, then you can install TypeScript through npm by running >npm install –g typescript. If you don’t have npm set up, you will have to install node.js first. You can also install TypeScript in Atom and Eclipse.

Compiling TypeScript to JavaScript

If you are using Visual Studio as your editor, then your TypeScript files that end in “.ts” will be automatically compiled into JavaScript when you save. But for everyone else, you’re going to have to do a little leg work.

• For npm users, you can run >tsc somefile.ts in your command prompt, where somefile.ts is the TypeScript file you have been working on.
• If you are using Sublime, you can install the TypeScript plugin by downloading it into “Sublime TextPackages” directory (wherever you installed Sublime) on your computer from. Once you have the plugin installed, you can compile your TypeScript by navigating to the file and hitting Ctrl+B if you have a PC and Command+Option/Alt+Y if you have a Mac.

As we can see, TypeScript is a great way to add strong typing and employ Object-Oriented techniques in your client-side code. It may not be the only way to organize your code, but with the ability to integrate it with popular development environments, it may be one of the easiest.

What other features of TypeScript do you find useful? Share your wisdom with us in a comment below to share your opinion or tweet us @EasyDynamics. While you’re here, make yourself comfortable and check out our blog home page to explore other technologies we use on a daily basis and the fixes we’ve solved in our day to day work. To make your life even easier, subscribe to our blog to get instant updates sent straight to your inbox: