Learning TypeScript as a JavaScript Developer

Introduction

As a frontend developer, who’s currently schooling with AltSchool Africa and who is preparing to work with frameworks like React and Vue, I recently started learning TypeScript. I heard and learnt that it helps prevent bugs (the red underlines… Lol), and improves code quality during compiler time, but my first experience was confusing.

This article documents what confused me, the mistakes I made, and what I'm beginning to understand.

Why I Decided to Learn TypeScript

TypeScript is widely used in modern frontend applications, especially with React and Vue. Since my goal is to be job-ready, learning it felt necessary rather than optional.

I realized that understanding TypeScript early would help me:

Write safer code
Catch errors before runtime
Prepare for real-world frontend codebases

What Confused Me at First

One of the biggest challenges I faced was understanding why TypeScript complained about things JavaScript allowed.

In JavaScript, I was used to writing flexible code without restrictions. TypeScript introduced rules that initially felt strict and frustrating.

Let’s look at a few examples.

1. Functions requiring explicit return types:

this defines how strict TypeScript is with functions.

In JavaScript, I could write:

function add (a, b) {
  return a + b;
}

But in TypeScript, it’s better to be explicit:

function add(a: number, b: number): number {
  return a + b;
}

At first, this felt unnecessary. But over time, I realized this clarity helps:

Prevent accidental return values
Make the function’s purpose obvious
Improve collaboration in larger codebases.

2. Variables not accepting different types:

I can not longer reassign a variable to have a different type which was valid in Javascript.
example

let x = "Ayo";
    x = 32

The above code is not possible in typescript and will not be allowed because variable x must have a specific type.

Here’s why Typescript complains

When we write

let x = "Ayo";

TypeScript automatically infers that x is a string. Reassigning it to a number later breaks that rule.

The Correct Way to Handle Multiple Types

If you intentionally want a variable to accept more than one type, TypeScript allows that using union types (using the “|” sign).

Here’s the correct way:

let x: string | number = "Ayo";
    x = 32;

Now TypeScript understands that x can be either a string or a number, and the error disappears.

This was one of my first “aha” moments . TypeScript wasn’t trying to stop me, it just wanted me to be explicit.

3.Errors Showing Up Before Running the Code

Another thing that confused me at first was how TypeScript shows errors before the code even runs.

Coming from JavaScript, I was used to discovering issues only after running the code in the browser or during testing. With TypeScript, errors appear immediately in the editor while writing the code.

For example, in JavaScript, this might not cause any immediate problem:

function greet(name) {
  return name.toUpperCase();
}

greet(42);

The issue only shows up at runtime when the function tries to call toUpperCase() on a number.

In TypeScript, the same code produces an error before execution:

function greet(name: string) {
  return name.toUpperCase();
}

greet(42);

TypeScript immediately flags this because 42 is a number, not a string. This prevents a potential runtime bug before it ever reaches the browser.

What This Helped Me Understand

At first, the red underlines felt annoying. But I started to realize that TypeScript was acting like a safety net.

By catching errors early, it helps:
Reduce runtime bugs
Make function usage clearer
Improve confidence when refactoring code

Instead of debugging issues after running the app, I can now fix problems while writing the code.

Conclusion

Learning TypeScript has been challenging, but it’s also changing how I think about JavaScript.

Instead of writing code and hoping it works, I’m learning to write code that explains itself, both to TypeScript and to other developers.

I’m still learning, but each mistake is helping me understand why TypeScript is so valuable in modern frontend development.

Command Palette