<!DOCTYPE html>

TypeScript: A Comprehensive Guide

 body { font-family: sans-serif; line-height: 1.6; } h1, h2, h3 { color: #333; } code { background-color: #f0f0f0; padding: 2px 5px; border-radius: 3px; } pre { background-color: #f0f0f0; padding: 10px; border-radius: 5px; overflow-x: auto; } img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

TypeScript: A Comprehensive Guide

TypeScript, a superset of JavaScript, has revolutionized the way developers write JavaScript code. By adding optional static typing, TypeScript brings the benefits of type safety, improved code readability, and enhanced development productivity to the JavaScript ecosystem. This guide will provide a comprehensive understanding of TypeScript, its core concepts, benefits, and practical applications.

Introduction to TypeScript

TypeScript was developed by Microsoft and is an open-source language that compiles to plain JavaScript. It provides a way to add static types to JavaScript code, allowing developers to define the data types of variables, function parameters, and return values.

Why Use TypeScript?

Type Safety: TypeScript's type system helps catch errors during development, reducing the risk of runtime errors and making code more reliable.
- Improved Code Readability: Explicitly defining data types makes code easier to understand and maintain.
- Enhanced Developer Productivity: TypeScript's type system and IDE support provide developers with better code completion, refactoring tools, and error detection.
- Large-Scale Project Management: TypeScript's strong typing and modularity features make it ideal for managing complex and large-scale projects.
 Core Concepts of TypeScript
- Types TypeScript supports various primitive and complex types, including:
- Numbers: number (e.g., 10, 3.14)
- Strings: string (e.g., "Hello", "World")
- Booleans: boolean (e.g., true, false)
- Arrays: Array <t> (e.g., let numbers: number[] = [1, 2, 3])
- Objects: object (e.g., { name: "John", age: 30 })
- Tuples: [type1, type2, ...] (e.g., let user: [string, number] = ["Alice", 25])
- Enums: enum (e.g., enum Status { Pending, Approved, Rejected })
- Void: void (for functions that don't return anything)
- Null and Undefined: null and undefined
- Interfaces Interfaces define the structure of an object, specifying the properties and their types.

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

let user: User = {
  name: "Jane",
  age: 28
};

3. Classes

Classes are blueprints for creating objects. They can have properties, methods, and constructors.

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak(): string {
    return "Generic animal sound";
  }
}

let dog = new Animal("Buddy");
console.log(dog.speak()); // Output: "Generic animal sound"

4. Generics

Generics allow creating reusable components that can work with different data types.

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

let number = identity
    <number>
     (10);
let string = identity
     <string>
      ("Hello");

  <h3>
   5. Modules
  </h3>
  Modules provide a way to organize and encapsulate code. TypeScript uses the `export` and `import` keywords for module management.

// module1.ts
export function add(a: number, b: number): number {
  return a + b;
}

// module2.ts
import { add } from "./module1";

console.log(add(5, 3)); // Output: 8

  <h2>
   Setting up TypeScript
  </h2>
  To use TypeScript, you need to install the TypeScript compiler:

npm install -g typescript

  <h3>
   Creating a TypeScript Project
  </h3>
  1. **Initialize a project:** Create a new directory for your project and run `npm init -y` to create a `package.json` file.

Install TypeScript: Run npm install typescript --save-dev.
Create a tsconfig.json file: This file configures the TypeScript compiler. You can create a basic tsconfig.json file with the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true
  }
}

Write TypeScript code: Create a .ts file and start writing your TypeScript code.
Compile your code: Run tsc in the terminal to compile your TypeScript code into JavaScript.
TypeScript in Action: Practical Examples
1. Building a Simple Todo App
This example demonstrates how to use TypeScript to build a simple todo app with a user interface.

// todo.ts
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

let todos: Todo[] = [];
let nextId = 1;

function addTodo(title: string): void {
  todos.push({ id: nextId++, title, completed: false });
  renderTodos();
}

function toggleTodo(id: number): void {
  const todo = todos.find(todo =&gt; todo.id === id);
  if (todo) {
    todo.completed = !todo.completed;
    renderTodos();
  }
}

function renderTodos(): void {
  const todoList = document.getElementById("todo-list");
  if (todoList) {
    todoList.innerHTML = '';
    todos.forEach(todo =&gt; {
      const li = document.createElement("li");
      li.innerHTML = `
      <input ${todo.completed="" ''}="" 'checked'="" :="" ?="" onclick="toggleTodo(${todo.id})" type="checkbox"/>
      <span>
       ${todo.title}
      </span>
      `;
      todoList.appendChild(li);
    });
  }
}

const addTodoButton = document.getElementById("add-todo");
if (addTodoButton) {
  addTodoButton.addEventListener("click", () =&gt; {
    const titleInput = document.getElementById("todo-title") as HTMLInputElement;
    if (titleInput) {
      const title = titleInput.value;
      addTodo(title);
      titleInput.value = '';
    }
  });
}

renderTodos();

      <!DOCTYPE html>
      <html lang="en">
       <head>
        <meta charset="utf-8"/>
        <title>
         Todo App
        </title>
       </head>
       <body>
        <h1>
         Todo List
        </h1>
        <input id="todo-title" placeholder="Enter todo" type="text"/>
        <button id="add-todo">
         Add Todo
        </button>
        <ul id="todo-list">
        </ul>
        <script src="todo.js">
        </script>
       </body>
      </html>
      ```


      <h3>
       2. Creating a Class for a Bank Account
      </h3>
      This example shows how to use TypeScript classes to model a bank account with properties and methods.



```typescript
class BankAccount {
  private balance: number;
  constructor(initialBalance: number) {
    this.balance = initialBalance;
  }

  deposit(amount: number): void {
    this.balance += amount;
  }

  withdraw(amount: number): void {
    if (this.balance &gt;= amount) {
      this.balance -= amount;
    } else {
      console.error("Insufficient funds");
    }
  }

  getBalance(): number {
    return this.balance;
  }
}

let myAccount = new BankAccount(1000);
myAccount.deposit(500);
myAccount.withdraw(200);
console.log(myAccount.getBalance()); // Output: 1300

  <h2>
   Benefits of Using TypeScript
  </h2>
  * **Improved Code Quality:** TypeScript's type system helps catch errors early in the development process, resulting in fewer bugs and more reliable code.

Enhanced Maintainability: Type annotations make it easier for developers to understand and modify code, reducing the likelihood of introducing new errors.
Improved Collaboration: TypeScript's type system makes it easier for teams to collaborate on projects, as they have a shared understanding of the code's structure and data types.
Enhanced Development Productivity: TypeScript's type checking, code completion, and refactoring tools help developers write code faster and with fewer errors.
Stronger Foundation for Large-Scale Projects: TypeScript's features, such as modules, interfaces, and classes, make it suitable for managing complex and large-scale projects.
Conclusion
TypeScript has become an essential tool for modern JavaScript development. Its static typing, improved code readability, and robust tooling provide significant benefits for developers working on projects of any size. By understanding the core concepts of TypeScript and its practical applications, you can leverage its power to write more reliable, maintainable, and efficient JavaScript code.

What is Typescript ?

TypeScript: A Comprehensive Guide

Introduction to TypeScript

Why Use TypeScript?

Core Concepts of TypeScript

3. Classes

4. Generics

TypeScript in Action: Practical Examples

Building a Simple Todo App

Conclusion