Why Export syntax variations in Typescript? - Purpose & Use Cases

The Big Idea

What if you could share your code like passing a note, instead of rewriting it every time?

The Scenario

Imagine you have many pieces of code spread across different files, and you want to share some parts with others. Without a clear way to export, you might copy and paste code manually between files.

The Problem

Copying code manually is slow and risky. You might forget to update all copies, causing bugs. It's hard to keep track of what code belongs where, and sharing becomes messy and confusing.

The Solution

Export syntax lets you mark exactly what parts of your code can be shared. It organizes your code clearly, so other files can easily import only what they need, keeping everything clean and efficient.

Before vs After

✗ Before

const add = (a: number, b: number): number => a + b;
// Manually copy this function to other files

✓ After

export const add = (a: number, b: number): number => a + b;
// Now other files can import 'add' directly

What It Enables

It enables smooth sharing and reuse of code across files, making your projects scalable and easier to maintain.

Real Life Example

When building a website, you can export a button component from one file and import it wherever you need it, without rewriting or copying the button code.

Key Takeaways

Manual copying of code is error-prone and inefficient.

Export syntax clearly defines what code can be shared.

It simplifies code reuse and project organization.