TypeScript vs JavaScript: Know The Difference

Over the years, JavaScript has grown from a simple client-side scripting language to a powerful tool that drives complex web applications. Developers now use JavaScript across the full stack of web development. But despite its versatility, JavaScript still has some limitations, like dynamic typing and lack of static analysis.

That's why TypeScript was created in 2012 - to fix these shortcomings. Compared to JavaScript, TypeScript offers static typing and better tooling support, among other advantages.

These two programming languages serve different purposes and have distinct features, which can confuse developers when deciding which one to use. This article aims to demystify these two languages, offering insights into their differences, similarities, and when to use one over the other.

Features of JavaScript

JavaScript is a powerful programming language that lets you create dynamic and interactive web pages. Here are some of its key features:

1. Interactivity with the DOM (Document Object Model)

JavaScript can access and modify the DOM of a webpage, allowing you to dynamically change the content, structure, and style of the page.

// Changing the content of an element
document.getElementById("demo").innerHTML = "Hello, JavaScript!";

This code selects an HTML element by its ID ("demo") and changes its content to "Hello, JavaScript!". This allows web pages to update content based on user actions without reloading the page.

You can see more examples of DOM manipulation in the Mozilla Developer Network docs.

2. Event handling

Through event listeners, JavaScript can respond to user actions, like clicks, keyboard input, and mouse movements.

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

This code adds an event listener to a button with the ID "myButton". When someone clicks the button, it displays an alert box with the message "Button clicked!".

3. Asynchronous programming

JavaScript supports asynchronous programming through callbacks, promises, and async/await, enabling non-blocking operations like fetching data from a server.

// Using fetch with async/await
async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}
fetchData();

This example uses async/await to fetch data from a URL without blocking other code from running.

4. Dynamic typing

JavaScript is dynamically typed, which means variables don't need to be declared with any particular type, and their types can change as your code runs.

let example = "Hello, world!";
console.log(typeof example); // "string"

example = 42;
console.log(typeof example); // "number"

This shows how the type of the example variable changes from "string" to "number", showing JavaScript's dynamic typing in action.

Features of TypeScript

TypeScript is a superset of JavaScript, developed and maintained by Microsoft. Here are some of its key features:

1. Static type checking

TypeScript introduces static type checking to JavaScript, allowing developers to specify variable types and catch type errors when writing code rather than when running it.

let message: string = "Hello, TypeScript!";
// message = 123; // This line would cause a compile-time error

This code shows how to declare a variable message with the type string. Trying to assign a number to message later would result in an error while coding, preventing potential problems before your program even runs.

If you're new to TypeScript, you might want to check out this beginners tutorial or watch this helpful video introduction.

2. Interfaces

Interfaces in TypeScript let you define an object's shape, ensuring it has the structure you expect.

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

const user: User = { name: "Alice", age: 30 };

This example creates an Interface named User with name and age properties. Any object assigned to the user variable must follow this structure, making your code more reliable and easier to understand.

3. Classes and inheritance

TypeScript supports modern JavaScript features, such as classes and inheritance, with extra benefits like access modifiers (public, private, protected) and abstract classes.

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

class Snake extends Animal {
  constructor(name: string) {
    super(name);
  }
  move(distanceInMeters = 5) {
    console.log("Slithering...");
    super.move(distanceInMeters);
  }
}

This code defines a base class Animal and a child class Snake that extends Animal. This shows how TypeScript enhances object-oriented programming in JavaScript.

4. Generics

Generics allow you to create reusable and flexible components that work with multiple types rather than just one.

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("myString");
let output2 = identity<number>(68);

Here, a generic function identity is defined, which can return any type of value specified when you call it. This allows for type-safe reuse of the function with different types.

5. Enums

Enums are a feature TypeScript adds to JavaScript, letting you define a set of named constants, making code more readable and manageable.

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

This defines an enum named Color with three options. It assigns Color.Green to variable c. Enums help manage sets of related constants with meaningful names.

6. Advanced types

TypeScript supports advanced types like union types, intersection types, and type guards, giving you more flexibility in how you work with types.

type StringOrNumber = string | number;

function logMessage(message: StringOrNumber): void {
  if (typeof message === "string") {
    console.log("String message: " + message);
  } else {
    console.log("Number message: " + message);
  }
}

This example shows a union type StringOrNumber, which can be either a string or a number. The function logMessage checks the type of the message parameter and handles it differently based on what it is.

