TypeScript Tutorial

TypeScript is a strongly-typed superset of JavaScript that enables developers to write more robust and maintainable code. This tutorial covers key TypeScript concepts with examples.

Data Types

TypeScript provides various data types for type safety.

Example:

let isDone: boolean = true;
let age: number = 25;
let firstName: string = "John";
let numbers: number[] = [1, 2, 3, 4];
let anything: any = "Can hold any value";
let nullable: string | null = null;

Operators

Operators perform operations on variables and values.

Example:

let a = 10, b = 20;
console.log(a + b); // Arithmetic
console.log(a > b); // Relational
console.log(a && b > 15); // Logical

Arrays

TypeScript arrays can hold a collection of items.

Example:

let fruits: string[] = ["Apple", "Banana", "Cherry"];
fruits.push("Mango");
console.log(fruits);

Interfaces

Interfaces define the structure of an object.

Example:

interface Person {
  name: string;
  age: number;
}
let person: Person = { name: "Alice", age: 30 };
console.log(person);

Classes

Classes provide a blueprint for creating objects.

Example:

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}
const dog = new Animal("Dog");
dog.speak();

JSON Objects and Array of Objects

Example:

let jsonObject = { id: 1, name: "Laptop" };
let arrayOfObjects = [
  { id: 1, name: "Laptop" },
  { id: 2, name: "Phone" },
];
console.log(jsonObject, arrayOfObjects);

Objects and Array of Objects Using Interface and Classes

Example:

interface Product {
  id: number;
  name: string;
}
class Store {
  products: Product[] = [];
  addProduct(product: Product) {
    this.products.push(product);
  }
}
let store = new Store();
store.addProduct({ id: 1, name: "Laptop" });
console.log(store.products);

Conditional Statements

If Statement:

let num = 10;
if (num > 5) {
  console.log("Greater than 5");
}

Switch Statement:

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  default:
    console.log("Other Day");
}

Loops

Example:

let nums = [1, 2, 3, 4];
for (let num of nums) {
  console.log(num);
}

Spread Operator

Example:

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
console.log(newArr);

Deep Copy and Shallow Copy

Example:

let obj = { a: 1, b: 2 };
let shallowCopy = obj;
let deepCopy = { ...obj };
shallowCopy.a = 10;
console.log(obj, deepCopy);

JSON Object Arrays with Functions

Example:

let items = [
  { id: 1, name: "Item1", price: 100 },
  { id: 2, name: "Item2", price: 200 },
];

// forEach
items.forEach((item) => console.log(item.name));

// map
let prices = items.map((item) => item.price);
console.log(prices);

// reduce
let total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);

// find
let foundItem = items.find((item) => item.id === 1);
console.log(foundItem);

// findIndex
let index = items.findIndex((item) => item.name === "Item2");
console.log(index);

// join
let names = items.map((item) => item.name).join(", ");
console.log(names);

// slice
let slicedItems = items.slice(0, 1);
console.log(slicedItems);

// push, pop, shift, unshift
items.push({ id: 3, name: "Item3", price: 300 });
items.pop();
items.shift();
items.unshift({ id: 0, name: "Item0", price: 50 });
console.log(items);

// includes
console.log(items.map((item) => item.name).includes("Item1"));

// fill
let filledArray = new Array(5).fill("Empty");
console.log(filledArray);

// sort
items.sort((a, b) => a.price - b.price);
console.log(items);

// every
console.log(items.every((item) => item.price > 50));

// some
console.log(items.some((item) => item.price < 100));