Understanding the Difference Between JavaScript and TypeScript

As a developer, you’ve likely heard about both JavaScript and TypeScript. While JavaScript is one of the most popular programming languages for web development, TypeScript has been gaining traction due to its added features and benefits. In this blog post, I'll explore the key differences between JavaScript and TypeScript, and provide some code examples to illustrate these differences.

What is JavaScript?
JavaScript is a dynamic, high-level, interpreted programming language. It's widely used for web development, enabling interactive and dynamic content on websites. JavaScript is known for its flexibility, allowing developers to write code quickly without worrying about data types or strict syntax rules.

Example of JS code :

function greeting(name) {
    return `Welcome to JavaScript, ${name}!`;
}

console.log(greeting("Tom")); // Output: Welcome to JavaScript, Tom

What is TypeScript?
TypeScript is a statically typed superset of JavaScript developed by Microsoft. It adds optional static typing, classes, and interfaces to JavaScript. TypeScript code is transpiled into JavaScript, which means it can run anywhere JavaScript runs, but with the benefits of type safety and advanced features.

function greeting(name: string): string {
    return `Welcome to TypeScript, ${name}!`;
}

console.log(greet("Alice")); // Output: Welcome to TypeScript, Tom
// console.log(greet(123)); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Key Differences Between JavaScript and TypeScript
1. Static Typing
One of the most significant differences between JavaScript and TypeScript is static typing. In JavaScript, variables can be of any type and can change types at runtime. TypeScript, on the other hand, requires you to define the type of each variable, providing type safety and reducing runtime errors.

JavaScript Example

let message = "Hello, World!";
message = 42; // No error

TypeScript Example

let message: string = "Hello, World!";
message = 42; // Error: Type 'number' is not assignable to type 'string'.

2. Type Annotations
TypeScript allows you to annotate your code with types, making it easier to understand and maintain. This feature helps catch errors early in the development process.

TypeScript Example

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

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

3. Interfaces
TypeScript introduces interfaces, which allow you to define the structure of an object. This helps ensure that objects meet certain requirements and improves code readability and maintainability.

TypeScript Example

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

function greeting(person: Person): string {
    return `Hello, ${person.name}! You are ${person.age} years old.`;
}

const tom: Person = { name: "Tom", age: 25 };
console.log(greeting(tom)); // Output: Hello, Tom! You are 25 years old.

4. Classes and Inheritance
While JavaScript has basic support for classes and inheritance, TypeScript enhances these features with better syntax and type checking.

JavaScript Example

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Rex");
dog.speak(); // Output: Rex barks.

TypeScript Example

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak(): void {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Rex");
dog.speak(); // Output: Rex barks.

Conclusion
JavaScript and TypeScript each have their own advantages. JavaScript is flexible and easy to use, making it ideal for quick development and prototyping. TypeScript, with its static typing and additional features, offers improved code quality and maintainability, especially for larger projects.

Choosing between JavaScript and TypeScript depends on your project requirements and personal preferences. If you prioritize flexibility and speed, JavaScript might be the right choice. However, if you value type safety and robust development tools, TypeScript could be more suitable.

Regardless of your choice, understanding the differences and benefits of each language will make you a more versatile and effective developer.