Okay, here’s a comprehensive article on “Learn TypeScript: Main Uses and Practical Examples,” aiming for approximately 5000 words. I’ve structured it to be readable, informative, and practical, covering a wide range of use cases and providing code examples where appropriate.

Learn TypeScript: Main Uses and Practical Examples

Introduction: Embracing Type Safety in the JavaScript World

JavaScript, the ubiquitous language of the web, has long been lauded for its flexibility and ease of use. However, this very flexibility can become a double-edged sword, particularly in large, complex projects. The dynamic typing of JavaScript, while making it quick to learn and prototype with, often leads to runtime errors that could have been caught much earlier in the development process. This is where TypeScript comes in.

TypeScript is a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. The key addition TypeScript brings to the table is static typing. By adding type annotations, TypeScript allows you to define the expected types of variables, function parameters, and return values. This seemingly small change has a profound impact on code quality, maintainability, and the overall development experience.

This article delves into the core concepts of TypeScript, explores its main uses, and provides practical examples to illustrate how it can be applied in real-world scenarios. We’ll cover everything from basic type annotations to advanced concepts like generics and conditional types, showcasing how TypeScript transforms JavaScript development from a potentially error-prone process into a more robust and predictable one.

1. Why Learn TypeScript? The Benefits Unveiled

Before diving into the technical details, let’s examine the compelling reasons to adopt TypeScript:

• Early Error Detection: This is arguably the biggest advantage. TypeScript’s type checker identifies type-related errors during development (at compile time) rather than at runtime. This means you catch bugs before your code is deployed, saving you time, effort, and potential embarrassment. Imagine trying to access a property that doesn’t exist on an object – JavaScript would silently return undefined at runtime, potentially leading to unexpected behavior. TypeScript would flag this as an error immediately.

• Improved Code Maintainability: As projects grow, understanding and modifying existing code becomes increasingly challenging. TypeScript’s type annotations act as built-in documentation, clearly defining the expected structure of your data and the behavior of your functions. This makes it easier for developers (including your future self!) to understand, refactor, and extend the codebase without introducing unintended side effects.

• Enhanced Code Readability: Type annotations provide immediate context. When you see a function signature like function greet(name: string): string, you instantly know that the function expects a string argument and returns a string. This clarity reduces cognitive load and makes it easier to grasp the purpose and functionality of code.

• Better Code Completion and Refactoring: TypeScript’s type system enables powerful IDE (Integrated Development Environment) features. IDEs like VS Code, WebStorm, and others can provide intelligent code completion suggestions, automatically suggesting properties and methods based on the type of a variable. Refactoring becomes significantly safer and easier, as the IDE can automatically update type annotations and identify potential issues caused by your changes.

• Large-Scale Application Development: TypeScript truly shines in large projects with multiple developers. The strong typing and improved tooling help manage complexity, enforce consistency, and reduce the likelihood of introducing bugs during collaborative development. It’s a key enabler for building robust and scalable applications.

• Gradual Adoption: You don’t need to rewrite your entire JavaScript codebase to start using TypeScript. TypeScript is designed for gradual adoption. You can start by adding type annotations to a few files or even just a few functions and gradually expand its usage as you become more comfortable. This allows for a smooth transition without disrupting existing workflows.

• Strong Community and Ecosystem: TypeScript has a large and active community, which translates to excellent documentation, numerous online resources, and a wealth of third-party libraries and tools. Major frameworks like Angular, React, and Vue have first-class TypeScript support, making it a natural choice for modern web development.

• Future-Proofing Your Code: JavaScript is constantly evolving, and TypeScript helps you stay ahead of the curve. It often incorporates new JavaScript features (like optional chaining and nullish coalescing) before they are widely supported in browsers, allowing you to use them with the added benefit of type safety.

2. Core TypeScript Concepts: Building Blocks of Type Safety

Let’s explore the fundamental concepts that underpin TypeScript’s type system.

• Basic Types: TypeScript provides a set of built-in types that mirror JavaScript’s primitive types:

  • string: Represents textual data (e.g., "hello", "TypeScript").
  • number: Represents numeric values (e.g., 10, 3.14, -5).
  • boolean: Represents truth values (true or false).
  • null: Represents the intentional absence of a value.
  • undefined: Represents a variable that has been declared but not assigned a value.
  • symbol: Represents a unique and immutable value (often used as object property keys).
  • bigint: Represents whole numbers larger than 2⁵³ – 1.

  typescript
