From JavaScript to TypeScript: A Practical Guide for Developers Making the Switch

JavaScript is one of the most important languages in modern software development. It runs in the browser, powers backend services with Node.js and Bun, and is used everywhere from small websites to large-scale applications.

But as JavaScript projects grow, a common problem starts to appear: the code becomes harder to understand, harder to refactor, and easier to break.

This is where TypeScript comes in.

TypeScript is not a completely different language. It is JavaScript with a type system added on top. That means if you already know JavaScript, you are not starting from zero. You are taking what you already know and adding tools that help you write safer, clearer, and more maintainable code.

This article explains the transition from JavaScript to TypeScript in a practical way, especially for developers who already understand JavaScript but are new to types.

---

What Is TypeScript?

TypeScript is a programming language built on top of JavaScript. Any valid JavaScript code is usually valid TypeScript code too.

The main difference is that TypeScript allows you to describe the types of your values.

For example, in JavaScript you might write:

let username = "alex";
let age = 25;
let isAdmin = false;

In TypeScript, you can write the same thing:

let username = "alex";
let age = 25;
let isAdmin = false;

This is still valid TypeScript.

But TypeScript also allows you to be more explicit:

let username: string = "alex";
let age: number = 25;
let isAdmin: boolean = false;

The : string, : number, and : boolean parts are type annotations. They tell TypeScript what kind of value each variable should hold.

If you later try to do this:

age = "twenty-five";

TypeScript will show an error before the code even runs.

That is the main idea: TypeScript catches many mistakes while you are writing code, not after your app crashes.

---

JavaScript Is Dynamic, TypeScript Adds Safety

JavaScript is dynamically typed. That means a variable can hold any kind of value at any time.

let price = 20;
price = "free";
price = true;

JavaScript allows this.

Sometimes that flexibility is useful. But in bigger applications, it can cause bugs. You might expect price to be a number, but somewhere else in the code it becomes a string. Then later you try to calculate with it and something breaks.

TypeScript helps prevent this.

let price: number = 20;

price = "free"; // Error

TypeScript does not remove JavaScript’s flexibility completely. It simply gives you a way to set rules where those rules are helpful.

---

The Best Way to Think About TypeScript

A good mental model is this:

TypeScript is JavaScript with documentation that the computer can understand.

When you write types, you are describing how your code is supposed to behave.

For example:

function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

This tells us three things:

1. price should be a number.
2. quantity should be a number.
3. The function returns a number.

In JavaScript, the same function would be:

function calculateTotal(price, quantity) {
  return price * quantity;
}

That works, but it does not tell the reader what kind of values the function expects. TypeScript makes that clear.

This is useful not only for the computer, but also for humans reading the code.

---

You Do Not Need to Type Everything Manually

One of the biggest mistakes beginners make with TypeScript is thinking they need to write a type annotation everywhere.

You do not.

TypeScript can infer types automatically.

const name = "Maria";
const age = 30;
const isLoggedIn = true;

TypeScript already knows:

name       // string
age        // number
isLoggedIn // boolean

So this is unnecessary:

const name: string = "Maria";
const age: number = 30;
const isLoggedIn: boolean = true;

It is not wrong, but it is often not needed.

A good rule is:

Let TypeScript infer simple types. Add types when they make the code clearer.

You usually want to add types to function parameters, function return values, objects, API responses, and important data structures.

---

Typing Objects

Objects are where TypeScript becomes very useful.

In JavaScript, you may have an object like this:

const product = {
  id: 1,
  name: "Coffee",
  price: 12.5,
  stock: 20,
};

In TypeScript, you can describe the shape of that object:

type Product = {
  id: number;
  name: string;
  price: number;
  stock: number;
};

Then you can use it:

const product: Product = {
  id: 1,
  name: "Coffee",
  price: 12.5,
  stock: 20,
};

Now TypeScript knows exactly what a product should look like.

If you forget a required property:

const product: Product = {
  id: 1,
  name: "Coffee",
  price: 12.5,
};

TypeScript will complain because stock is missing.

If you use the wrong type:

const product: Product = {
  id: 1,
  name: "Coffee",
  price: "cheap",
  stock: 20,
};

TypeScript will complain because price should be a number.

