Immutable Data with Readonly in TypeScript

Question

In my quest to learning TypeScript, I am currently reading about Immutable Data with Readonly in TS. I know what the code below is supposed to do, which is return 0 and "1". I am confused tho as to what exactly type ReadonlyInterface<T> and function genericInterfaceToReadOnly<T> are suppose to be doing. Can somebody please explain?

interface OriginalInterface {
    x: number;
    y: string;
}

type ReadonlyInterface<T> = { readonly [P in keyof T]: T[P] };

function genericInterfaceToReadOnly<T>(o: T): ReadonlyInterface<T> {
    return Object.freeze(o);
}

const original: OriginalInterface = { x: 0, y: "1" };
const originalReadonly = genericInterfaceToReadOnly(original);

Aplet123 · Accepted Answer · 2020-11-16 01:42:03Z

1

The ReadonlyInterface type uses the mapped type syntax to create a generic which turns all of the properties in the type parameter into read-only parameters. Note that this is equivalent to the built in ReadOnly type. So, in this case, ReadonlyInterface<OriginalInterface> would be:

interface OriginalInterface {
    readonly x: number;
    readonly y: string;
}

Marking the properties as readonly in the type level. The genericInterfaceToReadOnly takes an object of type T, and returns a readonly version of it by using Object.freeze, which makes the object immutable at runtime as well. Essentially, the type combined with the function allow you to make a value immutable in both the type and runtime levels.

answered Nov 16, 2020 at 1:42

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Immutable Data with Readonly in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related