Day 6 of #100DaysOfCode — Introduction to TypeScript

If you're building modern JavaScript applications — especially with React, TypeScript has probably shown up everywhere. Today was my Day 6 of #100DaysOfCode, and I focused entirely on understanding TypeScript Basics.

---

What Exactly Is TypeScript?

TypeScript is a typed superset of JavaScript created by Microsoft.
It adds static type checking on top of regular JavaScript, meaning you can catch errors before your code even runs.

At its core, TypeScript:

✔ Compiles down to plain JavaScript
✔ Helps prevent runtime bugs
✔ Improves developer experience through IntelliSense, auto-suggestions, and compile-time feedback

If JavaScript is flexible clay, TypeScript is that same clay — but with strict parents watching to make sure you don’t create a monstrosity.

---

🤔 Why Even Use TypeScript When We Already Have JavaScript?

JavaScript is great — but it’s forgiving… like “sure buddy, do whatever you want” forgiving.
Typos, wrong data shapes, missing properties, and incorrect function arguments often only show up at runtime to say "Surprise", or even worse, in production to ruin your weekend 😫.

TypeScript helps by:

• Catching errors during development
• Making code easier to document and maintain
• Providing better tooling (autocomplete, hints, refactoring safety)
• Helping large teams scale codebases without chaos

In short: TypeScript prevents bugs and boosts productivity.

---

TypeScript Basics

1. Annotating Variables

Typing variables is one of the first steps in learning TypeScript.

let username: string = "John";
let age: number = 25;
let isLoggedIn: boolean = true;

You explicitly define each variable's type so TypeScript can enforce it.

---

2. Typing Arrays

TypeScript allows you to specify that an array contains only certain types.

let scores: number[] = [80, 90, 100];
let fruits: string[] = ["apple", "banana", "mango"];

Or using generics:

let ids: Array<number> = [1, 2, 3];

---

3. Typing Objects

Object typing ensures the shape of your object stays consistent.

let user: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

---

4. Union Types

Union types allow variables to accept multiple possible types.

let status: "success" | "error" | "loading";
status = "success";

Or:

let id: number | string;
id = 101;
id = "ABC123";

---

5. Function Types

Typing function arguments and return values leads to safer code.

function greet(name: string): string {
  return `Hello, ${name}!`;
}

Arrow functions work the same way:

const add = (a: number, b: number): number => {
  return a + b;
};

---

6. Type vs Interface (Basics)

Both type and interface help you describe object shapes.
They’re similar but have key differences:

• interface → extensible, great for object structures
• type → more flexible (can combine unions, primitives, tuples, etc.)

Example using type:

type Car = {
  brand: string;
  year: number;
};

let myCar: Car = { brand: "Toyota", year: 2022 };

Example using interface:

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

const employee: Person = { name: "Sara", age: 28 };

Note:
👉 Use interface for objects, type for unions — but both work fine.

---

TypeScript in React

TypeScript fits naturally into the React ecosystem.
It improves component reliability, catches prop mistakes early, and boosts autocompletion in large apps.

Let’s look at two essential concepts.

---

1. Typing Props in React

Create a props type or interface, then pass it to your component:

type ButtonProps = {
  label: string;
  disabled?: boolean; // optional
};

const Button: React.FC<ButtonProps> = ({ label, disabled }) => {
  return <button disabled={disabled}>{label}</button>;
};

Now your component is safer:

• label must be a string
• disabled is optional but must be boolean if provided

---

2. React Type Inference

TS can infer types automatically based on usage.

const counter = 0; // inferred as number

const handleClick = () => {
  console.log("Clicked!");
}; // inferred as () => void

React hooks also infer types:

const count = 0; // inferred as number

function Counter() {
  const [value, setValue] = React.useState(0); 
  // inferred: value = number, setValue expects number

  return (
    <button onClick={() => setValue(value + 1)}>
      Count: {value}
    </button>
  );
}

You only need to manually specify types when state is complex.

---

Final Thoughts

Learning TypeScript feels intimidating at first, but once you understand the basics — variables, types, functions, arrays, objects, unions, and React props, everything starts becoming clean and predictable.
TypeScript's verbosity may seem like it is slowing you down.
But in reality, it guides you, protects you, and helps you to build scalable, bug-free apps.

Day 6 is officially done — onwards to Day 7!