let message: string = "Hello, TypeScript!";
let age: number = 30;
let isLoggedIn: boolean = true;
let emptyValue: null = null;
let unassigned: undefined;
let uniqueID: symbol = Symbol("id");
let largeNumber: bigint = 9007199254740991n;

• Arrays: Arrays are ordered collections of values. TypeScript allows you to specify the type of elements within an array.

  “`typescript
  let numbers: number[] = [1, 2, 3, 4, 5]; // Array of numbers
  let names: string[] = [“Alice”, “Bob”, “Charlie”]; // Array of strings
  let mixedArray: (number | string)[] = [1, “two”, 3]; // Array of numbers or strings

  // Alternative syntax using Array
  let anotherNumbers: Array = [6,7,8];
  “`

• Tuples: Tuples are fixed-length arrays where each element has a specific, known type.

  “`typescript
  let person: [string, number] = [“John Doe”, 30]; // Tuple: string, number
  // person[0] is a string, person[1] is a number

  // Trying to assign incorrect types will result in an error:
  // person = [30, “John Doe”]; // Error!
  “`

• Enums: Enums (enumerations) allow you to define a set of named constants. They make your code more readable and maintainable by giving meaningful names to numeric values.

  “`typescript
  enum Color {
  Red, // Automatically assigned 0
  Green, // Automatically assigned 1
  Blue, // Automatically assigned 2
  }

  let myColor: Color = Color.Green;
  console.log(myColor); // Output: 1

  enum Direction {
  Up = “UP”,
  Down = “DOWN”,
  Left = “LEFT”,
  Right = “RIGHT”,
  }

  let moveDirection: Direction = Direction.Down;
  “`

• Any: The any type represents a dynamic or unknown type. It essentially disables type checking for a particular variable. While any can be useful in certain situations (e.g., when working with third-party libraries without type definitions), it should be used sparingly, as it undermines the benefits of TypeScript’s type safety.

  typescript
let unknownValue: any = "This could be anything";
unknownValue = 10;
unknownValue = true; // No errors, as type checking is disabled

• Void: The void type represents the absence of a return value from a function. It’s commonly used for functions that perform side effects but don’t return any meaningful data.

  typescript
function logMessage(message: string): void {
console.log(message);
// No return statement
}

• Never: The never type represents the type of values that never occur. It’s used for functions that:

  • Always throw an error.
  • Have an infinite loop.
  • Can never return by design.

  “`typescript
  function throwError(message: string): never {
  throw new Error(message);
  }

  function infiniteLoop(): never {
  while (true) {}
  }

  // Function returning never must not have a reachable end point
  function error(message: string): never {
  throw new Error(message);
  };
  “`

• Unknown: Introduced in TypeScript 3.0, unknown is a type-safe counterpart to any. Like any, an unknown variable can hold a value of any type. However, unlike any, you must perform some type checking or type assertion before you can use an unknown value. This makes unknown much safer.

  “`typescript
  let mysteryValue: unknown = “Could be anything”;

  // You can’t directly use mysteryValue as a string:
  // console.log(mysteryValue.toUpperCase()); // Error!

  // You need to perform type checking first:
  if (typeof mysteryValue === “string”) {
  console.log(mysteryValue.toUpperCase()); // OK, we’ve confirmed it’s a string
  }

  // Or use type assertion (if you’re absolutely sure of the type):
  console.log((mysteryValue as string).toUpperCase()); // OK, but be careful with assertions
  “`

• Object: The object type in TypeScript refers to any non-primitive type. It’s a very broad type and doesn’t provide much specific information about the structure of the object. It’s generally better to use interfaces or type aliases (described below) to define the shape of objects more precisely.

  typescript
let myObject: object;
myObject = { name: "Alice" };
myObject = [1, 2, 3]; // Also valid, since arrays are objects in JavaScript
myObject = new Date();
  * Type Assertions: Type assertions are a way to tell the TypeScript compiler that you know more about the type of a value than it does. They are similar to type casts in other languages, but they don’t perform any runtime checks. Type assertions have two forms:

  “`typescript
  let someValue: any = “this is a string”;

  // Angle-bracket syntax:
  let strLength1: number = (someValue).length;

  // “as” syntax (preferred):
  let strLength2: number = (someValue as string).length;
  “`
  Important: Type assertions are a powerful but potentially dangerous tool. If you use a type assertion incorrectly, you can introduce runtime errors that TypeScript won’t catch. Use them with caution and only when you are absolutely certain of the underlying type.

