JavaScript vs. TypeScript: Understanding the Key Differences

JavaScript vs. TypeScript: Understanding the Key Differences

Have you ever worked on a large JavaScript project and found yourself wishing for a way to catch those pesky type-related errors before they caused havoc in production? TypeScript might be the answer you’re looking for. In this blog post, we’ll break down the differences between JavaScript and TypeScript, and why you might want to consider adding TypeScript to your development toolkit

Key Differences

• Static vs. Dynamic Typing:

TypeScript

// @filename: index.ts
function addNumbers(num1: number, num2: number): number {
  return num1 + num2
}

JavaScript

// @filename: index.js
function addNumbers(num1, num2) {
  return num1 + num2
}

• Object-Oriented Programming:

  • Objects: The core building blocks of OOP. Objects are self-contained bundles of data (properties) and the code that operates on that data (methods). Think of them as blueprints for creating real-world entities.
  • Classes: Templates or definitions for creating objects. They define the structure of an object: its properties (characteristics) and methods (behaviors).
  • Inheritance: A powerful mechanism where a new class (subclass) can inherit properties and methods from an existing class (superclass). This promotes code reusability and a hierarchical structure.
  • Polymorphism: The ability of objects of different classes to respond to the same method call in different ways. This enables flexibility and writing more adaptable code.
  • Encapsulation: Bundling data and related methods within an object, and controlling access to them. This helps protect data integrity and promotes modularity.
  • Abstraction: Representing complex real-world concepts as simplified objects in code, focusing on essential properties and behaviors.

  How It Works in TypeScript

  • Strong OOP Support: TS is built from the ground up for OOP.
    • Classes: You define classes using the class keyword, with constructors and methods.
    • Interfaces: Interfaces act as contracts that classes must implement, defining the shape of objects without concrete implementation.
    • Inheritance & Polymorphism: Smooth implementation with the extends and implements keywords.
    • Access Modifiers: public, private, and protected keywords for fine-grained encapsulation control.

  JavaScript’s OOP Approach

  • Prototype-Based: JS doesn’t have traditional classes. Instead, objects inherit from other objects called prototypes.
  • Achieving Similar OOP Concepts:
    • Constructor Functions: Functions used to create objects, similar to classes.
    • Prototypes: Objects have a prototype property that can be used for inheritance and shared methods.
    • “Pseudo-Classes”: This pattern simulates classes using constructor functions and prototypes.

  Example: Car

  TypeScript

  TypeScript

  class Car {
    make: string
    model: string
    year: number
  
    constructor(make: string, model: string, year: number) {
      this.make = make
      this.model = model
      this.year = year
    }
  
    startEngine() {
      console.log('Vroom!')
    }
  }

  JavaScript

  JavaScript

  function Car(make, model, year) {
    this.make = make
    this.model = model
    this.year = year
  }
  
  Car.prototype.startEngine = function () {
    console.log('Vroom!')
  }