Forem: Nur Alam

Simplifying Object-Oriented Programming (OOP) Concepts with Real-Life Examples in TS

Nur Alam — Fri, 17 Jan 2025 10:28:46 +0000

What is OOP?

Object-Oriented Programming (OOP) is a programming paradigm (style used to write and organize code) that organizes and models software using objects. It promotes code reusability, modularity, and scalability.

Programming Paradigms:

1.Procedural Programming:
It follows a step-by-step approach using functions and procedures to solve problems. Code is executed in a linear flow.

Benefit: Simple and easy to understand for small programs but harder to manage as complexity grows.

// C Language
void greet() {
 printf("Hello!");
}
int main() {
 greet();
 return 0;
}

2.Functional Programming:
It focuses on pure functions and avoids changing data or state. Functions are treated as first-class citizens.

Benefit: Improves code predictability and testability by avoiding side effects.

//Javascript
 const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

3.Declarative Programming:
It focuses on what needs to be done rather than how to do it. The logic is handled by the underlying system.

Benefit: Simplifies complex operations by abstracting logic, making code more readable.

//SQL
 SELECT name FROM users WHERE age > 18;

4.Object-Oriented Programming (OOP):
It organizes code into objects with properties and methods to model real-world entities. It promotes code reusability and modularity.

Benefit: Simplifies complex systems through abstraction and makes maintenance easier with modular code.

//JS
class Animal {
 speak() {
 console.log("The animal makes a sound");
 }
}
const dog = new Animal();
dog.speak();

5.Event-Driven Programming:
The program responds to user actions or system events through event handlers. It’s common in GUI and web development.

Benefit: Improves user interaction by responding dynamically to events.

//JS
 document.getElementById("btn").onclick = () => alert("Button clicked!");

Object-Oriented Programming (OOP):

1.Inheritance

Inheritance allows a class (child/subclass) to acquire properties and methods from another class (parent/superclass). This helps reuse code and extend functionality.

Benefit: Encourages code reusability and simplifies code maintenance.

// Parent Class: Person
class Person {
 constructor(public name: string, public age: number) {}
 introduce() {
 console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
 }
}
// Child Class: Student inherits from Person
class Student extends Person {
 constructor(name: string, age: number, public grade: string) {
 super(name, age); // Calls the Person constructor to set name age
 }
 study() {
 console.log(`${this.name} is studying in grade ${this.grade}.`);
 }
}
// Creating an instance of Student
const student1 = new Student("Alice", 20, "A");
student1.introduce(); // Inherited method → Output: Hi, I'm Alice and I'm 20 years old.
student1.study(); // Child's own method → Output: Alice is studying in grade A.

2.Polymorphism

Polymorphism allows the same method to behave differently based on the object calling it. It helps write flexible and reusable code by using one method for many types of objects.

Benefit: Increases flexibility and scalability by allowing one interface to support different data types.

class Person {
 speak(): void {
 console.log("Person is speaking.");
 }
}
class Student extends Person {
 speak(): void {
 console.log("Student is studying.");
 }
}
class Teacher extends Person {
 speak(): void {
 console.log("Teacher is teaching.");
 }
}
function introduce(person: Person): void {
 person.speak();
}
const student = new Student();
const teacher = new Teacher();
introduce(student); // Output: Student is studying.
introduce(teacher); // Output: Teacher is teaching.

3.Abstraction:

Abstraction in OOP hides complex implementation details and only shows essential features to the user. It simplifies the code by focusing on what an object does instead of how it does it.

Benefit: Reduces complexity by focusing on high-level functionality.

abstract class Animal {
 abstract makeSound(): void; // Abstract method (no implementation)
 sleep(): void {
 console.log("Sleeping…");
 }
}
class Dog extends Animal {
 makeSound(): void {
 console.log("Bark!");
 }
}
const dog = new Dog();
dog.makeSound(); // Output: Bark!
dog.sleep(); // Output: Sleeping…

4.Encapsulation:

Encapsulation in OOP is the process of bundling data (properties) and methods (functions) into a single unit (class) and restricting direct access to some of the object’s components. This protects the internal state of an object and only allows controlled interaction through public methods.

Benefit: Protects object integrity by controlling how data is accessed and modified.

class Person {
 private age: number; // Private property
 constructor(age: number) {
 this.age = age;
 }
 // Public method to access the private property
 getAge(): number {
 return this.age;
 }
 // Public method to modify the private property with a condition
 setAge(newAge: number): void {
 if (newAge > 0) {
 this.age = newAge;
 }
 }
}
const person = new Person(25);
console.log(person.getAge()); // Output: 25
person.setAge(30);
console.log(person.getAge()); // Output: 30
// person.age = 40; // ❌ Error: Cannot access private property

