W3Schools Tryit Editor

// Built-in Mapped Types Example
// This simulates TypeScript's built-in mapped types in JavaScript

// Define a User object
const user = {
  id: 1,
  name: "John Doe",
  email: "john@example.com",
  isAdmin: true
};

// Simulate Partial<T> - all properties are optional
function createPartialUser() {
  return { name: "Jane" }; // Only has name, other properties are omitted
}

// Simulate Required<T> - ensures all properties exist
function createRequiredUser(partialUser) {
  // Fill in missing properties with defaults
  return {
    id: partialUser.id ?? 0,
    name: partialUser.name ?? "",
    email: partialUser.email ?? "",
    isAdmin: partialUser.isAdmin ?? false
  };
}

// Simulate Pick<T, K> - create a type with a subset of properties
function pickUserCredentials(user) {
  const { email, id } = user;
  return { email, id };
}

// Simulate Omit<T, K> - create a type by removing properties
function createPublicUser(user) {
  const { name, email } = user;
  return { name, email };
}

// Simulate Record<K, T> - create an object with specific keys and value type
function createUserRoles() {
  return {
    admin: "Full access",
    user: "Limited access",
    guest: "Read-only access"
  };
}

// Examples
const partialUser = createPartialUser();
console.log("Partial<User>:", partialUser);

const requiredUser = createRequiredUser(partialUser);
console.log("Required<User>:", requiredUser);

const userCredentials = pickUserCredentials(user);
console.log("Pick<User, 'email' | 'id'>:", userCredentials);

const publicUser = createPublicUser(user);
console.log("Omit<User, 'id' | 'isAdmin'>:", publicUser);

const userRoles = createUserRoles();
console.log("Record<'admin' | 'user' | 'guest', string>:", userRoles);

Partial: { name: 'Jane' }
Required: { id: 0, name: 'Jane', email: '', isAdmin: false }
Pick: { email: '[email protected]', id: 1 }
Omit: { name: 'John Doe', email: '[email protected]' }
Record<'admin' | 'user' | 'guest', string>: {
  admin: 'Full access',
  user: 'Limited access',
  guest: 'Read-only access'
}