W3Schools Tryit Editor

"use strict";
// @ts-check
// Modifying Property Modifiers Example
// This demonstrates the concept of adding/removing readonly and optional modifiers in JavaScript

/**
 * @typedef {Object} Configuration
 * @property {string} apiKey
 * @property {string} apiUrl
 * @property {number} [timeout]
 * @property {number} [retries]
 */

// Define a Configuration object with some properties that should be readonly
/** @type {Configuration} */
const configuration = {
  apiKey: "abc123",
  apiUrl: "https://api.example.com",
  timeout: 30000,  // optional in TypeScript version
  // retries is not defined (optional in TypeScript version)
};

// Make the apiKey and apiUrl properties "readonly" using Object.defineProperty
Object.defineProperty(configuration, "apiKey", {
  writable: false,
  configurable: true
});

Object.defineProperty(configuration, "apiUrl", {
  writable: false,
  configurable: true
});

// Simulate making all properties mutable (removing readonly)
/**
 * @param {Configuration} obj
 * @returns {Configuration}
 */
function makeMutable(obj) {
  // Redefine properties to be writable and return the same object to preserve type
  try { Object.defineProperty(obj, "apiKey", { writable: true }); } catch {}
  try { Object.defineProperty(obj, "apiUrl", { writable: true }); } catch {}
  return obj;
}

// Simulate making all optional properties required
/**
 * @param {Configuration} obj
 * @param {Array<keyof Configuration>} requiredProps
 * @returns {Required<Configuration>}
 */
function makeRequired(obj, requiredProps) {
  // In JavaScript, we provide default values for missing properties
  const result = { ...obj };
  
  for (const prop of requiredProps) {
    if (/** @type {any} */(result)[prop] === undefined) {
      // Provide default values for missing properties
      if (prop === "timeout") /** @type {any} */(result)[prop] = 5000;
      if (prop === "retries") /** @type {any} */(result)[prop] = 3;
    }
  }
  
  return result;
}

// Examples
console.log("Original Configuration:");
console.log(configuration);

// Try to modify a readonly property
try {
  configuration.apiKey = "newkey"; // This will fail in strict mode
  console.log("Modified apiKey:", configuration.apiKey);
} catch (error) {
  console.log("Error: Cannot modify readonly property 'apiKey'");
}

const mutableConfig = {
  apiKey: configuration.apiKey,
  apiUrl: configuration.apiUrl,
  timeout: configuration.timeout
};
mutableConfig.apiKey = "newkey"; // This will work
console.log("\nMutable Configuration (after modification):");
console.log(mutableConfig);

/** @type {Required<Configuration>} */
const requiredConfig = makeRequired(configuration, ["apiKey", "apiUrl", "timeout", "retries"]);
console.log("\nRequired Configuration (all properties required):");
console.log(requiredConfig);