TypeScript vs JavaScript: A Practical Comparison for Modern Web Development

JavaScript is the backbone of web development and is supported by all browsers, used to create dynamic and interactive websites. TypeScript, on the other hand, is a superset of JavaScript — adding static typing and other features to make code more reliable and maintainable. In this article, we'll compare TypeScript and JavaScript in practical terms and show how TypeScript can help beginners write safer code without losing the flexibility of JavaScript.

### What is JavaScript?

JavaScript is a scripting language that runs natively in browsers. It lets you manipulate the DOM, handle events, and create interactive web applications. JavaScript is dynamically typed, meaning variable types are determined at runtime.

Here's a simple example of a JavaScript function that adds two numbers:

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

console.log(add(5, 3));  // Output: 8
console.log(add('5', '3'));  // Output: 53 (string concatenation)

Notice how JavaScript allows adding both numbers and strings without any errors, which can sometimes lead to unexpected bugs.

### What is TypeScript?

TypeScript builds on JavaScript by introducing static types. This means you specify the types of variables, function parameters, and return types. TypeScript helps catch type-related errors during development rather than at runtime, making your code safer and easier to maintain.

Let's rewrite the add function in TypeScript:

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

console.log(add(5, 3));  // Output: 8
// console.log(add('5', '3'));  // Error: Argument of type 'string' is not assignable to parameter of type 'number'

Here, TypeScript will show an error if you try to pass a string instead of a number, preventing bugs early.

### Key Differences

- **Typing:** JavaScript is dynamically typed, TypeScript is statically typed (supports type annotations). - **Compilation:** JavaScript runs directly in browsers; TypeScript is compiled to JavaScript before running. - **Tooling:** TypeScript offers better autocompletion and error checking in code editors. - **Learning curve:** JavaScript is simpler to start; TypeScript requires understanding of types but improves code quality.

### When to Use TypeScript?

If you're working on larger projects or collaborating with others, TypeScript helps maintain code quality and reduces bugs. For simple scripts or quickly prototyping, JavaScript can be fine.

### Setting Up a Simple TypeScript Project

To try TypeScript, you can install it using npm:

npm install -g typescript

// Create a file named add.ts
// Compile it with:
tsc add.ts

// Run the output JavaScript file with:
node add.js

### Conclusion

TypeScript enhances JavaScript by adding static types, improving reliability and developer experience. For modern web development, learning TypeScript alongside JavaScript is a great investment, especially for building scalable applications.