Single Field Updates vs. TypeScript Partial<T>

✅ The Todo Type

type Todo = {
  title: string;
  description: string;
  label: string;
  priority: 'high' | 'low' | 'medium';
};

• This defines a Todo object with four properties:
  • title → a string
  • description → a string
  • label → a string
  • priority → must be one of 'high' | 'low' | 'medium'

---

✅ 1️⃣ Single Field Update Function

function updateTodo<K extends keyof Todo>(
  todo: Todo,
  field: K,
  value: Todo[K]
): Todo {
  return { ...todo, [field]: value };
}

🔹 Usage Example

const myTodo: Todo = {
  title: "Learn TypeScript",
  description: "Study mapped types",
  label: "Programming",
  priority: "high",
};

// Update a single field
const updatedTodo = updateTodo(myTodo, "priority", "low");

console.log(updatedTodo);
/* Output:
{
  title: "Learn TypeScript",
  description: "Study mapped types",
  label: "Programming",
  priority: "low"
}
*/

🔹 How It Works

1. field: keyof Todo ensures only valid keys like "title", "description", "priority", etc., are allowed.
2. value: Todo[K] ensures that the correct type is assigned.
3. Returns a new object with the updated field.

🔹 Pros & Cons

✅ Pros:

• Strict type safety (you cannot pass an invalid key or value).
• Ensures that the assigned value is of the correct type.

❌ Cons:

• Only one field can be updated at a time.
• If multiple fields need updating, the function must be called multiple times.

---

✅ 2️⃣ Multiple Fields (Partial) Update Function

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>): Todo {
  return { ...todo, ...fieldsToUpdate };
}

🔹 Usage Example

const myTodo: Todo = {
  title: "Learn TypeScript",
  description: "Study mapped types",
  label: "Programming",
  priority: "high",
};

// Update multiple fields at once
const updatedTodo = updateTodo(myTodo, { title: "Master TypeScript", priority: "medium" });

console.log(updatedTodo);
/* Output:
{
  title: "Master TypeScript",
  description: "Study mapped types",
  label: "Programming",
  priority: "medium"
}
*/

🔹 How It Works

1. fieldsToUpdate: Partial<Todo> allows updating multiple fields at once.
2. The spread operator { ...todo, ...fieldsToUpdate } ensures existing properties are preserved and only the specified fields are updated.

🔹 Pros & Cons

✅ Pros:

• More flexible (allows multiple fields to be updated at once).
• Less repetitive than calling updateTodo multiple times.
• Works well in React/Redux state updates, where partial updates are common.

❌ Cons:

• Slightly less strict than the single-field update approach.
• It allows passing {} (empty object), which does nothing but is still valid.

---

🚀 Which One Should You Use?

Feature Single Field ((todo, field, value)) Multiple Fields ((todo, fieldsToUpdate))

Type Safety	✅ Strong	⚠️ Slightly weaker (but still safe)
Flexibility	❌ Only one field at a time	✅ Can update multiple fields
Readability	✅ Simple	✅ More concise for multiple updates
Usage in UI/State	❌ Less common	✅ Used often in React/Redux
Code Reusability	✅ Good for strict updates	✅ Better for dynamic updates

📌 Final Recommendation

• If you need to update one field at a time and prefer strict type checking, use the single field update function.
• If you want more flexibility and the ability to update multiple fields at once, use the partial update function (this is more common in real-world apps).

👉 In practice, the Partial<Todo> approach is more widely used because of its flexibility and better compatibility with UI frameworks like React! 🚀