TypeScript vs. JavaScript: Key Differences

• TypeScript and JavaScript are closely related, but they have significant differences. TypeScript is a superset of JavaScript, meaning all valid JavaScript code is also valid in TypeScript. However, TypeScript introduces additional features that make it more robust and developer-friendly. Let’s explore the key differences between the two languages:

1. Type System

• JavaScript: JavaScript is a dynamically typed language, meaning types are determined at runtime. Variables can hold any type of data, and you won’t know if there’s a type-related error until you execute the code.

    let message = "Hello";

    message = 123;  // No error in JavaScript, but can cause bugs later

• TypeScript: TypeScript is a statically typed language, meaning types are checked at compile time. You explicitly declare the types of variables, parameters, and return values, which helps catch errors early.

    let message: string = "Hello";

    message = 123;  // Error: Type '123' is not assignable to type 'string'

2. Type Annotations

• JavaScript: Since JavaScript is dynamically typed, you cannot annotate variable types. The type of a variable is inferred based on its value.

    // JavaScript infers the type as 'number', but it's not enforced

    let age = 25;

• TypeScript: TypeScript allows you to add type annotations to variables, function parameters, and return types. This improves code readability and helps avoid bugs.

    let age: number = 25;  // Type is explicitly set to 'number'

3. Error Detection at Compile-Time

• JavaScript: Since types are not enforced at compile-time, type-related errors only occur when the code is executed, which might lead to runtime issues.

    function add(a, b) {

        return a + b;

    }

    // Outputs '1020', no error but unexpected behavior

    console.log(add(10, "20"));

• TypeScript: TypeScript checks for errors during compilation, so you can catch type-related issues early in the development process.

    function add(a: number, b: number): number {

        return a + b;

    }

    // Compilation error:

    Argument of type 'string' is not assignable to parameter of type 'number'

    console.log(add(10, "20"));  

4. Object-Oriented Programming (OOP) Features

• JavaScript: JavaScript is not fully object-oriented, though it supports some OOP principles through prototypal inheritance. ES6 introduced class syntax, but it’s mostly syntactic sugar over prototypal inheritance.

    class Animal {

        constructor(name) {

            this.name = name;

        }

    }

• TypeScript: TypeScript offers full support for OOP features like classes, interfaces, inheritance, access modifiers ('public', 'private', 'protected'), abstract classes, and more, making it ideal for building large-scale, maintainable applications.

    class Animal {

        private name: string;

        constructor(name: string) {

            this.name = name;

        }

    }

5. Interfaces and Type Aliases

• JavaScript: JavaScript doesn’t have built-in support for interfaces. You need to manually define objects and rely on dynamic typing for validation.

    let user = {

        name: "John",

        age: 30

    };

• TypeScript: TypeScript allows you to define interfaces and type aliases, which are contracts for the structure of objects. This adds a layer of type safety and improves code organization.

    interface User {

        name: string;

        age: number;

    }

    let user: User = {

        name: "John",

        age: 30

    };

6. Optional and Default Parameters

• JavaScript: JavaScript functions can be called with fewer arguments than defined, and any missing argument is automatically set to 'undefined'. To provide default values, you use default parameters (introduced in ES6).

    function greet(name = "Guest") {

        console.log("Hello, " + name);

    }

• TypeScript: TypeScript also supports optional and default parameters, but it adds type checking to ensure correct usage.

    function greet(name: string = "Guest"): void {

        console.log("Hello, " + name);

    }

7. Tooling and Editor Support

• JavaScript: JavaScript has good tooling, but since it lacks type information, editors have limited ability to provide intelligent features like autocompletion, refactoring, and error detection.

• TypeScript: TypeScript excels in tooling because the type information allows editors like Visual Studio Code to provide rich autocompletion, refactoring tools, and error detection. TypeScript’s type system also enables better IntelliSense.

8. ESNext Features

• JavaScript: JavaScript (especially modern ES6+) provides a lot of new features like arrow functions, destructuring, template literals, and modules, but not all of these features are available in older environments unless you use a transpiler like Babel.

• TypeScript: TypeScript supports all modern JavaScript (ESNext) features and allows you to write future JavaScript while compiling down to older JavaScript versions (e.g., ES5) for compatibility, based on your 'tsconfig.json'.

    const sayHello = (name: string): string => 'Hello, ${name}';

9. Community and Ecosystem

• JavaScript: JavaScript has a massive community and ecosystem. Almost all frameworks, libraries, and tools are built with JavaScript in mind.

• TypeScript: TypeScript has been growing in popularity rapidly. Major frameworks (React, Angular, Vue) have strong TypeScript support. The ecosystem has expanded with '.d.ts' files providing type definitions for almost all popular JavaScript libraries.

10. Non-JavaScript Features in TypeScript

• TypeScript introduces some features that aren’t available in JavaScript, which make it a more powerful tool for large-scale development:

• Enums: Define a set of named constants.

    enum Direction {

        Up,

        Down,

        Left,

        Right

    }

• Generics: Write functions and classes that work with multiple types, while maintaining type safety.

    function identity<T>(arg: T): T {

        return arg;

    }

• Tuples: Define an array with a fixed number of elements, each with specific types.

    let tuple: [string, number] = ["hello", 42];

• Summary of Key Differences

Feature	JavaScript	TypeScript
Typing	Dynamic	Static (with type annotations)
Compile-time error checking	None	Yes (catches type errors before execution)
OOP Support	Limited (prototypal inheritance)	Full support (classes, interfaces, etc.)
Interfaces/Type Aliases	Not available	Available
Tooling and IntelliSense	Limited	Excellent
Enum Support	Not available	Available
Generics	Not available	Available
Compilation	Directly interpreted	Compiled to JavaScript

• By leveraging TypeScript, developers can write safer, more maintainable code, especially in large-scale applications, while still benefiting from all of JavaScript's dynamic features.