TypeScript SeriesPart 1 of 4

Why TypeScript? Moving Beyond Plain JavaScript

Nov 10, 2024·2 min read·
TypeScriptJavaScriptWeb Development

JavaScript is one of the most widely used languages on the planet. It runs in the browser, on servers via Node.js, and in mobile apps. Its flexibility is both its greatest strength and its biggest weakness.

As projects grow, that flexibility becomes a maintenance problem. Functions receive unexpected argument types, properties that might not exist get accessed, and you only find out at runtime — often in production.

TypeScript fixes this by adding a static type layer on top of JavaScript. The code compiles away at build time, leaving plain JavaScript for the browser. You get safety during development with zero runtime overhead.

The Classic Bug TypeScript Catches

// JavaScript — no errors until runtime
function getUsername(user) {
  return user.profile.name.toUpperCase();
}

getUsername(null); // 💥 TypeError at runtime

TypeScript surfaces this immediately:

interface User {
  profile: {
    name: string;
  };
}

function getUsername(user: User): string {
  return user.profile.name.toUpperCase();
}

// TS Error: Argument of type 'null' is not assignable to parameter of type 'User'
getUsername(null);

The error shows up in your editor before you ever run the code.

Type Inference Means Less Boilerplate

You don't have to annotate everything. TypeScript is smart enough to infer types from context:

const scores = [95, 87, 72, 100]; // inferred as number[]
const best = Math.max(...scores);  // inferred as number

const user = {
  name: "Prabhash",
  role: "developer",
};
// TypeScript knows user.name is string, user.role is string

Annotations are only needed at API boundaries — function parameters and return types.

Why It's Worth the Setup Cost

The tooling benefits alone make TypeScript worth adopting:

  • Autocomplete that actually knows your data shapes — no more guessing what properties an object has
  • Safe refactoring — rename a field and TypeScript tells you every place it breaks
  • Self-documenting code — function signatures communicate intent without prose comments
  • Catch errors early — before CI, before review, before deployment

In the next part of this series, we'll dig into TypeScript's type system — primitive types, union types, and when to use type vs interface.