The 2021 Beginner’s Guide to TypeScript.
By: Bryan Dijkhuizen
Tags: Programming, Technology, JavaScript, Software Development, Web Development

The 2021 Beginner’s Guide to TypeScript.

TypeScript is pure object-oriented with classes, interfaces and statically typed like C# or Java

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This article aims to teach you the basics and fundamentals of TypeScript.

Requirements

I recommend that you have a good understanding of OOP concepts and basic JavaScript before continuing on with this tutorial (so as to make the most of it).

Getting Started

Node.js is an open-source, cross-platform runtime environment for server-side JavaScript. Node.js is required to run JavaScript without browser support. Type the following command in the terminal window to install TypeScript:

$ npm install -g typescript

Typescript can be built on a plethora of development environments such as Visual Studio.

Syntax

Syntax defines a set of rules for writing programs. Every language specification defines its own syntax. An example of typescript code:

var message:string = "Hello World"

console.log(message)

To compile your TypeScript file, enter the following command:

tsc app.ts

Then you can run it:

node app.js

Variables

A variable is like a little container to store data in. Variables are essential in TypeScript. In TypeScript, you need to specify the data type of a variable.

As in other programming languages, TypeScript contains the following data types:

String — A string is a sequence of characters

Integer — An integer data type is a non-decimal number

Float — A float is a number with a decimal point or a number

Boolean — A Boolean represents TRUE or FALSE.

Array — An array stores multiple values in one single variable.

Declaring & Initializing a variable

variableName:type = value;

An example:

var name:string = "Bryan";

Arrays

Arrays are used to store multiple values in a single variable, instead of declaring separate variables for each value.

Declaring an Array

var array_name[:datatype]; //declaration

Initialising the Array

array_name = [val1,val2,valn..] //initialization

Have access to the elements

array_name[subscript] = value

Basic Operators

+ (Addition)

- (Subtraction)

* (Multiplication)

/ (Division)

% (Modules)

++ (Increment)

- -(Decrement)

Conditional Statements

TypeScript has the following conditional statement:

If

Else

If Else

Switch

If Statement

To execute a block of code if a specific condition is true.

if (condition) {

// block of code to be executed if the condition is true

}

Else Statement

To execute a block of code if a specific condition is false.

if (condition) {

// block of code to be executed if the condition is true

} else {

// block of code to be executed if the condition is false

}

If Else Statement

To specify a new condition if the first condition is false.

if (condition1) {

// block of code to be executed if condition1 is true

} else if (condition2) {

// block of code to be executed if the condition1 is false and condition2 is true

} else {

// block of code to be executed if the condition1 is false and condition2 is false

}

Switch

The switch statement is used to select one of many code blocks to be executed.

switch(expression) {

case x:

// code block

break;

case y:

// code block

break;

default:

// code block

}

Loops

Loops can execute a block of code as long as a specified condition is reached.

While Loop

The while loop loops through as long as a specific condition is true.

while (condition) {

// code block to be executed

}

For Loop

When you know exactly how many times you want to loop through a block of code, you can use the for loop.

for (statement 1; statement 2; statement 3) {

// code block to be executed

}

Statement 1 is executed before the execution of the code block.

Statement 2 defines the condition for executing the code block.

Statement 3 is executed after the code block has been executed.

For Each Loop

There is also a “for-each” loop that is used exclusively to loop through elements in an array:

for (type variableName : arrayName) {

// code block to be executed

}

Conclusion

After this article, I hope you can write a simple TypeScript code now and have a good idea of what TypeScript is about.