Removing modifiers with minus in Typescript

Introduction

Sometimes you want to take a type and remove certain special words (modifiers) from its properties. This helps make the type simpler or change how it behaves.

When you want to make all properties of an object writable instead of readonly.

When you want to remove optional marks from properties to make them required.

When you want to create a new type based on another but without some special property rules.

When you want to control how strict or loose your types are in different parts of your code.

Syntax

Typescript

type NewType = { -readonly [K in keyof OldType]: OldType[K] };
type AnotherType = { -? [K in keyof OldType]: OldType[K] };

The minus sign - before readonly or ? removes that modifier from the type.

This syntax is used inside mapped types to change property modifiers.

Examples

This removes readonly and ? (optional) from all properties, making them writable and required.

Typescript

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

type WritableUser = {
  -readonly [K in keyof ReadonlyUser]-?: ReadonlyUser[K];
};

This removes the ? optional modifier, making all properties required.

Typescript

type OptionalUser = {
  name: string;
  age?: number;
};

type RequiredUser = {
  [K in keyof OptionalUser]-?: OptionalUser[K];
};

This removes only the readonly modifier, keeping optional properties as they are.

Typescript

type ReadonlyUser = {
  readonly name: string;
  age: number;
};

type WritableUser = {
  -readonly [K in keyof ReadonlyUser]: ReadonlyUser[K];
};

Sample Program

This example shows how to remove both readonly and ? from properties. The new type EditablePerson has writable and required properties.

Typescript

type ReadonlyPerson = {
  readonly id: number;
  readonly name?: string;
};

type EditablePerson = {
  -readonly [K in keyof ReadonlyPerson]-?: ReadonlyPerson[K];
};

const person: EditablePerson = {
  id: 1,
  name: "Alice"
};

// person.id = 2; // This works because 'readonly' is removed
// person.name = undefined; // Not allowed because '?' is removed

console.log(person);

Important Notes

Removing modifiers only works inside mapped types using [K in keyof T] syntax.

Using -readonly removes the readonly modifier, making properties writable.

Using -? removes the optional modifier, making properties required.

Summary

You can remove readonly and ? modifiers using a minus sign - in mapped types.

This helps create new types with different property rules based on existing types.

It is useful for controlling mutability and optionality in your TypeScript types.

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