W3Schools Tryit Editor

// Combining Mapped Types with Conditional Types
// This demonstrates how mapped types can be combined with conditional logic

// Define an API Response object
const apiResponse = {
  data: { user: "admin" },
  status: 200,
  message: "Success",
  timestamp: 1622548800000
};

// Simulate FormattedResponse<T> mapped type
// Convert each numeric property to a formatted string
function formatNumericProperties(obj) {
  const result = { ...obj };
  
  for (const key in obj) {
    if (typeof obj[key] === "number") {
      // Convert numbers to strings
      if (key === "timestamp") {
        // Format timestamp as date string
        result[key] = new Date(obj[key]).toISOString();
      } else {
        // Format other numbers
        result[key] = String(obj[key]);
      }
    }
  }
  
  return result;
}

// Simulate StringPropsOnly<T> - filter for only string properties
function extractStringPropertiesOnly(obj) {
  const result = {};
  
  for (const key in obj) {
    if (typeof obj[key] === "string") {
      result[key] = obj[key];
    }
  }
  
  return result;
}

// Examples
const formattedResponse = formatNumericProperties(apiResponse);
console.log("FormattedResponse<ApiResponse>:");
console.log(formattedResponse);

const stringPropsOnly = extractStringPropertiesOnly(apiResponse);
console.log("\nStringPropsOnly<ApiResponse>:");
console.log(stringPropsOnly);

// Here's what these would look like in TypeScript
console.log("\nIn TypeScript:");
console.log("FormattedResponse<ApiResponse> would have status and timestamp as strings");
console.log("StringPropsOnly<ApiResponse> would only include the message property");

FormattedResponse:
{
  data: { user: 'admin' },
  status: '200',
  message: 'Success',
  timestamp: '2021-06-01T10:00:00.000Z'
}

StringPropsOnly:
{
  message: 'Success'
}

In TypeScript:
FormattedResponse would have status and timestamp as strings
StringPropsOnly would only include the message property