# Working with TypeScript

## 3.1 How to work with native classes and types related to the Window object in the browser?

### IntersectionObserver

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in view!');
    }
  });
});
observer.observe(document.querySelector('#someElement'));
//Error: Argument of type 'Element | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.

//solution:
const observer: IntersectionObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
  entries.forEach((entry: IntersectionObserverEntry) => {
    if (entry.isIntersecting) {
      console.log('Element is in view!');
    }
  });
});
observer.observe(document.querySelector('#someElement')!);

### Local Storage

const userSettings = localStorage.getItem('userSettings'); 
console.log(JSON.parse(userSettings)); 
//error: Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'


//solution
const userSettings = localStorage.getItem('userSettings');
if (userSettings !== null) {
  console.log(JSON.parse(userSettings)); // Safely parsing, knowing it's not null
} else {
  console.log("No user settings found.");
}

### Posibly return null value when select element

const myCanvas = document.querySelector('#myCanvas');
console.log(myCanvas.getContext('2d')); //Error: 'myCanvas' is possibly 'null' 
//=> can't call the function getContext()

//solution:
const myCanvas = document.querySelector('#myCanvas') as HTMLCanvasElement;
console.log(myCanvas.getContext('2d')); // TypeScript knows myCanvas is a canvas

### DOM manipulation
#### Traversing the DOM

<div>
    <ul id="main">
        <li>hello</li>
        <li>world</li>
    </ul>    
</div>

// Selecting an element
const myList = document.getElementById('main') as HTMLUListElement;

// Accessing children
const listItems = myList.children; // HTMLCollection
console.log("listItems", listItems)

// Accessing the first child
const firstItem = myList.firstElementChild as HTMLLIElement;
console.log("firstItem", firstItem)


// Navigating to siblings
const secondItem = firstItem.nextElementSibling as HTMLLIElement;
console.log("secondItem", secondItem)

// Accessing the parent node
const listParent = secondItem.parentElement as HTMLElement;
console.log("listParent", listParent)

#### Creating and Appending Elements

// Creating a new list item
const newItem = document.createElement('li') as HTMLLIElement;
newItem.textContent = 'New Item';

// Appending the new item to the list
myList.appendChild(newItem);

Example: create dynamic list

const addItemToList = (itemText: string): void =>{
  const list = document.getElementById('main') as HTMLUListElement;
  const newItem = document.createElement('li') as HTMLLIElement;
  newItem.textContent = itemText;
  list.appendChild(newItem);
}

// Example usage
addItemToList('Learn TypeScript');

## 3.2 How to assign dynamic values to the Window object?
### 3.2.1 Direct Extension Using declare global

// In a TypeScript module (.ts file)
declare global {
  interface Window {
    customMethod: () => void;
  }
}

// Implementing the custom method
window.customMethod = () => console.log("This is a custom method.");

// Using the custom method
window.customMethod();

### 3.2.2 Extending Window with a Custom Interface

// Defining a custom interface that extends the original Window interface
interface CustomWindow extends Window {
  userToken?: string; // Example of a custom property
}

// Casting the global window object to the type of your custom interface
declare let window: CustomWindow;

// Setting a dynamic value
window.userToken = 'abc123';

// Accessing the custom property
console.log(window.userToken); // Outputs: abc123

### More example

// Method 1: Direct Extension Using declare global
// Use Case: Custom Error Logging
// Implementing a global error logging mechanism that can capture and report errors across the entire application.
// 
// Extending the window object for global error logging
declare global {
  interface Window {
    logError: (error: Error, context?: string) => void;
  }
}

// Implementation of the global error logging function
window.logError = (error, context = "General") => {
  console.log(`Error in ${context}:`, error);
  // Here, you'd typically send the error information to a monitoring service
};

// Global error handler
window.onerror = (message, source, lineno, colno, error) => {
  window.logError(error || new Error(message.toString()), "Unhandled Exception");
  return true; // Prevents the default handling of the error
};

// Example of using the logging function directly
try {
  // Some error-prone operation
  throw new Error('Something went wrong');
} catch (error) {
  window.logError(error, "Example Function");
}