Introduction to OOP Principles (SOLID):

S: Single Responsibility Principle — A class should only have one responsibility.
Benefit: Improves code maintainability and reduces complexity by separating concerns.
Example: A User class should only handle user data, not authentication.

class User {
 constructor(public name: string, public email: string) {}
}
class AuthService {
 login(user: User) {
 console.log(`Logging in ${user.name}`);
 }
}

O: Open/Closed Principle — Classes should be open for extension but closed for modification.
Benefit: Encourages extending functionality without changing existing code, reducing the risk of bugs.
Example: Extending a payment system without changing its core logic.

interface PaymentMethod {
 pay(amount: number): void;
}
class CreditCard implements PaymentMethod {
 pay(amount: number): void {
 console.log(`Paid ${amount} with Credit Card.`);
 }
}

L: Liskov Substitution Principle — Subclasses should replace base classes without breaking functionality.
Benefit: Ensures reliability when extending classes, preventing unexpected behavior.
Example: Replacing a base Bird with a Sparrow without issues.

class Bird {
 fly(): void {
 console.log("Flying");
 }
}
class Sparrow extends Bird {}
const bird: Bird = new Sparrow();
bird.fly();

I: Interface Segregation Principle — Avoid forcing classes to implement unused methods.
Benefit: Simplifies class design and avoids unnecessary dependencies.
Example: Split interfaces for different user roles.

interface Printer {
 print(): void;
}
interface Scanner {
 scan(): void;
}
class AllInOnePrinter implements Printer, Scanner {
 print(): void {
 console.log("Printing document");
 }
 scan(): void {
 console.log("Scanning document");
 }
}

D: Dependency Inversion Principle — High-level modules should depend on abstractions, not concrete implementations.
Benefit: Promotes flexibility and makes systems easier to refactor and maintain
Example: Using interfaces instead of direct class dependencies.

interface Database {
 connect(): void;
}
class MySQL implements Database {
 connect(): void {
 console.log("Connected to MySQL");
 }
}
class App {
 constructor(private db: Database) {}
 start() {
 this.db.connect();
 }
}
const app = new App(new MySQL());
app.start();

Important Topics:

Class with Parameter Properties:

In OOP, a class is a blueprint or template for creating objects. It defines the properties (attributes) and behaviors (methods) that the objects created from the class will have.

// Without Parameter Properties
class PersonWithoutPP {
 private name: string; //Can't modify from outside
 private age: number;
 constructor(name: string, age: number) {
 this.name = name; // Manual assignment
 this.age = age;
 }
 greet(): void {
 console.log(`Hello, my name is ${this.name}.`);
 }
}
const personA = new PersonWithoutPP("Alice", 25);
personA.greet(); // Output: Hello, my name is Alice
// With Parameter Properties (Simpler)
class PersonWithPP {
 constructor(private name: string, private age: number) {} // Automatic assignment
 greet(): void {
 console.log(`Hello, my name is ${this.name}`);
 }
}
const personB = new PersonWithPP("Bob", 30);
personB.greet(); // Output: Hello, my name is Bob

Typeof and In Guard:

The typeof type guard is used to narrow down the type of a variable based on its type.

function greet(person: string | number) {
 if (typeof person === "string") {
 console.log(`Hello, ${person}!`); // If person is a string
 } else {
 console.log(`Hello, number ${person}!`); // If person is a number
 }
}
greet("Alice"); // Output: Hello, Alice!
greet(25); // Output: Hello, number 25!

The in type guard is used to check if a specific property exists in an object, helping to narrow down the type.

interface Bird {
 fly(): void;
}
interface Fish {
 swim(): void;
}
function move(animal: Bird | Fish) {
 if ("fly" in animal) {
 animal.fly(); // If it's a Bird, it will fly
 } else {
 animal.swim(); // If it's a Fish, it will swim
 }
}
const bird: Bird = { fly: () => console.log("Flying!") };
const fish: Fish = { swim: () => console.log("Swimming!") };
move(bird); // Output: Flying!
move(fish); // Output: Swimming!

InstanceOf TypeGuard:

The instanceOf operator is used to check if an object is an instance of a particular class or constructor function. It helps TypeScript narrow down the type of an object.

