The 2021 Beginner’s Guide to TypeScript.

Share on facebook
Share on google
Share on twitter
Share on linkedin
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.

bryan@dijkhuizenmedia.com

bryan@dijkhuizenmedia.com

Leave a Replay

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit