TypeScript Tutorial 01: A simple way to get started

TypeScript is an advanced programming language. It is based on JavaScript primarily. TS is an Object-Oriented Programming Language. Along with its development in 2012, Microsoft is still responsible for maintaining it.

If you lend up on this page, I assume that you have some previous knowledge of programming. I am not expecting you to directly build a web application or something. The only thing I am expecting from you is you know where to write your code exactly. No doubt you will better understand this if you have some basic working knowledge of JavaScript.

I am using VS Code in this tutorial as well, unless it’s python, I’ll always be stuck with VS Code.

Installing TypeScript

Installation of TypeScript can be achieved in the following ways:

• Installing via NPM Package

Simply open your command prompt and type the below-mentioned command:

npm install typescript

To check the version installed in your system, make use of this command:

tsc -v

TypeScript can be installed via other methods too, you can check them out here.

Running a .ts File

TypeScript files are saved a .ts extension. When you are done writing your code in your preferred code editor.

• Go to your command prompt and head over to the path where you’ve saved your .ts file. Simply run the following command with your filename. This process is known as Transpiling. The process of writing code in one language and converting it into some other language is known as Transpiling. It is a necessary process in order to run a .ts file.

tsc yourfilename.ts

• The file needs to be converted into a .js file in order to show the result. Now just run the following command and it will run your file which is just converted from a .ts to a .js extension.

node yourfilename.js

Variable Declaration in TypeScript

In TypeScript, variables can be declared using either the “let” keyword or “var” keyword, which is the same as JavaScript. The var assignment can extend the scope beyond the formed loop whereas let is restricted to the loop in which it is assigned. Using let is more preferable in modern JavaScript too.

Keyword “const” is another way with which one can declare a variable, which resembles the ES6. It is used when the value of the variable is constant throughout the program.

Syntax of Variable Declaration

There are quite a few ways in which variables can be declared in TypeScript. The following are how the said can be achieved.

var[identifier]:[type-annotation] = value;
var example:boolean = false;

var[identifier]:[type-annotation];
var example:boolean;

var[identifier]=value;
var example = false;

var[identifier];
var example;

Data Types in TypeScript

TypeScript supports a wide range of data types. We will discuss each one of them with examples.

BOOLEAN

Just like JavaScript, TS also supports boolean data types as either true or false.

let b:boolean = true;

NUMBER

Just like any other programming language, TS also supports numbers. Additionally, it can have numbers in hexadecimal, octal, and even binary form.

let a:number = 10;

console.log(a);  // 10 

STRING

Strings are text information that is surrounded by single quotes or double quotes.

let name:string = "Momo";
console.log(name);  // Momo

let firstName:string = "Techbit"; 
let firstInformation:string = "Tech Platform";

//Here I have used backticks to directly call the variable in a sentence along with the strings. The process of using template strings helps us to write short code with the same efficiency.
let firstComplete: string = `${firstName} is an online ${firstInformation}.`; 

console.log(firstComplete);
//Techbit is an online Tech Platform. 

ARRAYS

An array refers to a special data type that can store multiple values of the same data type. One can declare an array by using any of the following syntaxes.

• Using Square Brackets

let ab:string[] = ["Cupcake","Donut","Applepie"];

• Using Generic Method

let ac:Array<string> = ["Cupcake","Donut","Applepie"];

TUPLES

Tuples came into play where arrays lacked functionality. They are special data types that are used to store multiple values of different data types. Since they can store heterogeneous values in one place, they are of enormous importance.

let newTuple = ["Ram", 20];

Multiple data types can be easily stored in a tuple:

let multiTuple = ["Diwali", 4, "November", true];

ENUM

Enumerated Data type or Enum in TypeScript is a special data type that is used to store related values. The values can be of string or number or an amalgamation of both. Enums are a useful data type of Object-oriented programming languages like c++ and Java.

The following is a typical enum data type example. By default, the value starts from 0 for the first member and goes up to the member count in the enum. In this example, it goes up to 3.

enum fruit
{
apple,
banana,
kiwi,
orange
}

The values for each member of enum fruit will look like this:

• apple = 0
• banana = 1
• kiwi = 2
• orange = 3

If we don’t assign a value, it will be auto-initialized to the default numbering. But we can also assign the values in the enum itself. Also, it is not necessary to start the numbering in sequential order only. It can follow any random order like so in the next example.

enum Posts {
    Cryptocurrency = 1,
    Programming = 3,
    Tips = 1

}

ANY

We use “any” data type in TypeScript when dealing with some dynamic data. The dynamic data can range from numbers to strings. It is basically the data that we get from the user input. And the type of user-entered data can’t be predicted, so “any” helps in handling such situations.

let newVar = any; //declaring a variable with any means it can be assigned later on depending upon the user's input
newVar = 10;
newVar = "Techbit";

NULL

A null keyword is used to declare a null value to a variable. One can even assign a null value to a number or a string.

let nullVal: null = null;
let stringVal: string = null;

NEVER

Never keyword is relatively a new type of data type in TypeScript. We use it when we know that something is never going to return a value.

function showError(error: string): never { 
            throw new Error(error); 
} 

UNDEFINED

It can be used to store the value undefined to any variable. Just like the “null” data type, it can also be used along with strings or numbers.

let undefinedVal: undefined = undefined;
let numVal: number = undefined;

VOID

The void data type is used when there is no data to be returned. One can simply switch between null, undefined, or void data types to declare a function that returns nothing.

function message(): void { 
    console.log('Good Morning')
} 
let output: void = message(); 
console.log(output); 
//Output:undefined

Thank you for reaching the end. I hope it helped you somewhere in getting started with TypeScript.