class Animal {
 sound() {
 console.log("Animal sound");
 }
}
class Dog extends Animal {
 sound() {
 console.log("Bark");
 }
}
class Cat extends Animal {
 sound() {
 console.log("Meow");
 }
}
function makeSound(animal: Animal) {
 if (animal instanceof Dog) {
 animal.sound(); // If it's a Dog, we call Dog's sound()
 } else if (animal instanceof Cat) {
 animal.sound(); // If it's a Cat, we call Cat's sound()
 } else {
 animal.sound(); // If it's any other Animal, we call its sound
 }
}
const myDog = new Dog();
const myCat = new Cat();
const genericAnimal = new Animal();
makeSound(myDog); // Output: Bark
makeSound(myCat); // Output: Meow
makeSound(genericAnimal); // Output: Animal sound

Access Modifier(Public, Private, Protected):

Public: Accessible anywhere.

Private: Accessible only within the class.

Protected: Accessible within the class and subclasses.

class Employee {
 // public, can be accessed anywhere
 public name: string;
 // private, can only be accessed inside this class
 private salary: number;
 // protected, can be accessed inside this class and subclasses
 protected position: string;
 constructor(name: string, salary: number, position: string) {
 this.name = name;
 this.salary = salary;
 this.position = position;
 }
 // public method
 public displayInfo(): void {
 console.log(`Name: ${this.name}, Position: ${this.position}`);
 }
 // private method
 private calculateBonus(): number {
 return this.salary * 0.1;
 }
 // protected method
 protected showSalary(): void {
 console.log(`Salary: ${this.salary}`);
 }
}
class Manager extends Employee {
 constructor(name: string, salary: number, position: string) {
 super(name, salary, position);
 }
 // Access protected method
 public displaySalary(): void {
 this.showSalary(); // Works because showSalary is protected
 }
}
const emp = new Employee("John", 50000, "Developer");
console.log(emp.name); // public access
emp.displayInfo(); // public method works
// const emp2 = new Employee("John", 50000, "Developer");
// emp2.salary; // Error: 'salary' is private
const mgr = new Manager("Alice", 70000, "Manager");
mgr.displayInfo(); // public method works
mgr.displaySalary(); // protected method works in subclass

Getter & Setter:

class Employee {
 private _name: string;
 constructor(name: string) {
 this._name = name;
 }
 // Getter for _name
 get name(): string {
 return this._name;
 }
 // Setter for _name
 set name(newName: string) {
 this._name = newName;
 }
}
const emp = new Employee("John");
console.log(emp.name); // Output: John
emp.name = "Alice";
console.log(emp.name); // Output: Alice

Statics in OOP:

Static means a property or method belongs to the class itself, not to its instances, and is shared across all objects.

class Counter {
 static count: number = 0; // Shared across all instances
 increment() {
 Counter.count++; // Increases the shared 'count'
 }
}
const obj1 = new Counter();
const obj2 = new Counter();
obj1.increment(); // Counter.count becomes 1
obj2.increment(); // Counter.count becomes 2
console.log(Counter.count); // Output: 2

Interfaces for Abstraction

Interfaces define a contract that classes must follow, ensuring consistency without implementation details.

interface Animal {
 speak(): void;
}
class Cat implements Animal {
 speak(): void {
 console.log("Meow");
 }
}
const cat = new Cat();
cat.speak(); // Output: Meow

Method Overloading

Method overloading allows a class to define multiple methods with the same name but different parameter types.

class Printer {
 print(value: string): void;
 print(value: number): void;
 print(value: any): void {
 console.log(value);
 }
}
const printer = new Printer();
printer.print("Hello"); // Output: Hello
printer.print(123); // Output: 123

Composition Over Inheritance

Composition allows building complex behavior by combining simple, reusable components rather than relying on inheritance.

class Engine {
 start() {
 console.log("Engine started");
 }
}
class Car {
 constructor(private engine: Engine) {}

 drive() {
 this.engine.start();
 console.log("Car is driving");
 }
}
const car = new Car(new Engine());
car.drive(); // Output: Engine started \n Car is driving

Decorators

Special functions that modify classes or methods.

function Log(target: any, key: string) {
 console.log(`Calling ${key}`);
}
class Person {
 @Log
 sayHello() {
 console.log("Hello!");
 }
}
const person = new Person();
person.sayHello(); 
// Output: Calling sayHello \n Hello!

Use of super Keyword

super calls methods from a parent class inside a child class.

class Animal {
 move() {
 console.log("Animal moves");
 }
}
class Dog extends Animal {
 move() {
 super.move();
 console.log("Dog runs");
 }
}
const dog = new Dog();
dog.move(); // Output: Animal moves \n Dog runs

Mixins

Mixins allow sharing functionality between classes without inheritance.

type Constructor<T = {}> = new (…args: any[]) => T;
function CanFly<TBase extends Constructor>(Base: TBase) {
 return class extends Base {
 fly() {
 console.log("Flying");
 }
 };
}
class Bird {}
const FlyingBird = CanFly(Bird);
const bird = new FlyingBird();
bird.fly(); // Output: Flying