3. Defining Object Shapes: Interfaces and Type Aliases

While the object type is useful for representing any non-primitive value, it doesn’t provide any information about the object’s properties or methods. To define the shape of an object, TypeScript provides two primary mechanisms: interfaces and type aliases.

• Interfaces: Interfaces are a powerful way to define contracts for objects. They specify the names and types of properties that an object must have.

  “`typescript
  interface Person {
  firstName: string;
  lastName: string;
  age: number;
  greet: () => string; // Method signature
  }

  let user1: Person = {
  firstName: “John”,
  lastName: “Doe”,
  age: 30,
  greet: () => {
  return Hello, my name is ${user1.firstName} ${user1.lastName};
  },
  };

  // Missing properties or incorrect types will result in errors:
  // let user2: Person = { firstName: “Jane” }; // Error: Missing lastName and age

  //Optional Properties
  interface Car {
  make: string;
  model: string;
  year: number;
  color?: string; // Optional property
  }

  let myCar: Car = {
  make: “Toyota”,
  model: “Camry”,
  year: 2023,
  }; // OK, color is optional

  //Readonly Properties

  interface Point {
  readonly x: number;
  readonly y: number;
  }

  let p1: Point = { x: 10, y: 20 };
  // p1.x = 5; // Error: Cannot assign to ‘x’ because it is a read-only property.

  “`

• Type Aliases: Type aliases are similar to interfaces, but they can be used to create names for any type, not just object types. They’re especially helpful for creating more descriptive names for complex types.

  “`typescript
  type Point2D = {
  x: number;
  y: number;
  };

  type StringOrNumber = string | number; // Union type

  let coordinate: Point2D = { x: 5, y: 10 };
  let value: StringOrNumber = “hello”;
  value = 42;

  type GreetFunction = (name: string) => string; // Function type

  const myGreeting: GreetFunction = (name) => {
  return Greetings, ${name}!;
  };
  “`

• Interface vs. Type Alias: Choosing the Right Tool

Both interfaces and type aliases can define object shapes, leading to a common question: when should you use one over the other? Here’s a breakdown of the key differences and guidelines:

*   **Declaration Merging (Interfaces Only):** Interfaces support *declaration merging*.  This means you can declare the same interface multiple times, and TypeScript will merge the declarations into a single interface. This is *not* possible with type aliases.

    ```typescript
    interface User {
        name: string;
    }

    interface User {
        age: number;
    }

    // The effective User interface is now:
    // interface User {
    //     name: string;
    //     age: number;
    // }

    let user:User = {name: "John", age: 23};
    ```

*   **Extending (Both):** Both interfaces and type aliases can be extended.
    *   Interfaces use the `extends` keyword.
    *   Type aliases use the intersection operator (`&`).

    ```typescript
    // Interface extension
    interface Animal {
        name: string;
    }

    interface Dog extends Animal {
        breed: string;
    }

    let myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };

    // Type alias extension (intersection)
    type Animal2 = {
        name: string;
    };

    type Dog2 = Animal2 & {
        breed: string;
    };
    let myDog2: Dog2 = { name: "Buddy", breed: "Golden Retriever" };
    ```

*   **Representing Non-Object Types (Type Aliases Only):** Type aliases can represent *any* type, including primitives, unions, intersections, and tuples.  Interfaces are primarily for defining object shapes.

*   **Recommendations:**

    *   **For defining the shape of objects, interfaces are generally preferred** due to declaration merging and a more object-oriented feel.  This is especially true for public APIs of libraries or modules.

    *   **Use type aliases for:**
        *   Creating aliases for primitive types, unions, intersections, or tuples.
        *   Creating function type aliases.
        *   When you need to represent a type that is not an object.
        * Defining complex types.

4. Functions in TypeScript: Typing Parameters and Return Values

TypeScript significantly enhances function declarations by allowing you to specify the types of parameters and the return value. This makes functions more predictable and helps prevent errors caused by passing incorrect arguments or expecting the wrong type of return value.

