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.

Practice

1.

What does the minus sign - do in TypeScript mapped types when used with modifiers like readonly or ??

easy

A. It renames the properties by adding a prefix.

B. It removes the specified modifier from the properties.

C. It duplicates the properties with the modifier.

D. It adds the specified modifier to the properties.

Solution

1. Step 1: Understand mapped types modifiers

   In TypeScript, modifiers like readonly and ? control property mutability and optionality.

2. Step 2: Role of minus sign in mapped types

   Using - before a modifier removes that modifier from the properties in the new type.

3. Final Answer:

   It removes the specified modifier from the properties. -> Option B

4. Quick Check:

   Minus sign removes modifiers [OK]

Hint: Minus sign removes modifiers like readonly or optional [OK]

Common Mistakes:

• Thinking minus adds modifiers instead of removing
• Confusing minus with negation in values
• Assuming minus duplicates properties

2.

Which of the following is the correct syntax to remove the readonly modifier from all properties of type T in a mapped type?

type Mutable<T> = {

  [P in keyof T]: T[P]

}

easy

A. type Mutable<T> = { -readonly [P in keyof T]: T[P] }

B. type Mutable<T> = { readonly- [P in keyof T]: T[P] }

C. type Mutable<T> = { [P in keyof T]-: T[P] }

D. type Mutable<T> = { [P in keyof T]: -readonly T[P] }

Solution

1. Step 1: Syntax for removing readonly modifier

   In mapped types, -readonly placed before the property name removes the readonly modifier.

2. Step 2: Check each option

   type Mutable<T> = { -readonly [P in keyof T]: T[P] } correctly uses -readonly [P in keyof T]. Others misuse syntax or place minus incorrectly.

3. Final Answer:

   type Mutable<T> = { -readonly [P in keyof T]: T[P] } -> Option A

4. Quick Check:

   Minus before readonly removes it [OK]

Hint: Use -readonly before property in mapped type [OK]

Common Mistakes:

• Placing minus after readonly
• Putting minus inside property type
• Using minus without readonly keyword

3.

Given the following code, what is the type of Result?

type Original = { readonly a: number; b?: string; c: boolean };

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

medium

A. { readonly a: number; b?: string; c: boolean }

B. { readonly a: number; b: string; c: boolean }

C. { a: number; b?: string; c: boolean }

D. { a: number; b: string; c: boolean }

Solution

1. Step 1: Analyze modifiers removed

   The -readonly removes readonly from all properties. The -? removes optional modifier, making all properties required.

2. Step 2: Apply changes to Original type

   Property a loses readonly, b loses optional, so b becomes required string, c stays boolean required.

3. Final Answer:

   { a: number; b: string; c: boolean } -> Option D

4. Quick Check:

   Minus removes readonly and optional [OK]

Hint: Minus removes modifiers, so readonly and ? are gone [OK]

Common Mistakes:

• Forgetting that -? removes optional
• Assuming readonly stays
• Thinking optional remains

4.

Identify the error in this mapped type that tries to remove the ? optional modifier:

type RequiredProps<T> = { [P in keyof T]-?: T[P] }

Which statement is true?

medium

A. Minus sign cannot be used to remove optional modifiers.

B. Minus sign should be before the property name like -? [P in keyof T].

C. The syntax is correct; it removes the optional modifier.

D. The minus sign must be after the property name like [P in keyof T]? -.

Solution

1. Step 1: Check syntax for removing optional modifier

   In mapped types, placing -? immediately after the property name removes the optional modifier.

2. Step 2: Verify given code

   The code uses [P in keyof T]-?: T[P], which is correct syntax to remove optional.

3. Final Answer:

   The syntax is correct; it removes the optional modifier. -> Option C

4. Quick Check:

   Minus after property removes optional [OK]

Hint: Minus ? after property removes optional modifier [OK]

Common Mistakes:

• Placing minus before property name for optional
• Thinking minus can't remove optional
• Misplacing minus sign

5.

You have a type with some properties readonly and some optional:

type Data = { readonly id: number; name?: string; active: boolean };

Write a mapped type CleanData that removes both readonly and ? modifiers from all properties.

Which of these is correct?

hard

A. type CleanData = { -readonly [P in keyof Data]-?: Data[P] }

B. type CleanData = { [P in keyof Data]-readonly-?: Data[P] }

C. type CleanData = { [P in keyof Data]-readonly -?: Data[P] }

D. type CleanData = { -readonly -? [P in keyof Data]: Data[P] }

Solution

1. Step 1: Remove readonly modifier

   Use -readonly before the property name to remove readonly.

2. Step 2: Remove optional modifier

   Use -? immediately after the property name to remove optional.

3. Step 3: Combine both in mapped type

   Correct syntax is { -readonly [P in keyof Data]-?: Data[P] }.

4. Final Answer:

   type CleanData = { -readonly [P in keyof Data]-?: Data[P] } -> Option A

5. Quick Check:

   Minus readonly before and minus ? after property [OK]

Hint: Minus readonly before, minus ? after property name [OK]

Common Mistakes:

• Placing minus signs incorrectly
• Trying to put minus signs inside brackets
• Using spaces that break syntax