Diversify India dialog box

About TypeScript Compiler

Diversify India’s coding playground offers a safe and user-friendly environment to write, compile, run, and debug TypeScript or JavaScript programs. Powered by the official TypeScript library and our online JavaScript compiler, this tool allows you to practice various TypeScript concepts for free. The code execution happens directly in your browser without any server-side interference, enabling real-time output viewing.

Key Features

  • Full JavaScript Compiler Support: The playground supports all features available in our online JavaScript (JS) compiler.
  • Semantic Error Logging: Captures and logs semantic errors produced by the TypeScript compiler for better debugging.
  • TypeScript to JavaScript Conversion: Automatically compiles TypeScript code into JavaScript code.
  • Customizable Compiler Configuration: Supports configurations using tsconfig.json to meet specific project requirements.
  • Integrated HTML and CSS Editors: Includes editors for HTML and CSS, making it suitable for learning and experimenting with the Document Object Model (DOM) API in TypeScript.
  • Mobile Compatibility: A highly efficient and optimized TS compiler app that works seamlessly on mobile devices.
  • Lightweight: The tool loads quickly due to its lightweight design, ensuring minimal wait times.

About TypeScript

TypeScript (abbreviated as TS) is a free and open-source, strongly typed programming language developed by Microsoft. It extends JavaScript by adding static typing, which helps developers write more reliable and maintainable code. TypeScript is often used in large-scale projects and supports type definition files for JavaScript libraries, similar to C++ header files.

Features of TypeScript

  • Type Annotations and Compile-Time Type Checking: TypeScript provides static typing through type annotations to enable type checking at compile time.
  • Type Inference: TypeScript supports type inference, which is a process that automatically assigns types to variables, functions, and constants in a program.
  • Interfaces: Interfaces in TypeScript enable developers to define the structure of objects, specifying properties and methods.
  • Enumerated Types (Enums): Provides a way to define named constants, making the code more self-documenting and easier to maintain.
  • Generics: Supports generic programming to create reusable and type safe components.
  • Namespaces: Organizes code into logical groups to avoid naming collisions in larger projects.
  • Tuples: Allow fixed-length arrays with specified types for each element, improving type safety in data structures.

TypeScript Examples

1. Type Annotations

function greet(name: string): string {
    return `Hello, ${name}!`;
}

const userName: string = "Geeta";
console.log(greet(userName)); // Output: Hello, Geeta!

2. Type Inference

let isDone = false; // TypeScript infers `isDone` as boolean
let count = 42;     // TypeScript infers `count` as number

console.log(count, isDone);

3. Interfaces

interface User {
    id: number;
    name: string;
    email: string;
}

const newUser: User = {
    id: 1,
    name: "Tannu Kumari",
    email: "tannu.kumari@example.com"
};
console.log(newUser);

4. Enums

enum Role {
    Admin,
    User,
}

function getRole(role: Role): string {
    switch (role) {
        case Role.Admin:
            return "Administrator";
        case Role.User:
            return "Regular User";
        default:
            return "Unknown Role";
    }
}

console.log(getRole(Role.Admin)); // Output: Administrator

5. Generics

function identity<T>(arg: T): T {
    return arg;
}

console.log(identity<string>("Hello, Generics!")); // Output: Hello, Generics!
console.log(identity<number>(42)); // Output: 42

6. Namespaces

namespace MathOperations {
    export function add(x: number, y: number): number {
        return x + y;
    }
    export function subtract(x: number, y: number): number {
        return x - y;
    }
}

console.log(MathOperations.add(10, 5)); // Output: 15
console.log(MathOperations.subtract(10, 5)); // Output: 5

7. Tuples

let tuple: [string, number, boolean] = ["Alice", 30, true];

console.log(tuple);

8. Union Types

function printId(id: number | string): void {
    console.log(`ID: ${id}`);
}

printId(101);         // Output: ID: 101
printId("A123");      // Output: ID: A123

9. Type Inference

type StringOrNumber = string | number;

function logValue(value: StringOrNumber): void {
    console.log(`Value: ${value}`);
}

logValue(42);          // Output: Value: 42
logValue("Hello!");    // Output: Value: Hello!

10. Classes

class Person {
    name: string;
    age: number;

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

    info(): string {
        return `${this.name} is ${this.age} years old.`;
    }
}

const person = new Person("Ram", 30);

console.log(person.info()); // Output: Ram is 30 years old.