Understand OOP and SOLID with a Real-Life Story: The Bakery Business 🍰

Imagine you’re opening a bakery!

1. Class and Object
Class: Think of a “Cake Recipe.” It has ingredients and steps but isn’t a cake yet.
Object: When you follow the recipe and bake a cake, that’s the Object!
2. Encapsulation
You have a secret frosting recipe. You keep it in a locked drawer so no one can change it. Customers can enjoy the cake but can’t access the secret recipe.
Encapsulation protects important information by hiding it.
3. Inheritance
You make a basic chocolate cake. Then, you create a “Chocolate Lava Cake” by adding some gooey chocolate inside. You didn’t start from scratch — you just extended the chocolate cake!
Inheritance lets you reuse and expand on existing ideas.
4. Polymorphism
A customer asks for a “Cake.” Some want chocolate, others want vanilla. You know how to make both, but they all just ask for a cake!
Polymorphism means one command works in different ways.
5. Abstraction
Customers only see the delicious cakes on display. They don’t need to know how the oven works or how the dough rises.
Abstraction hides complex processes and shows only the necessary parts.

Understanding SOLID Principles

1. Single Responsibility Principle (SRP)
A “CakeMaker” only handles baking cakes, not decorating them.

2. Open/Closed Principle (OCP)
You can add a new cake flavor without changing the base recipe.

3. Liskov Substitution Principle (LSP)
If a “ChocolateCake” is a type of “Cake,” customers should enjoy it just like any other cake.

4. Interface Segregation Principle (ISP)
Your bakers only need cake recipes, while cashiers only need the register instructions.

5. Dependency Inversion Principle (DIP)
Your bakery depends on suppliers for ingredients but not on which supplier it is.

Conclusion

Understanding Object-Oriented Programming (OOP) and SOLID Principles doesn’t have to be intimidating. By relating these concepts to something as simple and enjoyable as running a bakery, we can see how these principles apply to real-world scenarios. OOP helps us structure our code efficiently, making it reusable and easy to manage, while SOLID principles guide us in writing clean, scalable, and maintainable software.

Just like a bakery thrives on well-organized recipes and processes, your software projects can thrive with strong design principles. So, whether you’re baking cakes or building applications, remember that the right foundation leads to sweet success! 🍰💻

Happy Coding! 🚀

🚀 TypeScript Fundamentals: A Complete Guide for Beginners

Nur Alam — Thu, 16 Jan 2025 16:38:46 +0000

📖 What is TypeScript?

TypeScript is a strongly typed, object-oriented programming language that builds on JavaScript by adding static types.

⚠️ Limitations of JavaScript

Dynamically Typed Language: We can put a string or number or array or object on the same variable which isn’t a feasible thing. Also checking the type errors in large-scale apps is very difficult.

let a = 'Nur Alam';
a=[1,2,3]

JavaScript supports object-oriented programming through prototypes and ES6 classes.
In JS we find the errors in runtime rather compile time.
When working on a large application with JS then it’s difficult to maintain a large codebase, it's hard to find bugs, and catch errors only in runtime.
If we need to convert the code to support old browser then it will be a issue. But typescript can be transpiled into an older version of JS easily.

** Browsers don't natively support TypeScript. We need to convert it to JS

✅ Why Use TypeScript? (Benefits)

Supports older browser
Type safety
Increase Productivity
Fewer Bugs and less testing
TS has all types of JS( Number, String, Boolean, Null, Undefined, Object, Symbol) and has some own types as well (Interface, Void, Array, Tuple, Enum, Union, Intersection).

Drawbacks of TypeScript

Type Complexities ( Have to define types for small projects)
Limited Library support (Have to take additional library support sometimes)
Over-engineering in type design can complicate small projects.
Migration Challenge (Convert existing JS to TS)

🛠️ Installing and Running TypeScript

Install Typescript: npm i -g typescript

Run Typescript Code:

Initialize Typescript Config:

tsc --init

Go to tsconfig.json and change the rootDir and outDir with uncomment to your path. Ex:

"rootDir": "./app/src/",  // TS Files
"outDir": "./app/dist/",   //Output directory

Open the terminal and run “tsc”. It will compile ts file to js. You can set compile version in “target” of tsconfig.json. For example:

"target" : "ES5",

***To easily run ts file, we can use ts-node-dev npm package. Here’s the process:*

//Install
npm i -g ts-node-dev
//Run
ts-node-dev --respawn --transpile-only server.ts