//Method 2: Extending Window with a Custom Interface
// Use Case: Global State Management
// In applications that don't use state management libraries or frameworks, it can be useful to attach a global state object to the window for easy access across different parts of the application, especially for small to medium-sized project

// Defining an interface for the global state
interface CustomWindow extends Window {
  appState: {
    userLoggedIn: boolean;
    theme: 'light' | 'dark';
    setTheme: (theme: 'light' | 'dark') => void;
  };
}

// Casting the global window object to the type of the custom interface
declare let window: CustomWindow;

// Initializing the global state
window.appState = {
  userLoggedIn: false,
  theme: 'light',
  setTheme: function(theme: 'light' | 'dark') {
    this.theme = theme;
    // Additional logic to apply the theme across the application
    console.log(`Theme set to ${theme}`);
  },
};

// Example usage
window.appState.setTheme('dark');
console.log(`User logged in: ${window.appState.userLoggedIn}`);

## 3.3 How to go through the DOM objects using TypeScript
### 3.3.1. Type Assertions
Common Elements Requiring Type Assertions
- Input Elements (HTMLInputElement): For accessing value, checked.
- Select Elements (HTMLSelectElement): To work with options, selectedIndex.
- TextArea Elements (HTMLTextAreaElement): To manipulate value.
- Button Elements (HTMLButtonElement): When accessing button-specific attributes.

Recognizing When to Use Type Assertions
- The element has properties or methods not present on the generic HTMLElement.
- You're accessing form fields or media elements with specific properties (like value for inputs or play for audio/video).

//example 1:
const myInput = document.getElementById("myInput");
console.log(myInput.value); // Error: Property 'value' does not exist on type 'HTMLElement | null'.

//solution
const myInput = document.getElementById("myInput") as HTMLInputElement;
console.log(myInput.value); // Correctly accesses 'value'.

//example 2:
const myAudio = document.getElementById("myAudio");
myAudio.play(); // Error: Property 'play' does not exist on type 'HTMLElement | null'.

//solution
const myAudio = document.getElementById("myAudio") as HTMLAudioElement;
myAudio.play(); // Correctly accesses 'play'.

### 3.3.2. Runtime Type Checking
TypeScript can't guarantee the actual type of an element at runtime. Therefore, checking an element's type before performing operations is crucial for avoiding errors.

//example 1: 
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d"); // Error: 'getContext' does not exist on type 'HTMLElement | null'.

//solution
const myCanvas = document.getElementById("myCanvas");
if (myCanvas instanceof HTMLCanvasElement) {
  const ctx = myCanvas.getContext("2d");
  // Safe to use 'getContext'
}

//example 2:
const myVideo = document.getElementById("myVideo");
myVideo.play(); // Error: 'play' does not exist on type 'HTMLElement | null'.


//solution
const myVideo = document.getElementById("myVideo");
if (myVideo instanceof HTMLVideoElement) {
  myVideo.play(); // Safe to use 'play'
}

### 3.3.3. Handling null and undefinedDOM

//example 1: 
const myDiv = document.getElementById("myDiv");
myDiv.textContent = "Hello World"; // Error: Object is possibly 'null'.

//solution
const myDiv = document.getElementById("myDiv");
if (myDiv) {
  myDiv.textContent = "Hello World"; // Safely updates the text.
}

//or
const myDiv = document.getElementById("myDiv");
myDiv?.textContent = "Hello World"; // Safely updates the text if myDiv is not null.



//example 2:
const myButton = document.getElementById("myButton");
myButton.classList.add("active"); // Error: Object is possibly 'null'.
//solution
const myButton = document.getElementById("myButton");
if (myButton) {
  myButton.classList.add("active"); // Safely adds the class.
}

//or
const myButton = document.getElementById("myButton");
myButton?.classList.add("active"); // Safely adds the class if myButton is not null.

### 3.3.4. Generics in Utility Functions
Creating utility functions for DOM manipulation without losing type information can be tricky, leading to type assertion repetition or errors.

//example 1: 
//Utility Function Without Generics:
const getElement = (id: string) => {
  return document.getElementById(id); // Returns 'HTMLElement | null'.
}
getElement("myInput").value; // Error: Property 'value' does not exist.


