Engineering of Small Things #5: OOP Basics in TypeScript

Ahoy!
Back after quite a while, I originally planned to release this blog & couple others a long time ago but I guess life gets in the way.

Today we are going to look into some basic concepts of Object Oriented Programming.
And this isn't meant to be any kind of high level overview. Just me sharing my learning.
So! with that , let's begin!

What is Object Oriented Programming anyway?

Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

The Six Pillars of OOP: A Family Story

1. Classes: The Blueprint of You

First things first, what's a class?

Think of a Class as a blueprint. It's not a person, but it describes what makes a person. For instance, a Human class would be a blueprint defining that all humans have properties like a name, age, and eyeColor.

2. Objects: You, the Instance

So if a Class is the blueprint, what are you? You, my friend, are an Object.

An object is a real, living, breathing instance created from a class. While the Human class is the idea, you are the implementation. You have a specific name, a specific age, and so on. In code, we create a 'new' object from our class.

A better visualization of the difference between Objects & Classes:

3. Encapsulation: Your Personal Bubble

Encapsulation is about bundling your properties (data) and your methods (behaviors) together in that neat little Human object. It also means you can have secrets!

Some things about you are public, like your name. Anyone can ask for it. But some things are private, like your deepest, darkest thoughts. You keep those encapsulated. In OOP, this prevents outsiders from messing with the internal state of an object.

Onward we go!

4. Abstraction: Don't Overthink it!

Abstraction means hiding the complexity and showing only the essentials.

Think about meeting someone. You say "Hello!" and they say "Hello!" back. You don't need to know the complex biological processes of how their brain processed your greeting and formulated a response. You just need to know the simple interface: the greet() method. Abstraction hides the messy details.
Similar stuff happens when you go for a walk, you don't need to understand how your body keeps balance or how it pushes you forward to follow Newton's law. You just need to put one feet in front of the other.

You don't get the whole story, just the parts you need to interact with.

5. Inheritance: Your Family Legacy

Serious Life Talk!
Let's say you fall in love! And Decide to have babies!

Your children will inherit traits from you. They might get your last name or your eye color.

Inheritance lets a new class (a Child) adopt the properties and methods of an existing class (a Parent). This saves you from rewriting the same code over and over. The child can have all the parent's features, plus their own unique ones.

So let's say YOU , The Parent, are a human:

You have your name, age & last name
And then you decide to have your first child:

You name your first child "Itchy"
So NOW your child will naturally inherit your last name:

Now we can use the properties the Child inherited from the parent to carry out tasks:

Just like that your kid got your last name & other stuff from your DNA (Class). Kid could inherit your crippling depression & anxiety as well.

6. Polymorphism: Different Folks, Different Strokes

Polymorphism is a big word for a simple idea: "many forms." It means you can treat objects of different classes in the same way, but they each behave in their own unique style.

Imagine you ask everyone in the family to doTheirChore().
The Parent might respond by "mowing the lawn", while the Child responds by "tidying up toys". The same instruction (doTheirChore()) produces different results. That's polymorphism in action!
We could add a chore(funtion) to each respective Classes (Parent & Child)

We can then assign the chores to the classes:

And finally we can add new function calls & execute the Chores!

Wrapping Up

And there you have it! The big ideas of OOP, explained through the story of you and your family. It's a powerful way to structure your code, and once you get the hang of it, you'll see how it makes building complex things so much more manageable.

I'm still on this learning journey myself. A massive shout-out to the repo that got me started and helped me understand these concepts in depth:

jafari-dev / oop-expert-with-typescript

A complete guide for learning object oriented programming pillars, SOLID principles and design patterns with TypeScript!

Object Oriented Programming Expert with TypeScript

This repository is a complete guide and tutorial for the principles and techniques of object-oriented programming. It can be a reference for all interested in programming and software developers. You will find simple and practical examples in all sections to make the concepts easier to understand.

Table of Contents

1. Fundamentals
   • What's Object-Oriented-Programming?
   • Class
   • Objects
   • Abstraction
   • Encapsulation
   • Inheritance
   • Polymorphism
2. SOLID Principles
   • What's SOLID Meaning?
   • Single Responsibility (SRP)
   • Open/Closed (OCP)
   • Liskov Substitution (LSP)
   • Interface Segregation (ISP)
   • Dependency Inversion (DIP)
3. Design Patterns
   • What's a Design Pattern?
   • Creational - Abstract Factory
   • Creational - Builder
   • Creational - Factory Method or Virtual Constructor
   • Creational - Prototype or Clone
   • Creational - Singleton
   • Structural - Adapter or Wrapper
   • Structural - Bridge
   • Structural - Composite or Object Tree
   • Structural - Decorator or Wrapper
   • Structural - Facade
   • Structural - Flyweight or Cache
   • Structural - Proxy
   • Behavioral - Chain of Responsibility
   • Behavioral - Command or…

View on GitHub

And if you want to see my personal study notes and the code examples I'm tinkering with, I've open-sourced them here:

My OOP in TS Study Repo:

ShatilKhan / OOP-TS-Study

Study on Object Oriented Programming with TypeScript

OOP-TS-Study

Study on Object Oriented Programming with TypeScript

What's Object-oriented-programming?

Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods). There are 6 pillars of OOP, includes:

1. Class
2. Objects
3. Data Abstraction
4. Encapsulation
5. Inheritance
6. Polymorphism

We can use TypeScript Playground to run the code. We can also use VS Code directly.

Running TypeScript Code in Visual Studio Code

Prerequisites

• Node.js and npm installed on your machine.

Steps

1. Install TypeScript Open the terminal in Visual Studio Code and run the following command to install TypeScript globally:

   npm install -g typescript 

2. Check TypeScript Installation: Verify that TypeScript is installed by running:

   tsc --version

3. Create a tsconfig.json File In your project directory, create a tsconfig.json file to configure the…

View on GitHub

You might see that some of the code is a few months old, as I stated at the beginning I initially planned to publish this blog a while ago but just couldn't find the time.
And I'm also experimenting with writing techniques & how to better present coding topics.
If you like this one, make sure to check out other blogs in this series.
Engineering of Small Things Series is basically written up to share where I explore fundamental topics of how the web works.
More to come soon!
And Happy Coding!