TypeScript

1. Type Definitions for External Libraries: TypeScript provides type definitions (.d.ts) for JavaScript libraries to enable type checking and auto-completion in your code. You can install these types using npm or yarn.

# Install type definitions for a library
npm install --save @types/library-name

2. TypeScript Compiler (tsc): Use the TypeScript compiler (tsc) to transpile TypeScript code into JavaScript. First, install TypeScript globally or locally in your project:

npm install -g typescript   # Global installation
# OR
npm install typescript --save-dev   # Local installation

Create a TypeScript file (e.g., app.ts) and compile it:

// app.ts
const message: string = "Hello, TypeScript!";
console.log(message);

Compile it using tsc:

tsc app.ts

This generates an app.js file that can be run in a Node.js environment or included in your web application.

3. tsconfig.json: The tsconfig.json file configures your TypeScript project. Here's a simple example:

{
  "compilerOptions": {
    "target": "ES6",
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

This configuration specifies the target JavaScript version, output directory for compiled code, and source code directory. You can customize it further to suit your project.

4. TypeScript Tooling: TypeScript-aware editors like Visual Studio Code provide excellent TypeScript support out of the box. You'll get features like autocompletion, type checking, and quick error feedback.

5. Declaration Files: When you have a JavaScript library without type definitions, you can create a declaration file (.d.ts) to provide type information. For example, if you have a my-library.js:

// my-library.js
function add(a, b) {
  return a + b;
}

Create a corresponding my-library.d.ts declaration file:

// my-library.d.ts
declare function add(a: number, b: number): number;

TypeScript will now recognize the types for the functions in my-library.js.

6. Advanced Types: Explore advanced TypeScript types like mapped types, conditional types, and template literal types based on your project needs.

Async/await

Using async and await

async function fetchData() {
  try {
    const response = await fetch('<https://api.example.com/data>');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

• fetchData is an asynchronous function.

• We use await with fetch to wait for the network request to complete and get the response.

• Then, we use await with response.json() to wait for the parsing of JSON data.

• If there's an error, we catch it and handle it gracefully.

Error Handling

Use Cases

1. Fetching Data from APIs: Async/await is commonly used for making HTTP requests to APIs and handling the responses.

2. Reading/Writing Files: When working with Node.js, you can use async/await for reading and writing files asynchronously.

3. Database Operations: Async/await is useful for interacting with databases, where operations can be asynchronous.

4. Promisified Functions: You can use async/await to simplify the use of functions that return Promises, making your code more readable.

5. Sequential Execution: Async/await allows you to write asynchronous code in a sequential, easy-to-read manner.

6. Concurrent Execution: You can also use async/await in combination with Promise.all for concurrent execution of multiple asynchronous tasks.

Browser Support

Decorators

Basic Decorator Example:

function logClass(target: any) {
  console.log(`Class ${target.name} is being constructed.`);
}

@logClass
class MyClass {
  constructor() {
    console.log('MyClass constructor');
  }
}

// Output:
// Class MyClass is being constructed.
// MyClass constructor

Decorator Factories:

function logMethod(prefix: string) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
      console.log(`${prefix} - Before method call`);
      const result = originalMethod.apply(this, args);
      console.log(`${prefix} - After method call`);
      return result;
    };
  };
}

class Example {
  @logMethod('Example')
  myMethod() {
    console.log('Inside myMethod');
  }
}

const instance = new Example();
instance.myMethod();

// Output:
// Example - Before method call
// Inside myMethod
// Example - After method call

Use Cases for Decorators:

1. Logging and Debugging: Decorators can log method calls, measure execution times, and help with debugging.

2. Authentication and Authorization: You can use decorators to restrict access to certain methods or routes based on user roles or authentication status.

3. Validation: Decorators can validate method arguments or object properties.

4. Memoization: Decorators can cache the results of function calls to improve performance.

5. Dependency Injection: Frameworks like Angular use decorators for dependency injection and service registration.

6. Route Handling (in Express.js): You can use decorators to define routes and middleware functions in Express.js controllers.

7. Data Validation (in Mongoose): In Mongoose (a MongoDB library for Node.js), decorators can validate and define data schema for models.

8. Redux Middleware: In Redux, decorators can be used to create custom middleware for actions.

9. State Management (in MobX): MobX uses decorators to define observable properties and actions that update the state.

10. Aspect-Oriented Programming: Decorators enable aspect-oriented programming by separating concerns like logging, caching, and authentication from the core business logic.