🔢 Primitive and Non-Primitive Types

Primitive: number, string, boolean, null, undefined, symbol
Non primitive: Array, Tuple, Object

** In JS, Objects are non-primitive. TS has array and objects both data types. We don’t get data type in TS in runtime, we get it when we compile.

🆚 Implicit vs Explicit Data Typing

When we define type then it’s explicit.

🔠 Basic Data Types with Examples

//string
let firstName: string = 'Nur'
//number
let roll: number = 123
//boolean
let isAdmin: boolean = true
//undefined
let x: undefined = undefined
//null
let y:null = null
//any. Can be any data type. Isn't recommended to use.
let z: any = 'Any'
//Array
let friends: string[] = ['Alice', 'Rachel']
//tuple ->Special type of array which maintains type order
let coordinates: [number, number] = [5,5]
//Object
const user: {
   firstName: string;
   middleName?: string; //Optional
   lastName: string;
} = {
   firstName: 'Nur',
   lastName: 'Alam'
}

📦 Object Literals

It defines its own type. In below example company name is fixed so we can define a new type for that.

const user: {
   company: 'Google', // Literal Type
   firstName: string;
   middleName?: string; //Optional
   lastName: string;
} = {
   company: 'Google',
   firstName: 'Nur',
   lastName: 'Alam'
}

🏗️ Functions in TypeScript

//Normal Function with types and predefined value
function add(num1: number, num2: number = 10): number {
 return num1 + num2;
}


//Arrow Function
const add = (num1: number, num2: number): number => num1 + num2;


//Method -> A function inside JS Object
const user = {
 name: "Nur",
 balance: 0,
 addBalance(balance: number): number {
   return this.balance + balance;
 },
};


//Callback Function - A callback function is a function passed as an argument to another function and is executed later within that function.
//Here a arrow function is passed in map function
const num: number[] = [1, 2, 3];
const doubleNum: number[] = num.map((elem: number): number => elem * 2);

🔄 Spread & Rest Operators

Spread operator expands elements, while the rest operator collects arguments into an array.

//Spread Operator
const arr1: number[] = [1, 2, 3];
const arr2: number[] = [4, 5, 6];


const combineArr: number[] = [...arr1, ...arr2];


//Rest Operator -> Used to collect multiple arguments into a single array.
const employee = (...employee: string[]) => {
 employee.forEach((em: string) => console.log(`Onboard ${em}`));
};


employee("Nur", "Abul", "Rimon");

🏗️ Destructuring in TS:

//Object Destructuring
const user = {
 id: 123,
 name: {
   firstName: 'Nur',
   lastName: 'Alam',
 }
}
//Destructuring id as userID ( Name Alias) and firstName
const {id: userID, name: { firstName }} = user;


//Array Destructure
const friends = ["Joy", "Akash", "Karim", "Latif", "Opu" ]
//Destructuring Karim as bestfriend and latif, opu in rest
const [,,bestFriend, ...rest] = friends

🔄 Type Alias

//Type Alias in object
type User = {
 firstName: string;
 middleName?: string; //Optional
 lastName: string;
}
const user1: User = {
 firstName: 'Nur',
 lastName: 'Alam'
}


//Type Alias in Function
type Add = (num1: number, num2: number) => number
const add: Add = (num1, num2) => num1+num2;

🔗 Union, Intersection, Nullish Coalescing Operator

// Ternary Operator
const hasPassed = mark >=40 ? "Passed" : "Failed";


//Union
const user = User1 | User2 // Can be either of User type
//Intersection
const user = User1 & User2 // Combination of both the type and will contain all field


// Nullish Coalesing Operator
// Used when need to make decision based on null or undefined
const isAdmin = null;
const userType = isAdmin ?? "Normal User";


//Optional Chaining
const isPassed = student?.marks ?? "Didn't attend exam"

🚫 Never, Unknown, Nullable Types

never is used for functions that never return or reach the end.

function throwError(message: string): never {
  throw new Error(message);
}

unknown represents a value with an unknown type and requires type checking before use.

let data: unknown = "Hello";
if (typeof data === "string") {
  console.log(data.toUpperCase());
}

Nullable types (null and undefined) allow variables to have no value or be unassigned.

let name: string | null = null;
let age: number | undefined;

🧐 Type Assertion & Type Narrowing

Type Assertion tells TypeScript to treat a value as a specific type.

let value: unknown = "Hello, TypeScript!";
let strLength: number = (value as string).length;
console.log(strLength); // Output: 18

Type Alias vs Interface:

The interface is primarily used to define the structure of objects and is extendable using the extends keyword, making it ideal for object-oriented designs. It also supports declaration merging, allowing multiple declarations of the same interface to automatically combine.