//solution
const getElement<T extends HTMLElement> = (id: string): T | null => {
  return document.getElementById(id) as T | null;
}
const myInput = getElement<HTMLInputElement>("myInput");
console.log(myInput?.value); // Correct usage with type safety.

//example 2: 
const getElementsByClassName = (className: string) => {
  return document.getElementsByClassName(className); // Returns 'HTMLCollectionOf<Element>'.
}
getElementsByClassName("myClass")[0].value; // Error: Property 'value' does not exist on type 'Element'.


//solution
const getElementsByClassName = <T extends Element>(className: string): HTMLCollectionOf<T> => {
  return document.getElementsByClassName(className) as HTMLCollectionOf<T>;
}
const myInputs = getElementsByClassName<HTMLInputElement>("myInputClass");
console.log(myInputs[0]?.value); // Correct usage with type safety.

## 3.4 How to add event handlers to elements in the DOM using TypeScript
### 3.4.1. Basic Event Listening
1. Directly Adding Event Listeners
Example: Adding a click event to a button.

const button = document.getElementById("myButton") as HTMLButtonElement;
button.addEventListener("click", (event) => {
  console.log("Button clicked!");
});

Type-Safe Event Handler:

button.addEventListener("click", (event: MouseEvent) => {
  console.log(event.clientX, event.clientY); // Access MouseEvent properties with type safety
});

2. Using `this` in Event Handlers
Logging the id of a button when it's clicked.

button.addEventListener("click", function(this: HTMLButtonElement) {
  this.classList.toggle('active');
  console.log(`Button ${this.id} state: ${this.classList.contains('active') ? 'Active' : 'Inactive'}`);
});

2. Dealing with Different Event Types
2.1 Handling Keyboard Events
Example: Adding a keypress event to an input field.

const input = document.getElementById("myInput") as HTMLInputElement;
input.addEventListener("keypress", (event: KeyboardEvent) => {
  console.log(`Key pressed: ${event.key}`);
});

2.2 Managing Form Submit Events
Example: Preventing a form from submitting.

const form = document.getElementById("myForm") as HTMLFormElement;
form.addEventListener("submit", (event: SubmitEvent) => {
  const inputElement = document.getElementById('myInput') as HTMLInputElement;
  if (!inputElement.value.match(/^[a-zA-Z]+$/)) {
    event.preventDefault(); // Prevent form submission
    console.log('Form submission prevented due to validation failure.');
    alert('Please enter only letters.');
  } else {
    console.log('Form submitted successfully.');
  }
});

### 3.4.3. Advanced Event Handling Strategies
**Event Delegation**
Instead of adding an event listener to each element, add a single listener to a parent element and use event delegation.

//Example: Handling clicks on multiple buttons within a container.
const container = document.getElementById("buttonContainer") as HTMLElement;
container.addEventListener("click", (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (target.tagName === "BUTTON") {
    console.log(`Button ${target.id} clicked`);
  }
});

## 3.5 Using fetch method with TypeScript
Generic solution

function api<T>(url: string, options?: RequestInit): Promise<T> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.json() as Promise<{ data: T }>;
    })
    .then(data => data.data)
    .catch((error: Error) => {
      console.error(error); // Log the error or use an external logging service
      throw error; // Rethrow for further handling
    });
}

Example 1: Fetching user information

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

// Fetching user data
api<User>('/api/users/1')
  .then(user => {
    console.log(user.name, user.email);
  })
  .catch(error => {
    console.error("Failed to fetch user data:", error);
  });

Example 2: Posting Data to an API

interface Post {
  userId: number;
  title: string;
  body: string;
}


//1. Function to post data
async function createPost(postData: Post): Promise<Post> {
  return api<Post>('/api/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(postData),
  });
}

// Usage
const newPost: Post = {
  userId: 1,
  title: 'Hello TypeScript',
  body: 'TypeScript with Fetch API is awesome!',
};

createPost(newPost)
  .then(post => console.log("Post created:", post))
  .catch(error => console.error("Failed to create post:", error));


