Day 6 of #100DaysOfCode — Introduction to TypeScript

Source: Dev.to

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.

• 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.” Typos, wrong data shapes, missing properties, and incorrect function arguments often only show up at runtime, sometimes in production.

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

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

2. Typing Arrays

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

Or using generics:

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

3. Typing Objects

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

4. Union Types

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

Or:

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

5. Function Types

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 describe object shapes, but they have key differences:

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

Using type:

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

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

Using interface:

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

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

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

TypeScript in React

1. Typing Props in React

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

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

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

2. React Type Inference

TypeScript 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:

function Counter() {
  const [value, setValue] = React.useState(0); // 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 becomes clean and predictable. Its verbosity may seem like it slows you down, but in reality it guides you, protects you, and helps you build scalable, bug‑free apps.

Day 6 is officially done — onward to Day 7!