TypeScript vs JavaScript: How are they different?

Over the years, JavaScript has evolved from a simple client-side scripting language to a powerful tool capable of driving complex web applications. This has allowed developers to use JavaScript across the full stack of web development. However, JavaScript still has some limitations, like dynamic typing and lack of static analysis.

Therefore, TypeScript was introduced in 2012 to address JavaScript's shortcomings. Compared to JavaScript, it offers static typing and enhanced tooling support, among other advantages.

The two programming languages serve different purposes and have distinct features, which can sometimes 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 allows you to 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 in response to user actions without reloading the page.

2. Event handling

Through event listeners, JavaScript can respond to user actions, such as 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 the button is clicked, 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 asynchronously without blocking the execution of subsequent scripts.

4. Dynamic typing

JavaScript is dynamically typed, which means variables do not have to be declared with any particular type, and their types can change at runtime.

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", demonstrating JavaScript's dynamic typing.

#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 at compile time rather than runtime.

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

This code snippet demonstrates how to declare a variable message with the type string. Attempting to assign a number to message later would result in a compile-time error, preventing potential runtime errors and making the code safer and easier to understand.

2. Interfaces

Interfaces in TypeScript allow you to define an object's shape, ensuring that it has the specified structure.

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 adhere to this structure, enhancing code reliability and readability.

3. Classes and inheritance

TypeScript supports modern JavaScript features, such as classes and inheritance, with additional 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 snippet defines a base class Animal and a derived class Snake that extends Animal. This showcases how TypeScript enhances object-oriented programming concepts in JavaScript.

4. Generics

Generics allow the creation of reusable and flexible components that work with multiple types rather than a single 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 a value of any type specified at the time of invocation. This allows for type-safe reuse of the function across different types.

5. Enums

Enums are a feature added by TypeScript to JavaScript, allowing the definition of 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 members. It assigns the Color.Green member to variable c. Enums help in managing sets of related constants with meaningful names.

6. Advanced types

TypeScript supports advanced types like union types, intersection types, and type guards, providing more flexibility in type manipulation.

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 demonstrates the use of a union type StringOrNumber, which can be either a string or a number. The function logMessage uses a type guard to check the type of the message parameter and perform different actions accordingly.

#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

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 require the compilation step that TypeScript does, allowing for rapid development and testing.

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

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

When to use TypeScript

1. Large-scale applications: For large projects where codebase maintainability and scalability are crucial, TypeScript's static typing helps manage complexity and prevent type-related bugs.

2. Projects with multiple developers: TypeScript's type system can significantly enhance developer communication, making it clearer what kinds of values are being passed around in the codebase.

3. When reliability is a priority: Applications where reliability is critical, such as financial or medical software, benefit from TypeScript's compile-time error checking, reducing runtime errors.

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

#Difference between TypeScript and JavaScript

This is a visual presentation of TypeScript and JavaScript’s unique characteristics and how one differs from the other.

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

#Why do we need TypeScript when we have JavaScript?

While JavaScript is a powerful and flexible programming language central to web development, TypeScript was developed to address some of the challenges and limitations inherent in JavaScript, especially as applications grow in size and complexity.

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

1. Static type checking

Problem in JavaScript: JavaScript's dynamic typing means that types are determined at runtime, which can lead to bugs that are hard to track down. For example, mixing up types can lead to unexpected behavior or runtime errors.

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 at compile time long before the code is executed.

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

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

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

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

3. Better development experience

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 refactor code safely.

Solution in TypeScript: TypeScript's advanced features, such as interfaces and generics, along with its integration with development tools, provide a more robust foundation for building large-scale applications. Autocompletion, refactoring tools, and inline documentation improve the development experience significantly.

#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 informed decisions about which language best suits your project's needs. Whether you choose JavaScript for its flexibility and ubiquity or TypeScript for its robust typing and tooling, both languages are capable of building efficient, scalable, and maintainable web applications.

Join the Hygraph Slack community to stay up-to-date with the latest information and engage with fellow developers.