On the other hand, type is more flexible and can define primitives, unions, tuples, and object types but does not support declaration merging. It uses the intersection operator (&) to combine types. For example, using an interface:

interface Person {
  name: string;
  age: number;
}
interface Employee extends Person {
  salary: number;
}

Whereas with a type alias:

type PersonType = { name: string; age: number; };
type EmployeeType = PersonType & { salary: number; };

Merging
interface User {
  name: string;
}

interface User {
  age: number;
}

// Result: { name: string; age: number; }

🛠️ Generics

Generics in TypeScript allow us to create reusable components that can work with a variety of data types while maintaining type safety. Instead of specifying a fixed type, generics use type parameters that are specified when the function, class, or interface is used.

//Generic Array
type GenericArray<T> = Array<T>;
//Same as GenericArray[number]
const roll: GenericArray<number> = [1, 2, 3];

//Generic Object
const user: GenericArray<{ name: string, age: number}> = [
 {
   name: "Nur",
   age: 25
 }
]
//Generic Tuple
type GenericTuple<X,Y> = [X,Y]
const user: GenericTuple<string, string> = ["Mr. X", "Admin"]
//Generic with interface
interface ApiResponse<T> {
  status: number;
  data: T;
}

const userResponse: ApiResponse<{ name: string; age: number }> = {
  status: 200,
  data: { name: "Alice", age: 25 },
};

const productResponse: ApiResponse<string[]> = {
  status: 200,
  data: ["Laptop", "Phone"],
};

//Generic in Function
const createGenericArr = <T>(param: T): T[] =>{
 return [param];
}

const result = createGenericArr<string>("Hello");

//Generic in tuple
const genericTuple =<T,Q>(param1: T, param2: Q): [T,Q]=>{
 return [param1, param2];
}

🚧 Constraints:

Constraints in TypeScript limit the types that can be used in generics to ensure type safety.

function printLength<T extends { length: number }>(item: T) {
  console.log(item.length);
}

printLength("Hello");      // ✅ Works (string has length)
printLength([1, 2, 3]);    // ✅ Works (array has length)
// printLength(123);       // ❌ Error (number has no length)

🔑 keyof Constraint

Limits a generic type to the keys of another type.

interface Person {
  name: string;
  age: number;
}

function getValue<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const person: Person = { name: "Alice", age: 25 };
console.log(getValue(person, "name")); // ✅ Output: Alice
// getValue(person, "height");         // ❌ Error: "height" is not a key of Person

⚡ Conditional Types:

Conditional types allow you to create types that depend on a condition.

type IsString<T> = T extends string ? "Yes" : "No";

type Test1 = IsString<string>;  // "Yes"
type Test2 = IsString<number>;  // "No"

Mapped Types:

Mapped types allow you to transform existing types by looping over their properties.

type Person = {
  name: string;
  age: number;
};

// Make all properties optional
type PartialPerson = {
  [K in keyof Person]?: Person[K];
};

const person: PartialPerson = { name: "Alice" }; // `age` is optional

🛠️ Utility Types

Pick → Select specific properties from a type

