Mapping Modifiers

Within a mapped type, +readonly or -readonly and +? or -? add or remove property modifiers. The plus is optional when adding. Removing optionality matters because callers can then rely on a property existing.

Reading the code: -readonly removes the compile-time restriction from id. -? requires label. After constructing an object with both fields, normal JavaScript assignment updates id.

Keep the boundary clear: Removing readonly in a type changes what TypeScript allows; it does not mutate or unfreeze an existing runtime object.

Save the code as mapping-modifiers.ts. The result below was captured after compiling this exact example with strict TypeScript checking and executing the emitted JavaScript in Node.js.

TypeScript code

type Draft = { readonly id: number; label?: string };
type EditableRequired<T> = { -readonly [K in keyof T]-?: T[K] };
const item: EditableRequired<Draft> = { id: 1, label: "pending" };
item.id = 2;
console.log(`${item.id}: ${item.label}`);

Verified output

2: pending

Build: npx tsc --strict --target es2022 --module commonjs --lib es2022,dom,esnext.disposable mapping-modifiers.ts; run: node mapping-modifiers.js. The exact filename may be changed freely. When a multi-file project exists, prefer its tsconfig.json and build scripts.

-readonly removes the compile-time restriction from id. -? requires label. After constructing an object with both fields, normal JavaScript assignment updates id.

The output shown above comes from the initialized values in this program. Replacing a type annotation alone does not transform a JavaScript value.

Removing readonly in a type changes what TypeScript allows; it does not mutate or unfreeze an existing runtime object.

Check both the TypeScript diagnostic and the emitted JavaScript behavior. A program can compile correctly and still need runtime validation or error handling.

Write a mapped type that adds readonly to every property of a mutable configuration.

Before running your change, write down the type you expect TypeScript to infer and the output you expect JavaScript to print. Then check both predictions.

Within a mapped type, +readonly or -readonly and +? or -? add or remove property modifiers.

Try the practice change and re-run the exact program to test your understanding.