Removing modifiers with minus in Typescript - Step-by-Step Execution

Concept Flow - Removing modifiers with minus

Start with type with modifiers

↓

Apply minus modifier to remove

↓

Resulting type without those modifiers

↓

Use new type

This flow shows how applying a minus modifier removes specific modifiers from a TypeScript type, resulting in a new type without those modifiers.

Execution Sample

Typescript

type Original = {
  readonly name: string;
  age?: number;
};

type Mutable = {
  -readonly [K in keyof Original]: Original[K];
};

This code removes the readonly modifier from all properties of Original to create a Mutable type.

Execution Table

Step	Action	Target Property	Modifier Before	Modifier After	Resulting Type Property
1	Start with Original type	name	readonly	readonly	readonly name: string
2	Start with Original type	age	optional	optional	age?: number
3	Apply -readonly modifier	name	readonly	removed	name: string
4	Apply -readonly modifier	age	none	none	age?: number
5	Resulting Mutable type	name	none	none	name: string
6	Resulting Mutable type	age	optional	optional	age?: number
7	End	-	-	-	Mutable type has no readonly modifiers

💡 All readonly modifiers removed; optional modifiers remain unchanged.

Variable Tracker

Variable	Start	After removing readonly	Final
name	readonly string	string	string
age	optional number	optional number	optional number

Key Moments - 2 Insights

Why does the 'age' property keep its optional modifier after applying '-readonly'?

Because the minus modifier '-readonly' only removes the readonly modifier, it does not affect optional modifiers, as shown in execution_table rows 2, 4, and 6.

What happens if a property does not have the modifier we try to remove?

The property remains unchanged. For example, 'age' has no readonly modifier, so it stays the same after applying '-readonly' (see execution_table row 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the modifier of 'name' after step 3?

A readonly

B removed

C optional

D none

💡 Hint

Check execution_table row 3 under 'Modifier After' column.

At which step does the 'age' property remain unchanged?

A Step 5

B Step 3

C Step 4

D Step 7

💡 Hint

Look at execution_table row 4 for 'age' property.

If we also wanted to remove the optional modifier, what would change in the execution?

A The 'age' property would lose its optional modifier after applying minus.

B The 'name' property would become optional.

C No properties would change.

D The 'age' property would become readonly.

💡 Hint

Think about what modifiers the minus operator targets; see variable_tracker for 'age' property.

Concept Snapshot

Removing modifiers with minus in TypeScript:
- Use '-modifier' to remove a modifier from properties.
- Example: '-readonly' removes readonly from all properties.
- Optional modifiers remain unless explicitly removed.
- Syntax: type NewType = { -readonly [K in keyof OldType]: OldType[K] };
- Result: NewType has same properties without readonly.

Full Transcript

This visual execution shows how to remove modifiers like readonly from TypeScript types using the minus operator. We start with a type that has readonly and optional modifiers. Applying '-readonly' removes readonly from all properties but leaves optional modifiers intact. The execution table tracks each property and its modifiers before and after removal. The variable tracker shows how property types change. Key moments clarify why optional modifiers stay and what happens if a property lacks the modifier. The quiz tests understanding of modifier changes at each step. The snapshot summarizes the syntax and behavior for quick reference.