“`typescript
function add(x: number, y: number): number {
return x + y;
}

let sum: number = add(5, 10); // OK
// let sum2: number = add(“5”, 10); // Error: Argument of type ‘string’ is not assignable to parameter of type ‘number’.

// Optional Parameters
function buildName(firstName: string, lastName?: string): string {
if (lastName) {
return firstName + ” ” + lastName;
} else {
return firstName;
}
}

let result1 = buildName(“Bob”); // OK
let result2 = buildName(“Bob”, “Adams”); // OK
// let result3 = buildName(“Bob”, “Adams”, “Sr.”); // Error: Expected 1-2 arguments, but got 3.

// Default Parameters
function greet(name: string, greeting: string = “Hello”): string {
return ${greeting}, ${name}!;
}

console.log(greet(“Alice”)); // Output: Hello, Alice!
console.log(greet(“Bob”, “Good morning”)); // Output: Good morning, Bob!

// Rest Parameters
function buildNames(firstName: string, …restOfName: string[]): string {
return firstName + ” ” + restOfName.join(” “);
}

let employeeName = buildNames(“Joseph”, “Samuel”, “Lucas”, “MacKinzie”);

// Function Overloads (Advanced)
// Function overloads allow you to define multiple function signatures for the same function name,
// each with different parameter types or a different number of parameters.
function getLength(arg: string): number;
function getLength(arg: any[]): number;
function getLength(arg: string | any[]): number {
return arg.length;
}

console.log(getLength(“hello”)); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
//console.log(getLength(123)); // Error! No matching overload

//Arrow functions
const multiply = (a: number, b: number): number => a*b;

“`

5. Generics: Writing Reusable and Type-Safe Code

Generics are a powerful feature of TypeScript that allow you to write functions and classes that can work with a variety of types without sacrificing type safety. They enable you to create reusable components that can be adapted to different data types while still ensuring that the types are consistent throughout. Think of them as placeholders for types.

“`typescript
// A simple generic function
function identity(arg: T): T {
return arg;
}

// Using the generic function
let myString: string = identity(“hello”); // Explicitly specify the type
let myNumber: number = identity(42); // Type inference: TypeScript infers the type as number

// Generic Interface

interface KeyValuePair {
key: K;
value: V;
}

let pair1: KeyValuePair = { key: “age”, value: 30 };
let pair2: KeyValuePair = { key: 1, value: true };

// Generic Class
class DataHolder {
data: T;

constructor(data: T) {
    this.data = data;
}

getData(): T {
    return this.data;
}

}

let stringHolder = new DataHolder(“Hello”);
console.log(stringHolder.getData()); // Output: Hello

let numberHolder = new DataHolder(123);
console.log(numberHolder.getData()); // Output: 123

// Generic Constraints

function loggingIdentity(arg: T): T {
console.log(arg.length); // Now we know it has a .length property
return arg;
}

// loggingIdentity(3); // Error, number doesn’t have a .length property
loggingIdentity(“hello”);
loggingIdentity([1,2,3]);

“`

Explanation of Generics Examples:

• identity<T>(arg: T): T:

  • <T>: This declares a type parameter T. T is a common convention, but you can use any valid identifier (e.g., <Type>, <Item>). This is the “placeholder” for the type.
  • arg: T: The function takes an argument arg of type T.
  • : T: The function returns a value of type T.
  • The function simply returns its argument. The key is that the type of the argument and the return value are the same, whatever T happens to be.

• KeyValuePair<K, V>: This interface defines a key-value pair, where the key has type K and the value has type V. You can create instances of this interface with different key and value types.

• DataHolder<T>: This class holds a piece of data of type T. The constructor and getData method both use T to ensure type consistency.

• loggingIdentity<T extends { length: number }>(arg: T): T: This example introduces generic constraints. T extends { length: number } means that the type T must have a length property of type number. This allows you to safely access arg.length within the function, because TypeScript knows that any type passed as T will have that property. This is crucial for writing generic code that still operates on specific properties or methods.

6. Union and Intersection Types: Combining and Refining Types

• Union Types: Union types allow a variable to hold values of multiple different types. You use the pipe symbol (|) to separate the types.

  “`typescript
  type StringOrNumber = string | number;

  let value: StringOrNumber;
  value = “hello”; // OK
  value = 42; // OK
  // value = true; // Error: Type ‘boolean’ is not assignable to type ‘StringOrNumber’.
  “`
  When working with union types, you often need to use type guards to narrow down the type before accessing type-specific properties or methods. Type guards are expressions that check the type of a variable within a conditional block.

  “`typescript
  function processValue(input: string | number) {
  if (typeof input === “string”) {
  // Inside this block, TypeScript knows ‘input’ is a string
  console.log(input.toUpperCase());
  } else {
  // Inside this block, TypeScript knows ‘input’ is a number
  console.log(input.toFixed(2));
  }
  }

  processValue("hello");
  processValue(3.14159);
  

  “`