This is extremely helpful in real applications, especially when many files and functions are passing objects around.

---

Typing Arrays

Arrays are also simple.

In JavaScript:

const products = ["Coffee", "Mug", "T-Shirt"];

In TypeScript:

const products: string[] = ["Coffee", "Mug", "T-Shirt"];

This means products is an array of strings.

For numbers:

const prices: number[] = [10, 20, 30];

For objects:

type Product = {
  id: number;
  name: string;
  price: number;
};

const products: Product[] = [
  { id: 1, name: "Coffee", price: 12.5 },
  { id: 2, name: "Mug", price: 8 },
];

The Product[] type means this is an array where every item should match the Product structure.

---

Typing Functions

Functions are one of the most important places to use TypeScript.

JavaScript:

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

TypeScript:

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

The first string tells TypeScript that name must be a string.

The second string tells TypeScript that the function returns a string.

Another example:

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

Now this works:

add(5, 10);

But this gives an error:

add("5", "10");

That is the benefit. TypeScript helps stop invalid usage before runtime.

---

Optional Properties

Sometimes an object property may or may not exist.

For example, a user may have a profile image, but it is not required.

type User = {
  id: number;
  username: string;
  avatarUrl?: string;
};

The ? means avatarUrl is optional.

This object is valid:

const user: User = {
  id: 1,
  username: "alex",
};

This is also valid:

const user: User = {
  id: 1,
  username: "alex",
  avatarUrl: "https://example.com/avatar.png",
};

Optional properties are very common when working with APIs, forms, and database data.

---

Union Types

A union type means a value can be one of several types.

let id: string | number;

id = 123;
id = "abc";

This means id can be either a string or a number.

Union types are also useful for specific allowed values:

type OrderStatus = "pending" | "paid" | "shipped" | "cancelled";

let status: OrderStatus = "pending";

This is valid:

status = "paid";

This is not:

status = "done";

TypeScript only allows the values you defined.

This makes your code much safer than using random strings everywhere.

---

Interfaces vs Types

You will see both type and interface in TypeScript.

Example with type:

type User = {
  id: number;
  name: string;
};

Example with interface:

interface User {
  id: number;
  name: string;
}

For beginners, the difference is not very important. Both can describe object shapes.

A simple rule:

Use type by default. Learn interface later when you need it.

Many teams use both. Some prefer interface for objects and type for unions. But when you are starting, type is enough for most cases.

---

The any Type

TypeScript has a special type called any.

let value: any = "hello";

value = 123;
value = true;
value = {};

any means TypeScript will not check that value.

This can be useful when migrating JavaScript code gradually, but it removes the benefit of TypeScript.

Using any is basically saying:

Trust me, TypeScript. Do not check this.

Sometimes that is okay. But if you use any everywhere, you are mostly writing JavaScript again.

A better alternative is often unknown.

let value: unknown = "hello";

With unknown, TypeScript forces you to check the type before using it.

if (typeof value === "string") {
  console.log(value.toUpperCase());
}

So use any carefully.

---

TypeScript Does Not Run Directly in the Browser

Browsers understand JavaScript, not TypeScript.

TypeScript needs to be compiled into JavaScript before it runs in the browser.

For example, you write:

const message: string = "Hello";
console.log(message);

After compilation, the JavaScript output looks like:

const message = "Hello";
console.log(message);

The type information disappears at runtime.

This is important to understand:

TypeScript checks your code during development. It does not exist as types at runtime.

Tools like Vite, Next.js, Bun, and TypeScript’s own compiler can handle this compilation step for you.

With Bun, for example, you can run TypeScript files directly during development:

bun app.ts

Bun handles the TypeScript execution for you.

---

TypeScript Helps with Autocomplete

One of the best practical benefits of TypeScript is editor support.

When your code has types, your editor can understand your code better.

For example:

type Product = {
  id: number;
  name: string;
  price: number;
};

function printProduct(product: Product) {
  console.log(product.);
}

When you type product., your editor can suggest:

id
name
price

This makes development faster and reduces mistakes.

TypeScript is not only about catching errors. It also improves the coding experience.

---

TypeScript Makes Refactoring Easier

In JavaScript, changing a property name can be risky.

Imagine you have this object:

type Product = {
  title: string;
  price: number;
};