interface Person {
  name: string;
  age: number;
  address: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const person: NameAndAge = { name: "Alice", age: 25 };

Omit → Exclude specific properties from a type

type WithoutAddress = Omit<Person, "address">;

const personWithoutAddress: WithoutAddress = { name: "Bob", age: 30 };

Required → Make all properties mandatory

interface Product {
  id: number;
  description?: string;
}

type RequiredProduct = Required<Product>;

const product: RequiredProduct = { id: 1, description: "New product" };

Readonly → Make all properties immutable

interface Car {
  model: string;
  year: number;
}

const car: Readonly<Car> = { model: "Tesla", year: 2023 };
// car.model = "BMW"; // ❌ Error: Cannot assign to 'model' because it is a read-only property

Record → Create an object type with specified keys and value types

type UserRole = "admin" | "user" | "guest";

const roles: Record<UserRole, string> = {
  admin: "Full Access",
  user: "Limited Access",
  guest: "Read-Only Access",
};

Partial → Make all properties optional

interface Profile {
  username: string;
  email: string;
}

type OptionalProfile = Partial<Profile>;

const userProfile: OptionalProfile = { username: "Nur" }; // `email` is optional

Enum:

Enums allow us to define a set of named constants. It makes code more readable and manageable when dealing with constant values and
enforces valid inputs over plain strings or numbers.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

let move: Direction = Direction.Left;
console.log(move); // Output: "LEFT"

Template Literal Types:

Template Literal Types build complex types using string literals and union types.

type HttpMethod = "GET" | "POST";
type ApiRoute = "/users" | "/products";

type Endpoint = `${HttpMethod} ${ApiRoute}`;

const getUser: Endpoint = "GET /users";  // ✅
const invalid: Endpoint = "DELETE /users"; // ❌ Error

Conclusion

TypeScript offers powerful tools for building scalable and robust applications. It enhances JavaScript with static typing, better tooling, and modern features.

Start using TypeScript today to write cleaner, safer, and more efficient code!

Got questions or feedback? Drop a comment below! 👇

Follow me to learn OOP in Typescript.

Happy Coding! 🚀

Comprehensive Redux Toolkit Notes for React Developers

Nur Alam — Tue, 14 Jan 2025 14:48:13 +0000

🚀 Redux Toolkit Notes 🚀

What is Redux?
Redux is a flexible state container for JS apps that manages our application state separately. It manages the application state in a single store, making it easier to handle complex state logic across the entire app.

Why Redux?
In normal flow, we need to do prop drilling to pass states in between components. Some levels don’t need the states here, which is a burden. Also uplifting a state for large medium apps isn’t a scalable solution as it requires structural changes. That’s why we need redux to manage states. All the states here are kept in store and whichever component needs that they can just subscribe to that store. Redux ensures predictable state management, easier debugging, and improved scalability by enforcing a unidirectional data flow.

Core Redux Components:

Action: An object that describes what happened. It typically contains a type and an optional payload. (A command)
Dispatch: A function used to send actions to the store to update the state. (A event occurring)
Reducer: A pure function that takes the current state and an action, then returns a new state. (Function that triggers when action dispatched)

Installing: npm i @reduxjs/toolkit react-redux

Redux Workflow:

Creating a Slice:
A slice is a collection of Redux reducer logic and actions for a single feature. The prepare callback allows US to customize the action payload before it reaches the reducer.

import { createSlice, nanoid } from "@reduxjs/toolkit";

const postSlice = createSlice({
 name: "posts",
 initialState: [],
 reducers: {
   addPost: {
     reducer: (state, action) => {
       state.push(action.payload);
     },
     prepare: (title, content) => ({
       payload: { id: nanoid(), title, content },
     }),
   },
   deletePost: (state, action) => {
     return state.filter((post) => post.id != action.payload);
   },
 },
});

export const { addPost, deletePost } = postSlice.actions;

export default postSlice.reducer;

Creating store:

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "../features/posts/postSlice";

export const store = configureStore({
   reducer: {
       posts: postReducer
   },
 });

Wrap with provider:

import { Provider } from "react-redux";
import { store } from "./app/store.jsx";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

Use in Component:

const PostList = ({ onEdit }) => {
 const posts = useSelector((state) => state.posts);
 const dispatch = useDispatch();

 return (
   <div className="w-full grid grid-cols-1 gap-6 mt-12">
     {posts.map((post) => (
       <div key={post.id}></div>
     ))}
   </div>
 );
};

Redux Browser Extension: Redux DevTools

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

Async Operation in Redux (Redux Thunk):

In Redux, asynchronous operations (like API calls) are handled using middleware because Redux by default only supports synchronous state updates. The most common middlewares for handling async operations are Redux Thunk, Redux Toolkit (RTK) with createAsyncThunk, and Redux Saga.

Implementation:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Fetch all posts
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
});

// Initial State
const initialState = {
  posts: [],
  post: null,
  loading: false,
  error: null,
};

// Slice
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      // Fetch all posts
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })

      },
});

export default postsSlice.reducer;

Use Case:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts, createPost, updatePost, deletePost } from './postsSlice';

const Posts = () => {
  const dispatch = useDispatch();
  const { posts, loading, error } = useSelector((state) =>state.posts);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  const handleCreate = () => {
    dispatch(createPost({ title: 'New Post', body: 'This is a new post' }));
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <button onClick={handleCreate}>Create Post</button>
     </div>
  );
};

export default Posts;

Middleware
Middleware in Redux intercepts dispatched actions, allowing for logging, crash reporting, or handling async logic. Middleware lets us customize the dispatch process.

const blogPostMiddleware = (storeAPI) => (next) => (action) => {
  if (action.type === 'posts/publishPost') {
    const contentLength = action.payload.content.length;

    if (contentLength < 50) {
      console.warn('Post content is too short. Must be at least 50 characters.');
      return;
    }
    console.log('Publishing post:', action.payload.title);
  }
  return next(action);
};

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(blogPostMiddleware),
});

Selectors
Selectors help access specific parts of the state.

export const selectCount = (state) => state.counter.value;