• Intersection Types: Intersection types combine multiple types into a single type that has all the properties of the constituent types. You use the ampersand symbol (&) to create an intersection type.

  “`typescript
  interface Nameable {
  name: string;
  }

  interface Ageable {
  age: number;
  }

  type Person = Nameable & Ageable;

  let person: Person = {
  name: “John Doe”,
  age: 30,
  };

  // Missing either ‘name’ or ‘age’ would result in an error.
  “`

7. Advanced Type Manipulation: Utility Types and Conditional Types

TypeScript provides a set of built-in utility types that make it easier to perform common type transformations. These types are generic and operate on other types. Here are some of the most commonly used utility types:

• Partial<T>: Makes all properties of type T optional.

  “`typescript
  interface User {
  id: number;
  name: string;
  email: string;
  }

  type PartialUser = Partial;

  // PartialUser is equivalent to:
  // type PartialUser = {
  // id?: number;
  // name?: string;
  // email?: string;
  // };
  let partialUser: PartialUser = { name: “Alice” }; // OK, other properties are optional

  “`

• Required<T>: Makes all properties of type T required (the opposite of Partial).

  “`typescript
  interface OptionalProps {
  a?: number;
  b?: string;
  }

  type RequiredProps = Required;

  // Equivalent to:
  // type RequiredProps = {
  // a: number;
  // b: string;
  // }

  //let required: RequiredProps = {a: 12}; // Error
  let required: RequiredProps = {a: 12, b: “”};
  “`

• Readonly<T>: Makes all properties of type T read-only.

  “`typescript
  interface MutablePoint {
  x: number;
  y: number;
  }
  type ReadonlyPoint = Readonly;

  // Equivalent to:
  // type ReadonlyPoint = {
  // readonly x: number;
  // readonly y: number;
  // }

  let mutablePoint: MutablePoint = {x: 1, y: 2};
  mutablePoint.x = 5; //OK

  let readonlyPoint: ReadonlyPoint = {x: 1, y: 2};
  // readonlyPoint.x = 5; // Error: Cannot assign to ‘x’ because it is a read-only property.
  “`

• Pick<T, K>: Creates a new type by picking a subset of properties (K) from an existing type (T).

  “`typescript
  interface User {
  id: number;
  name: string;
  email: string;
  }

  type UserBasicInfo = Pick;

  // Equivalent to:
  // type UserBasicInfo = {
  // id: number;
  // name: string;
  // }
  let basic: UserBasicInfo = {id: 1, name: “test”};
  “`

• Omit<T, K>: Creates a new type by omitting a set of properties (K) from an existing type (T).

  “`typescript
  interface User {
  id: number;
  name: string;
  email: string;
  }

  type UserWithoutEmail = Omit;

  // Equivalent to:
  // type UserWithoutEmail = {
  // id: number;
  // name: string;
  // }
  let userWEmail: UserWithoutEmail = {id: 12, name: “test”};
  “`

• Record<K, T>: Creates a type with a set of properties K of type T. It’s useful for defining objects where the keys are known and the values all have the same type.

  “`typescript
  type PageInfo = Record;

  const pages: PageInfo = {
  home: “Home Page”,
  about: “About Us”,
  contact: “Contact Us”,
  };

  //Or with keys from an enum:
  enum Pages {
  Home,
  About,
  Contact
  }
  type PageInfo2 = Record;

  const pages2 : PageInfo2 = {
  [Pages.Home]: “home”,
  [Pages.About]: “about”,
  [Pages.Contact]: “contact”
  }
  “`

• Exclude<T, U>: Constructs a type by excluding from T all properties that are assignable to U.

  typescript
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number

• Extract<T, U>: Constructs a type by extracting from T all properties that are assignable to U.

  typescript
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () => void

• NonNullable<T>: Constructs a type by excluding null and undefined from T.

  typescript
type T0 = NonNullable<string | number | undefined>; // string | number
type T1 = NonNullable<string[] | null | undefined>; // string[]
  * Parameters<T>: Constructs a tuple type from the types used in the parameters of a function type T.

  “`typescript
  declare function f1(arg: { a: number; b: string }): void;

  type T0 = Parameters<() => string>; // []
  type T1 = Parameters<(s: string) => void>; // [string]
  type T2 = Parameters<(arg: T) => T>; // [unknown]
  type T3 = Parameters; // [{ a: number, b: string }]
  type T4 = Parameters; // unknown[]
  type T5 = Parameters; // never
  // type T6 = Parameters; // Error
  // type T7 = Parameters; // Error
  “`