//2. Update post
async function updatePost(postId: number, postData: Post): Promise<Post> {
  return api<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(postData),
  });
}

// Usage
const updatedPost: Post = {
  userId: 1,
  title: 'Updated Title',
  body: 'Updated body content.',
};

updatePost(1, updatedPost)
  .then(post => console.log("Post updated:", post))
  .catch(error => console.error("Failed to update post:", error));


//3. Delete post
async function deletePost(postId: number): Promise<void> {
  return api<void>(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
    method: 'DELETE',
  });
}

// Usage
deletePost(1)
  .then(() => console.log("Post deleted successfully."))
  .catch(error => console.error("Failed to delete post:", error));

## 3.6 Async await and Promises with TypeScript

Promise

//create a promise
const myPromise: Promise<string> = new Promise((resolve, reject) => {
  const isSuccess = true; // Simulated outcome
  isSuccess ? resolve("Operation successful") : reject("Operation failed");
});

//handle promise using .then and .catch
myPromise
  .then((result: string) => console.log(result)) // Success path
  .catch((error: string) => console.error(error)); // Error path

Using async - await

// Create a promise
const myPromise: Promise<string> = new Promise((resolve, reject) => {
  const isSuccess = true; // Simulated outcome
  isSuccess ? resolve("Operation successful") : reject("Operation failed");
});

// Function to handle the promise using async - await
const handleMyPromise = async () => {
  try {
    const result: string = await myPromise; // Await the resolution of the promise
    console.log(result); 
  } catch (error) {
    console.error(error);
  }
};

// Execute the async function
handleMyPromise();

### 3.6.1 Handling Multiple Promises Concurrently

const fetchAllData = async (): Promise<void> => {
  try {
    const [data1, data2] = await Promise.all([
      fetch('https://api.example1.com').then(res => res.json()),
      fetch('https://api.example2.com').then(res => res.json()),
    ]);
    console.log(data1, data2);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

//--------- Or 
const fetchJsonData = async (url: string) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Failed to fetch data from ${url}: ${response.statusText}`);
  }
  return await response.json();
};

const fetchAllDataConcurrently = async (): Promise<void> => {
  try {
    const [data1, data2] = await Promise.all([
      fetchJsonData('https://api.example1.com'),
      fetchJsonData('https://api.example2.com'),
    ]);
    console.log(data1, data2);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

// Invoke the async function
fetchAllDataConcurrently();

### 3.6.2 Sequential Promise Execution

const fetchAllData = async (): Promise<void> => {
  try {
    const [data1, data2] = await Promise.all([
      fetch('https://api.example1.com').then(res => res.json()),
      fetch('https://api.example2.com').then(res => res.json()),
    ]);
    console.log(data1, data2);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};


//--------- or

const fetchJsonData = async (url: string) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Failed to fetch data from ${url}: ${response.statusText}`);
  }
  return await response.json();
};


const fetchSequentialData = async (): Promise<void> => {
  try {
    const data1 = await fetchJsonData('https://api.example1.com');
    const data2 = await fetchJsonData('https://api.example2.com');
    console.log(data1, data2);
  } catch (error) {
    console.error("Error fetching data sequentially:", error);
  }
};

// Invoke the async function
fetchSequentialData();

### Other example 1: Processing Files Asynchronously

// Assuming these are the accessible URLs to files served over HTTP
const fileURLs = [
  '/file1.txt',
  '/file2.txt'
];