Later, you decide to rename title to name.

In a JavaScript project, you might forget to update some places.

In TypeScript, if your code still uses product.title, TypeScript can show errors because title no longer exists.

This makes refactoring safer, especially in bigger projects.

That is one of the biggest reasons teams adopt TypeScript.

---

A Simple JavaScript to TypeScript Example

Here is a small JavaScript example:

const products = [];

function addProduct(name, price) {
  const product = {
    id: Date.now(),
    name,
    price,
  };

  products.push(product);
}

function getTotal(products) {
  return products.reduce((total, product) => total + product.price, 0);
}

addProduct("Coffee", 12.5);
addProduct("Mug", 8);

console.log(getTotal(products));

Here is the TypeScript version:

type Product = {
  id: number;
  name: string;
  price: number;
};

const products: Product[] = [];

function addProduct(name: string, price: number): void {
  const product: Product = {
    id: Date.now(),
    name,
    price,
  };

  products.push(product);
}

function getTotal(products: Product[]): number {
  return products.reduce((total, product) => total + product.price, 0);
}

addProduct("Coffee", 12.5);
addProduct("Mug", 8);

console.log(getTotal(products));

The logic is almost the same. The difference is that TypeScript describes the data more clearly.

Now if someone tries this:

addProduct("Coffee", "cheap");

TypeScript catches the mistake immediately.

---

Migrating from JavaScript to TypeScript Gradually

You do not need to rewrite an entire project in TypeScript at once.

A good migration strategy is gradual.

Start with one file. Rename:

app.js

to:

app.ts

Then fix the errors one by one.

You can also begin by typing the most important parts of your app:

• API responses
• database models
• form data
• function parameters
• shared business logic
• configuration objects

Do not try to make everything perfect on day one.

The goal is progress, not perfection.

A practical approach is:

1. Rename a file from .js to .ts.
2. Add types to important objects.
3. Add types to function parameters.
4. Avoid any when possible.
5. Let TypeScript infer simple values.
6. Fix errors gradually.

This makes the transition much less intimidating.

---

Common Beginner Mistakes

Typing Everything Manually

You do not need this:

const name: string = "Alex";
const age: number = 25;
const active: boolean = true;

This is enough:

const name = "Alex";
const age = 25;
const active = true;

TypeScript already knows the types.

Using any Too Much

This works:

function handleData(data: any) {
  console.log(data.name);
}

But it removes type safety.

Better:

type User = {
  name: string;
};

function handleData(data: User) {
  console.log(data.name);
}

Fighting TypeScript Instead of Listening to It

Sometimes TypeScript errors feel annoying. But often, TypeScript is pointing at a real problem.

If TypeScript says something might be null, it is probably because your code really could receive null.

Instead of forcing the error away, handle the case properly.

const button = document.querySelector("button");

if (button) {
  button.addEventListener("click", () => {
    console.log("Clicked");
  });
}

TypeScript makes you think about edge cases that JavaScript allows you to ignore.

---

When TypeScript Feels Hard

TypeScript can feel confusing at first because it adds a new layer to JavaScript.

You are not only thinking about what the code does. You are also thinking about what shape the data has.

That takes practice.

The good news is that you do not need to learn all of TypeScript immediately.

You can build a lot with just these basics:

string
number
boolean
type
arrays
function parameter types
optional properties
union types

Advanced TypeScript features can wait.

You do not need generics, utility types, mapped types, or complex type magic when you are just starting.

Focus on writing clear types for real data.

---

Final Thoughts

Moving from JavaScript to TypeScript is not about abandoning JavaScript. It is about making JavaScript safer and easier to work with as projects grow.

If you already know JavaScript, you already know most of TypeScript. The syntax, functions, objects, arrays, promises, modules, and browser APIs are still the same.

The main new skill is learning how to describe your data.

TypeScript helps you catch mistakes earlier, understand your code faster, refactor with more confidence, and build larger applications with fewer surprises.

Start small. Add types where they help. Let TypeScript infer the obvious parts. Avoid turning everything into complicated type puzzles.

The best TypeScript code is not the code with the most types. It is the code where types make the program easier to understand.

JavaScript gives you flexibility.

TypeScript gives you confidence.

And the transition from one to the other is much easier than it first looks.