TypeScript: A Comprehensive Guide

TypeScript is a superset of JavaScript that adds optional static typing. This means you can write JavaScript code with type annotations, which helps you catch errors early and improve code readability. This guide will walk you through the fundamental concepts of TypeScript, starting with the basics and progressively covering more advanced features.

Variables – Data Types

In TypeScript, you declare variables using the let or const keyword. You can also specify the data type of the variable using a colon (:) followed by the type name. Here are some common data types:

let message: string = "Hello, world!";
const age: number = 25;
let isLoggedIn: boolean = false;

Union

A union type allows a variable to hold multiple data types. You define a union type by separating the types with the pipe symbol (|).

let value: number | string = 10;
value = "Hello";

Operators

TypeScript supports a wide range of operators, including arithmetic, comparison, logical, and assignment operators. These operators work similarly to JavaScript.

let a: number = 10;
let b: number = 5;
let sum: number = a + b; // Arithmetic operator
let isGreaterThan: boolean = a > b; // Comparison operator

Conditional Statements

Conditional statements, such as if, else, and else if, allow you to execute different blocks of code based on a condition.

let temperature: number = 25;

if (temperature > 30) {
  console.log("It's hot!");
} else if (temperature < 10) {
  console.log("It's cold!");
} else {
  console.log("The temperature is comfortable.");
}

Loops

Loops in TypeScript allow you to repeat a block of code multiple times. Common loop types include for, while, and do...while.

for (let i: number = 0; i < 5; i++) {
  console.log(i);
}

Functions

Functions in TypeScript are reusable blocks of code that perform specific tasks. You can define a function using the function keyword.

function greet(name: string): string {
  return `Hello, ${name}!`;
}

let message: string = greet("John");
console.log(message); // Output: Hello, John!

Array – Tuples

Arrays in TypeScript are ordered collections of elements. Tuples are a special type of array where each element has a fixed data type and position.

let numbers: number[] = [1, 2, 3, 4, 5];
let user: [string, number] = ["John", 25];

Object

Objects in TypeScript represent collections of key-value pairs. You can define an object using curly braces ({}).

let person: { name: string; age: number; } = {
  name: "Jane",
  age: 30
};

Summary

• TypeScript is a superset of JavaScript with optional static typing.
• TypeScript provides type annotations for variables, functions, and other constructs.
• TypeScript supports various data types, including numbers, strings, booleans, arrays, tuples, and objects.
• TypeScript enhances code readability, maintainability, and error detection.