• ReturnType<T>: Constructs a type consisting of the return type of function T.

  “`typescript
  declare function f1(): { a: number; b: string };

  type T0 = ReturnType<() => string>;  // string
  type T1 = ReturnType<(s: string) => void>;  // void
  type T2 = ReturnType<<T>() => T>;  // {}
  type T3 = ReturnType<<T extends U, U extends number[]>() => T>;  // number[]
  type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
  type T5 = ReturnType<any>;  // any
  type T6 = ReturnType<never>;  // any
  //type T7 = ReturnType<string>;  // Error
  // type T8 = ReturnType<Function>;  // Error
  

  “`

• Conditional Types (Advanced): Conditional types allow you to define types that depend on a condition. They use the ternary operator (? :) syntax, similar to JavaScript’s conditional expressions. They are often used in conjunction with generics.

  “`typescript
  type IsString = T extends string ? true : false;

  type A = IsString; // true
  type B = IsString; // false

  // Example with generics:
  type ElementType = T extends (infer U)[] ? U : T;

  type StringArray = string[];
  type StringType = ElementType; // string

  type NumberType = ElementType; // number

  //Explanation of ElementType:
  // T extends (infer U)[] ? U : T;
  // – T extends (infer U)[]: This checks if T is an array type. If it is, it uses the infer keyword to “infer” the element type of the array and assign it to the type variable U.
  // – ? U: If T is an array, the type becomes U (the element type).
  // – : T: If T is not an array, the type remains T.
  “`

  Conditional types are extremely powerful for creating sophisticated type transformations and are frequently used in advanced TypeScript libraries.
  8. Main Uses and Practical Examples

Now, let’s move on to the practical application of TypeScript. We’ll cover various use cases and provide code examples to demonstrate how TypeScript can be integrated into different types of projects.

• Web Development (Front-End):

  • React: TypeScript is extremely popular with React. It provides type safety for component props, state, and context, making it easier to build and maintain large React applications.

    “`typescript
    // Example: A simple React component with TypeScript

    import React, { useState } from ‘react’;

    interface Props {
    name: string;
    age?: number; // Optional prop
    }

    const Greeting: React.FC = ({ name, age }) => {
    const [count, setCount] = useState(0); // Type the state

    return (

    Hello, {name}!

    {age &&

    You are {age} years old.

    }

    Count: {count}

    setCount(count + 1)}>Increment

    );
    };

    export default Greeting;

    // Using the component:
    // // OK
    // // Error: Type ‘number’ is not assignable to type ‘string’.
    “`

  • Angular: Angular is built with TypeScript and heavily relies on its type system. TypeScript is essentially a first-class citizen in Angular development.

  • Vue.js: Vue 3 has excellent TypeScript support. You can use TypeScript with the Composition API and Options API.

    “`typescript
    // Example: Vue 3 Composition API with TypeScript

    import { defineComponent, ref, computed } from ‘vue’;

    export default defineComponent({
    setup() {
    const count = ref(0); // Type the ref

      const doubleCount = computed<number>(() => count.value * 2);
    
      const increment = () => {
        count.value++;
      };
    
      return {
        count,
        doubleCount,
        increment,
      };
    },
    

    });
    * **Node.js (Back-End):** TypeScript can be used to build robust and scalable back-end applications with Node.js. It brings type safety to server-side code, helping to prevent errors in API endpoints, database interactions, and other server logic.typescript
    // Example: A simple Express.js server with TypeScript

    import express, { Request, Response } from ‘express’;

    const app = express();
    const port = 3000;

    // Define the shape of a user object
    interface User {
    id: number;
    name: string;
    email: string;
    }

    // Sample user data
    const users: User[] = [
    { id: 1, name: “John Doe”, email: “[email protected]” },
    { id: 2, name: “Jane Doe”, email: “[email protected]” },
    ];

    // GET /users – Get all users
    app.get(‘/users’, (req: Request, res: Response) => {
    res.json(users);
    });

    // GET /users/:id – Get a user by ID
    app.get(‘/users/:id’, (req: Request<{ id: string }>, res: Response) => {
    const userId = parseInt(req.params.id, 10);
    const user = users.find