JavaScript vs. TypeScript: Understanding the Key Differences

JavaScript vs. TypeScript

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:

Feature	TypeScript (Static Typing)	JavaScript (Dynamic Typing)
Type Declaration	Explicit: Variables, function parameters, and return types must be declared with their data types.	Implicit: Data types of variables are determined at runtime based on the assigned value.
Type Checking	At compile time: The compiler validates code for type consistency and errors.	At runtime: Type checking occurs as the code executes.
Type Errors	Caught early (compile time), preventing unexpected runtime issues.	Can lead to runtime errors if incompatible types are mixed.
Code Readability	Improved clarity: Type annotations help understand data flow and intended use of variables/functions.	Can be less clear, especially in large projects, as types must be inferred.
Tooling Support	Rich IntelliSense, code completion, refactoring, and error highlighting in IDEs.	Limited tooling support compared to TypeScript.

TypeScript

function addNumbers(num1: number, num2: number): number {
    return num1 + num2; 
}

JavaScript

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!");
}
```