DEV Community

Cover image for 🚀 4 TypeScript Concepts That Made Me Write Cleaner Code
mashayeakh islam
mashayeakh islam

Posted on

🚀 4 TypeScript Concepts That Made Me Write Cleaner Code

#fullstack #typescript #learning #programming

Hey everyone 👋,
I’m Masayeakh, a full stack dev from Bangladesh currently learning TypeScript to level up my JavaScript skills.

After diving deeper into TypeScript this week, I learned a few features that completely changed how I think about code — Union Types, Tuples, Enums, and Interfaces.
Let’s go through them one by one 👇

🔗 1. Union Types — When You Don’t Know What’s Coming

Sometimes you don’t know if a value will be a string or a number.
That’s where Union Types shine.

let score: number | string = 33;
score = "55";
Enter fullscreen mode Exit fullscreen mode

TypeScript now lets score accept both numbers and strings — without losing type safety.

Here’s a more practical example 👇

type User = { name: string; email: string; id: number; };
type Admin = { adminName: string; email: string; id: number; };

let person: User | Admin = { name: "Masayeakh", email: "m@gmail.com", id: 101 };
person = { adminName: "Masayeakh", email: "m@admin.com", id: 101 };
Enter fullscreen mode Exit fullscreen mode

🧠 Lesson:

Union types make your code flexible when multiple data types or structures are possible — like APIs, roles, or IDs.

🧱 2. Tuples — Arrays That Follow Strict Rules

Tuples define fixed length and data type order.

let user: [string, number] = ["Jhon", 22];
Enter fullscreen mode Exit fullscreen mode

If you try to swap types or add another element, TypeScript will yell at you 😅

But you can even make them readonly:

type UserInfo = readonly [string, number];
const user1: UserInfo = ["Masayeakh", 25];
Enter fullscreen mode Exit fullscreen mode

🧠 Lesson:

Use tuples when you need ordered, predictable data — like
[username, id],
[lat, long], etc.

🪑 3. Enums — Human-Readable Constant Values

Instead of using magic numbers or strings everywhere, enums make your code more readable.

enum SeatChoice {
  AISLE,
  MIDDLE,
  WINDOW,
}
Enter fullscreen mode Exit fullscreen mode

Now you can write:

let mySeat: SeatChoice = SeatChoice.MIDDLE;
Enter fullscreen mode Exit fullscreen mode

You can even customize them 👇

enum SeatChoice2 {
  AISLE = 10,
  MIDDLE = 20,
  WINDOW = 30,
}
Enter fullscreen mode Exit fullscreen mode

🧠 Lesson:

Enums make constants easier to manage, especially for configurations or fixed categories.

💡 4. Interfaces — The Blueprint for Objects

Interfaces tell TypeScript what structure an object should follow.

interface User {
  name: string;
  age: number;
  isActive: boolean;
}
Enter fullscreen mode Exit fullscreen mode

Now, any object claiming to be a Usermust match this shape.

You can even define functions inside:

interface MathOp {
  val1: number;
  val2: number;
  operation(): number;
}

let result: MathOp = {
  val1: 23,
  val2: 32,
  operation() {
    return this.val1 + this.val2;
  },
};
Enter fullscreen mode Exit fullscreen mode

🧠 Lesson:

Interfaces make code scalable — especially when working on large applications or teams.

🎯 Final Thoughts
Each week I learn something that makes me respect TypeScript more.
This language doesn’t just help avoid bugs — it forces me to think clearly about structure, safety, and intent.

Next up, I’ll explore Generics and Type Inference — the real brain stretchers 🧠💪

If you’re also learning TypeScript, let’s connect and share progress!
Drop your profile or comment below 💬

Written by Masayeakh — full stack dev sharing his TypeScript journey.

Top comments (0)