const processFile = async (fileUrl: string): Promise<string> => {
  try {
    const response = await fetch(fileUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.text();
    return data
  } catch (error) {
    console.error(`Error processing file ${fileUrl}:`, error);
    throw error; // Rethrow or handle as needed
  }
};

const processAllFiles = async (): Promise<string[]> => {
  const promises = fileURLs.map(fileUrl => processFile(fileUrl));
  return Promise.all(promises);
};

// Invoke the async function
processAllFiles()
  .then(results => console.log(results))
  .catch(error => console.error("Failed to process files:", error));

### Other example 2: Delayed Operations in Sequence
Let's say you have an array of items, and for each item, you want to perform an operation that requires waiting for a certain amount of time (a simulated delay) before proceeding to the next item. This pattern is useful for rate-limiting or when dealing with APIs that have usage constraints.

const items = [1, 2, 3, 4, 5];

const delayedOperation = async (item: number): Promise<number> => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Processed item ${item}`);
      resolve(item * 2); // Example operation
    }, 1000 * item); // Delay increases with each item
  });
};

const processItemsSequentially = async (): Promise<number[]> => {
  const results = [];
  for (const item of items) {
    const result = await delayedOperation(item);
    results.push(result);
  }
  return results;
};

// Invoke the async function
processItemsSequentially()
  .then(results => console.log("Final results:", results))
  .catch(error => console.error("Failed to process items:", error));

#### Example mimics the multi-step sign-up process using Delayed Operations in Sequence
In this scenario, we have a series of validation steps that must be completed sequentially. After each step, the user receives feedback on the progress.

We'll simulate these steps with asynchronous functions that resolve after a delay, representing time-consuming operations like server validations or database checks.

type ValidationStepResult = {
  step: number;
  message: string;
  isValid: boolean;
};

const simulateValidationStep = async (step: number): Promise<ValidationStepResult> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const isValid = Math.random() > 0.2; // Simulate a validation check with an 80% chance to pass
      const message = isValid ? `Step ${step} completed successfully.` : `Step ${step} failed validation.`;
      console.log(message); // In a real app, you would update the UI instead
      resolve({ step, message, isValid });
    }, 1000 * step); // Simulate a delay for each validation step
  });
};

const validateSignUpProcess = async (): Promise<void> => {
  const steps = [1, 2, 3, 4]; // Representing each step of the signup/validation process
  let allStepsValid = true;

  for (const step of steps) {
    const result = await simulateValidationStep(step);
    if (!result.isValid) {
      allStepsValid = false;
      break; // Stop the validation process if any step fails
    }
  }

  if (allStepsValid) {
    console.log("All steps completed successfully. User successfully signed up.");
    // Proceed with the next step in the signup process, e.g., creating the user account
  } else {
    console.log("Signup process halted due to failed validation step.");
    // Provide feedback to the user and potentially allow them to correct the input
  }
};

// Invoke the validation process
validateSignUpProcess().catch(error => console.error("Signup validation process encountered an error:", error));


//example console for all step success senarios
// main.js:7 Step 1 completed successfully.
// main.js:7 Step 2 completed successfully.
// main.js:7 Step 3 completed successfully.
// main.js:7 Step 4 completed successfully.
// main.js:23 All steps completed successfully. User successfully signed up.


//example console for a fail senario
// main.js:7 Step 1 completed successfully.
// main.js:7 Step 2 failed validation.
// main.js:27 Signup process halted due to failed validation step.

## 3.7 Payload validation with TypeScript
### 3.7.1 Validate user input
#### 1. Type Guards
Example 1:

interface LoginForm {
  username: string;
  password: string;
}

// Type guard for LoginForm
function isLoginForm(data: any): data is LoginForm {
  return typeof data === 'object' &&
         typeof data.username === 'string' &&
         typeof data.password === 'string';
}

// Sample usage
const formData = { username: 'user123', password: 'pass123' }; // Assume this comes from user input

if (isLoginForm(formData)) {
  console.log("Valid login form data:", formData);
} else {
  console.error("Invalid login form data");
}

Example 2: File Upload Validation

interface UploadedFile {
  size: number; // File size in bytes
  type: string; // MIME type
}

// Type guard for UploadedFile
function isValidFile(file: any): file is UploadedFile {
  const maxSize = 5 * 1024 * 1024; // 5 MB
  const allowedTypes = ['image/jpeg', 'image/png', 'text/plain'];

  return typeof file === 'object' &&
         typeof file.size === 'number' && file.size <= maxSize &&
         typeof file.type === 'string' && allowedTypes.includes(file.type);
}

// Sample usage with a mock file object
const file = { size: 300000, type: 'image/jpeg' }; // Assume this comes from an <input type="file" />

if (isValidFile(file)) {
  console.log("File is valid for upload:", file);
} else {
  console.error("File is invalid");
}

#### 2. Type Generation from JSON
Create a JSON file (userInputRules.json) defining the expected structure of data from an API call:

In `tsconfig.json`

    ...
    "resolveJsonModule": true, 
    ...

`userInputRules.json`

{
  "username": {
    "minLength": 3,
    "maxLength": 20
  },
  "password": {
    "minLength": 8,
    "requireSpecialCharacter": true
  }
}

import * as userInputRules from './userInputRules.json';

type UserInputRules = typeof userInputRules;

function validateUserInput(input: { username: string; password: string }, rules: UserInputRules): boolean {
  // Simplified example of using the rules for validation
  const { username, password } = input;

  if (username.length < rules.username.minLength || username.length > rules.username.maxLength) {
    console.error("Username validation failed.");
    return false;
  }

  // Example check for a special character in the password
  const hasSpecialCharacter = /[!@#$%^&*(),.?":{}|<>]/g.test(password);
  if (password.length < rules.password.minLength || (rules.password.requireSpecialCharacter && !hasSpecialCharacter)) {
    console.error("Password validation failed.");
    return false;
  }

  return true;
}

// Sample usage
const userInput = { username: "user1", password: "pass!word123" };
validateUserInput(userInput, userInputRules);

#### 3. library: yup

interface UserRegistrationForm {
  username: string;
  password: string;
  email: string;
}

//----
import * as yup from 'yup';

const registrationSchema = yup.object({
  username: yup.string().required().min(3).max(20),
  password: yup.string()
      .min(8, 'Password must be at least 8 characters long')
      .matches(/[!@#$%^&*(),.?":{}|<>]/, 'Password must contain at least one special character') 
      .required('Password is required'); 
  email: yup.string().email().required(),
});

const validateUserRegistration = async (formData: any): Promise<UserRegistrationForm> => {
  try {
    return await registrationSchema.validate(formData);
  } catch (error) {
    console.error("Validation error:", error);
    throw error;
  }
};

### 3.7.2 Validating API Response Data
#### 1. Typeguards

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

// Type guard for UserProfile
function isUserProfile(data: any): data is UserProfile {
  return typeof data === 'object' &&
         typeof data.id === 'number' &&
         typeof data.name === 'string' &&
         typeof data.email === 'string';
}

// Simulated API call
async function fetchUserProfile(userId: number): Promise<UserProfile | null> {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  if (isUserProfile(data)) {
    return data;
  } else {
    console.error("Invalid user profile data");
    return null;
  }
}

#### 2. Type Generation from JSON
Create a JSON file (apiDataSchema.json) defining the expected structure of data from an API call:

In `tsconfig.json`

    ...
    "resolveJsonModule": true, 
    ...

`apiDataSchema.json`

{
  "userId": "number",
  "name": "string",
  "email": "string"
}

import {default as apiDataSchema} from './apiDataSchema.json';

type APIDataSchema = typeof apiDataSchema;

async function fetchAndValidateUserData(url: string, schema: APIDataSchema): Promise<any> {
  const response = await fetch(url);
  // const userData = await response.json();

    //check data:
    const userData = {
       userId: 1,
       name:"John Cena"
       email: "[e-mail]"
    }

    // Check if all fields in userData match the schema
  const isValid = Object.entries(schema).every(([field, type]) => typeof userData[field] === type);

  if (!isValid) {
    console.error("API data validation failed.");
    return null;
  }

  return userData;
}

// Sample usage
const apiUrl = "https://api.example.com/user/1";
fetchAndValidateUserData(apiUrl, apiDataSchema).then(data => {
  if (data) {
    console.log("Validated user data:", data);
  }
});

#### 3. Using library: yup

import * as yup from 'yup';

interface ApiResponse {
  userId: number;
  username: string;
  email: string;
}

const registrationSchema = yup.object({
  username: yup.string().required().min(3),
  password: yup.string().required().min(8),
  email: yup.string().email().required(),
});

const fetchUserData = async (userId: number): Promise<ApiResponse> => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  try {
    await registrationSchema.validate(data);
  } catch (error) {
    throw new Error("Invalid API response format.");
  }

  return data as ApiResponse;
};