When to use TypeScript vs. when to use JavaScript

Choosing between TypeScript and JavaScript depends on several factors. Here are some tips to help you decide when to use each.

When to use JavaScript

JavaScript can be the better choice in many scenarios. It's the foundation of web development and works perfectly fine for many types of projects. Here are the main situations where JavaScript might be your best bet:

1. Small projects or prototypes: For small-scale projects, scripts, or prototypes where you want to quickly test an idea, JavaScript is more straightforward. It doesn't need to be compiled like TypeScript does, allowing for faster development and testing.

2. Learning purposes: If you're new to programming or web development, starting with JavaScript is better. It helps you learn the basics of web programming without the added complexity of types.

3. Working with dynamic content: JavaScript's flexibility with types can be helpful when dealing with highly dynamic content where the data types might be unpredictable.

When to use TypeScript

TypeScript shines in different circumstances, particularly as projects grow in size and complexity. Consider using TypeScript in these situations:

1. Large-scale applications: For big projects where code maintenance and scalability are important, TypeScript's static typing helps manage complexity and prevent type-related bugs.

2. Projects with multiple developers: TypeScript's type system helps developers communicate better, making it clearer what kinds of values are being used throughout the codebase.

3. When reliability is a priority: Applications where reliability is critical, such as financial or medical software, benefit from TypeScript's error checking during development, reducing problems when the app is running.

4. Using modern JavaScript features with older browsers: TypeScript lets you use the latest JavaScript features and compile them down to JavaScript versions that work with older browsers.

Difference between TypeScript and JavaScript

Understanding the differences between JavaScript and TypeScript can help developers choose the right tool for their projects.

Want to see TypeScript in action? Check out some real-world projects using TypeScript on GitHub or see how Angular framework uses TypeScript as its primary language.

Why do we need TypeScript when we have JavaScript?

While JavaScript is a powerful and flexible programming language that's essential for web development, TypeScript was created to address some of the challenges and limitations of JavaScript, especially as applications grow larger and more complex.

Here's why TypeScript is needed, even when we have JavaScript:

1. Static type checking

TypeScript's static typing system solves one of JavaScript's biggest pain points - catching errors during development instead of at runtime.

Problem in JavaScript: JavaScript's dynamic typing means that types are determined when the code runs, which can lead to bugs that are hard to find. For example, mixing up types can cause unexpected behavior or errors during runtime.

Javascript code:

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

console.log(add(5, "10")); // Outputs "510" instead of 15

Solution in TypeScript: TypeScript introduces static type checking, allowing developers to catch errors while writing code, long before it's executed.

Typescript code:

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

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

2. Enhanced code quality and understandability

TypeScript makes code more self-documenting and easier to understand, which becomes increasingly important as projects grow.

Problem in JavaScript: As projects grow, the lack of explicit type declarations can make the code harder to understand and maintain. It's not immediately clear what types of values functions should receive or return without looking at the implementation details.

Solution in TypeScript: By requiring type annotations, TypeScript makes the code more readable and self-documenting. This clarity helps new developers understand the codebase faster and reduces the likelihood of bugs.

Typescript code:

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

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

3. Better development experience

The development process itself becomes smoother and more efficient with TypeScript, thanks to its additional features and tooling.

Problem in JavaScript: JavaScript's flexibility can sometimes be a double-edged sword, leading to unexpected behavior and making it harder for developers to navigate large codebases or safely make changes.

Solution in TypeScript: TypeScript's advanced features, such as interfaces and generics, along with its integration with development tools, provide a stronger foundation for building large-scale applications. Autocompletion, refactoring tools, and inline documentation make development much smoother.

Conclusion

JavaScript and TypeScript are two sides of the same coin, each offering unique benefits to web development. By understanding the differences and strengths of each, you can make smarter decisions about which language best suits your project's needs. Whether you choose JavaScript for its flexibility and widespread use or TypeScript for its robust typing and development tools, both languages can help you build efficient, scalable, and maintainable web applications.

Want to learn more? Here are some helpful resources to continue your journey:

• TypeScript Official Documentation - The best place to start learning TypeScript

• JavaScript Info - Modern JavaScript tutorial

• TypeScript Deep Dive - A fantastic free book about TypeScript

• Scrimba Interactive JavaScript Course - Learn JavaScript through interactive coding challenges.