Error Handling
Handle errors effectively with proper state management.

initialState: {
  items: [],
  status: 'idle',
  error: null,
},

.addCase(fetchData.rejected, (state, action) => {
  state.status = 'failed';
  state.error = action.error.message;
});

RTK Query (Simplified Data Fetching)

RTK Query simplifies data fetching, caching, and synchronization. RTK Query automatically caches requests and avoids unnecessary refetching, improving performance.

Setting Up RTK Query

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
    getPostById: builder.query({
      query: (id) => `/posts/${id}`,
    }),
    createPost: builder.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
    }),
    updatePost: builder.mutation({
      query: ({ id, ...updatedPost }) => ({
        url: `/posts/${id}`,
        method: 'PUT',
        body: updatedPost,
      }),
    }),
    deletePost: builder.mutation({
      query: (id) => ({
        url: `/posts/${id}`,
        method: 'DELETE',
      }),
    }),
  }),
});

export const {
  useGetPostsQuery,
  useGetPostByIdQuery,
  useCreatePostMutation,
  useUpdatePostMutation,
  useDeletePostMutation,
} = api;
export default api;

Usage in Components

import React from 'react';
import { 
  useGetPostsQuery, 
  useCreatePostMutation, 
  useUpdatePostMutation, 
  useDeletePostMutation 
} from './api';

const Blog = () => {
  const { data: posts, error, isLoading } = useGetPostsQuery();
  const [createPost] = useCreatePostMutation();
  const [updatePost] = useUpdatePostMutation();
  const [deletePost] = useDeletePostMutation();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const handleCreate = async () => {
    await createPost({ title: 'New Post', body: 'Content of the post', userId: 1 });
  };

  const handleUpdate = async (id) => {
    await updatePost({ id, title: 'Updated Title', body: 'Updated content' });
  };

  const handleDelete = async (id) => {
    await deletePost(id);
  };

  return (
    <div>
      <button onClick={handleCreate}>Create Post</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            {post.title}
            <button onClick={() => handleUpdate(post.id)}>Edit</button>
            <button onClick={() => handleDelete(post.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default Blog;

Immutable Updates with Immer

Immer allows us to write logic that "mutates" state directly while keeping the updates immutable under the hood.

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Mutates state directly (handled by Immer)
    },

Mutate vs. Immutable

Mutate: Changing the data directly. For example, modifying an object or array.
Immutable: Instead of modifying data directly, we create a new copy with the changes applied, leaving the original data untouched.

How Immer Works
Immer helps us write code that looks like we're mutating data (i.e., changing it directly), but it automatically keeps the changes immutable under the hood. This is useful for avoiding common bugs when dealing with immutable data structures in JavaScript.
Example: Without Immer (mutation):

let state = { value: 0 };

// Mutating the state directly
state.value += 1; // This is mutation
console.log(state.value); // 1

With Immer (immutability):

import produce from 'immer';

let state = { value: 0 };

// Using Immer's `produce` to "mutate" the state
const nextState = produce(state, draft => {
  draft.value += 1; // Looks like mutation, but Immer keeps it immutable
});

console.log(state.value); // 0 (original state is unchanged)
console.log(nextState.value); // 1 (new state with the update)

This makes working with Redux (or any state management) easier because we don’t have to clone and update the state manually; Immer does it for us automatically.

Redux Persist:

To persist Redux state across page refreshes, we can integrate Redux Persist. This will store your Redux state in local storage or session storage and reload it when the app is refreshed.

Install:
npm install redux-persist

Implement:

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
// Defaults to localStorage
import { combineReducers } from 'redux';
import postReducer from './postSlice';

// Persist configuration
const persistConfig = {
  key: 'root',
  storage,
};

// Combine reducers (in case of multiple reducers)
const rootReducer = combineReducers({
  posts: postReducer,
});

// Persisted reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Configure store
const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // Required for redux-persist
    }),
});

// Persistor for persisting the store
export const persistor = persistStore(store);
export default store;

Wrap with Persisit Gate:

<Provider store={store}> 
  <PersistGate loading={null} persistor={persistor}> 
    <App /> 
  </PersistGate> 
</Provider>

Optional Enhancements

Use sessionStorage Instead of localStorage:
Change the storage to session-based (clears when the browser closes):

import storageSession from 'redux-persist/lib/storage/session';
const persistConfig = { key: 'root', storage: storageSession };

Selective Persistence:
Only persist specific slices of the state:

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['posts'], // Only persist posts
};

I have created a simple blog project with react, redux and ant design having CRUD functionality. You can check it out.
Project Link - Redux Blog App

🎯 Master Redux Toolkit and elevate your React apps!