What Is TypeScript and Why Should Developers Try It?

JavaScript is a unique programming language. It is built for web development and has different rules to other programming languages.

One of the more notable differences is that JavaScript is dynamically typed, which means you do not have to declare types when creating variables. Languages like C, C#, and Java will make you declare variable types. These are called statically typed variables.

Languages that use statically typed variables can offer more stability and reduce errors in code. TypeScript bridges the gap between JavaScript and traditional programming rules.

Variable Types

The type of the variable is the information you plan to store in the variable.

Here’s a Java variable, for example:

int myNumber = 10;

This variable is an int, which is short for integer. This lets you know that the variable myNumber plans to store an integer. If you try to store a different value in the variable, like a string of characters, the program will not run.

Here are some more variable types you may have used:

• int—regular numbers
• float—decimal numbers
• char—single characters like ‘x’ or ‘a’
• string—a series of characters like “Hello” and “This is a string”
• boolean—true or false values

JavaScript does not require that you declare variable types. While it gives you more freedom, it can lead to some pretty bad habits. This is where TypeScript makes your job easier.

What Is TypeScript?

TypeScript is a version of JavaScript developed by Microsoft that introduces variable types into your code. It’s not a brand new language; think of it as a wrapper over plain JavaScript. It has a very similar syntax to JavaScript so it’s easy to get started.

To show how similar they are, here is a line of code in both JavaScript and TypeScript.

JavaScript:

let myNumber = 10;

TypeScript:

let myNumber: number = 10;

When you declare a variable in TypeScript you declare the type at the same time. It’s a small change that has a big impact.

TypeScript is a compiled language, unlike JavaScript which runs in the browser. Compiled languages can be faster and result in more efficient programs.

There isn’t any extra software to download though; TypeScript files are compiled into regular JavaScript files that can be used in any web app. TypeScript files are saved as .TS files.

How to Install TypeScript

It’s easy to get started with TypeScript:

• Via the Node.js package manager (NPM)
• Installing TypeScript’s Visual Studio plugins

Installing with NPM is easy with the command line:

> npm install -g typescript

If you’re using Visual Studio 2017, or Visual Studio 2015 Update 3, you already have TypeScript included. If it’s not installed you can download it through the TypeScript website.

TypeScript Benefits

JavaScript is already pretty great, what are the benefits to using TypeScript instead? There are plenty of reasons to use TypeScript for web development.

Typed Variables

TypeScript lets you assign types to variables in your code. You saw the example at the beginning, but how does this help you?

Having to assign types to your variables can make you a better coder. It forces you to think through every variable you write when planning your app. Doing so prevents mistakes from being made later in the code, keeps your app easy to read, and makes your code a breeze to test.

TypeScript gives you a lot of options to create variables.

Numbers

let myNumber: number = 10;

Strings

let myString: string = "TypeScript";

Boolean Variables

let myBoolean: boolean = true;

Arrays

When you define an array you will use the type of value contained in the array followed by square brackets.

let myArray: number [] = [1,2,3];

Any

This variable type is used when you want TypeScript to allow any kind of type to be assigned to the variable. This gives you more flexibility when you’re not sure about what your variable might become.

You can change the value of these variables freely.

let anyType: any = 10;
anyType = "Hello"; //No error
anyType = true; //Still no error

Void

Void types are used when you want no type to be assigned to the variable. This is great for functions that don’t return any value.

function randomMessage(): void { Console.log("This is just a message"); }

Null

Simply gives you a null value.

let myNull: null = null; //This is all you can do

Undefined

Just as simple, this gives you an undefined value.

let myUndefined: undefined = undefined; //This is all you can do

Added Features

TypeScript gives you some additional features and types that let you do more with JavaScript.

Tuple

A tuple is a special array that you declare with a fixed number of elements. These elements can have different types, but the tuple must stick to the types in the order that you declare.

let myTuple: [number,string];
myTuple = [45, "Hello"];
myTuple = ["Hello", 45]; // Error

Enum types

Enum types are a special type that assigns numeric values to a series

enum Color { Red, Green, Blue }

In this enum Red is assigned the value of 0, Green is 1, and Blue is 2. Enums are zero-indexed just like arrays in JavaScript.

Object classes

Object classes, interfaces, and inheritance are all supported in TypeScript.

JavaScript does not have a true class system for object-oriented programming. JavaScript uses a prototype system that is very similar, but not entirely the same. If you come from an object-oriented background this alone might sell you on TypeScript.

You can make a class with constructors

class Student { 
Name: string; constructor(first,middle,last) { 
this.Name = first + " " + middle + " " + last; } 
}

let newStudent = new Student("John", "Leonard","Smith");

You can make an interface and use it as a type.

interface Person {
 personName: string;

function sayHello(person: Person) {
 return "Hello " + person.personName;
}

Functions

TypeScript declares types in functions as well.

function addNum(num1: number, num2: number) {
 return num1 + num2;
}

You can also use default parameters in your functions. These are useful when you have a value you want to be set in your parameters in the event your function is run without an argument.

function addNums(num1: number, num2 = 15) {
 return num1 + num2;
}

addNums(5,5); // This will return 10
addNums(5); // This will return 20. There was no second value, so the default parameter of 15 is used

The TypeScript Compiler Helps Test Code

JavaScript running in the web browser is great because it’s simple. TypeScript uses a compiler to translate code into a JavaScript file, but isn’t that just extra work?

Not at all! The TypeScript compiler can help you test your code as you write. When you run a TypeScript file in your IDE it will flag errors as you go.

Cutting down on these errors in your IDE will clean up your code. By the time you compile to plain JavaScript, your code has been checked for type accuracy. The TypeScript compiler can be customized to your programming preferences.

Open Source

TypeScript is open-source and created by Microsoft. There are plenty of benefits to open-source software. The developer community is constantly working to iron out any bugs or add new features.

TypeScript works well with Visual Studio and Visual Studio Code. Visual Studio Code is a top choice for working in JavaScript so you’re off to a head start if you decide to use it.

Works With Other Web Frameworks

If you’re coding a web app frameworks are designed to save you time. Since JavaScript is the king of web development scripting, there are a lot of frameworks that are used. Many of these frameworks are very popular.

TypeScript doesn’t hold you back from using these very useful web frameworks. It’s compatible with React, Angular, Express, Babel, Vue.js, ASP.NET Core, and React Native.

Web Development and JavaScript

TypeScript was created to make web and app development easier for JavaScript developers. It’s pretty important that you have a foundation with JavaScript and how it works before diving into TypeScript.

Want a challenge? Download TypeScript and try a common project like creating a JavaScript slideshow. Build on your knowledge and pretty soon you’ll be a web development expert!

Read the full article: What Is TypeScript and Why Should Developers Try It?

Read Full Article