DEV Community

Cover image for This Is How I Mastered TypeScript Like I'm 5 (And How You Can, Too!) (2)
Karandeep Singh for Wisdom Bits

Posted on

This Is How I Mastered TypeScript Like I'm 5 (And How You Can, Too!) (2)

Today! We’re going to Continue TypeScript learning like you’re a smart 5-year-old who loves to build things and asks “why?” (which is the best thing ever).

& yes “why?” is my way of learning.

I've divided this into 20 Chapters. and will go one by one and each will be of 2 - 3 min. of read.
This is a Continuation, if you have not read Previous chapter - Chapter 1

This is Chapter ⓶ TS Mastering

🧩 Chapter 2: The World of Types

(aka: “Everything has a shape!”)

🧃 Imagine this:

You have a juice box. You know:

  • It’s made of liquid 🍹
  • It has a flavor (like mango or orange)
  • You can’t use it to hammer nails 🧃❌🔨 Do you?

That’s what types do in TypeScript, they describe what something is supposed to be, so you don’t accidentally mess up.(Kind of kids example, but we are learning like one)

🎨 TypeScript’s Basic Types

Let’s learn the common ones with super easy examples:

1. number → Just numbers!

let age: number = 10;
Enter fullscreen mode Exit fullscreen mode

Can be: 1, 99, -5, 3.14

2. string → Words or text

let name: string = "Mastereing TS";
Enter fullscreen mode Exit fullscreen mode

Can be: "hello", "123", "💻"

3. boolean → Only true or false

let isCool: boolean = true;
Enter fullscreen mode Exit fullscreen mode

Can be: true, false

4. null & undefined → "Nothing is here"

let nothingHere: null = null;
let notYetAssigned: undefined = undefined;
Enter fullscreen mode Exit fullscreen mode

Use when something is empty or not ready yet

5. any → 😬 “I don’t know what this is, so do whatever”

let mystery: any = "could be anything";
mystery = 5;
mystery = true;
Enter fullscreen mode Exit fullscreen mode

Pro-Tip : Try to avoid this unless you really need to.

6. array → A list of things

let fruits: string[] = ["apple", "banana", "mango"];
let scores: number[] = [99, 88, 77];
Enter fullscreen mode Exit fullscreen mode

7. object → A bunch of key-value pairs

let person: { name: string; age: number } = {
  name: "Wisdom Bits",
  age: 1000,
};
Enter fullscreen mode Exit fullscreen mode

If you enjoyed this and want to master TypeScript and other technologies, follow the series and drop a like!🤝

I’m a passionate software developer sharing the cool things I discover, hoping they help you level up on your coding journey.

Read More : Rethinking State Management in React — From a Dev, for Developers.

Top comments (0)