39

It is possible to create a DeepReadonly type like this:

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

interface A {
  B: { C: number; };
  D: { E: number; }[];
}

const myDeepReadonlyObject: DeepReadonly<A> = {
  B: { C: 1 },
  D: [ { E: 2 } ],
}

myDeepReadonlyObject.B = { C: 2 }; // error :)
myDeepReadonlyObject.B.C = 2; // error :)

This is great. Both B and B.C are readonly. When I try to modify D however...

// I'd like this to be an error
myDeepReadonlyObject.D[0] = { E: 3 }; // no error :(

How should I write DeepReadonly so that nested arrays are readonly as well?

3
  • I'm not getting an error for console.log(myDeepReadonlyObject.D[0]); Which version of typescript are you using? Jan 26, 2017 at 18:02
  • I had the "noImplicitAny" flag set in my tsconfig. The question still stands, however. I've updated it to be more clear. Thanks. Jan 26, 2017 at 18:10
  • 2
    For those interested, DeepReadonly is part of ts-essentials package. Check it out: github.com/krzkaczor/ts-essentials Dec 15, 2018 at 23:29

8 Answers 8

32

As of TypeScript 2.8, this is now possible and actually an example in the PR for Conditional Types: https://github.com/Microsoft/TypeScript/pull/21316

Also see the notes on type inference for Conditional Types: https://github.com/Microsoft/TypeScript/pull/21496

I modified the example slightly to use the type inference for the readonly array value type because I find (infer R)[] clearer than Array<T[number]> but both syntaxes work. I also removed the example NonFunctionPropertyNames bit as I want to preserve functions in my output.

type DeepReadonly<T> =
    T extends (infer R)[] ? DeepReadonlyArray<R> :
    T extends Function ? T :
    T extends object ? DeepReadonlyObject<T> :
    T;

interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}

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

Doing DeepReadonly this way also preserves optional fields (thanks to Mariusz for letting me know), e.g.:

interface A {
    x?: number;
    y: number;
}

type RA = DeepReadonly<A>;

// RA is effectively typed as such:
interface RA {
    readonly x?: number;
    readonly y: number;
}

While TS still has some easy ways to lose "readonly-ness" in certain scenarios, this is as close to a C/C++ style const value as you will get.

6
  • 1
    Nice answer. But when I run your code in TS 1.8.1 after doing type RA = DeepReadonly<A>; the RA type is equivalent (shows in vs code when hovering over with mouse) to interface RA { readonly x?: number | undefined; readonly y: number; } and x can be omitted. Apr 7, 2018 at 21:59
  • Thanks! That's strange, I had an error earlier, but I was tweaking the code as I wrote this answer. I will modify the answer to remove that bit. But the result is even better, so that's good. Thanks for letting me know!
    – zenmumbler
    Apr 9, 2018 at 8:16
  • Thanks! Why is DeepReadonlyArray even necessary? Since every Array is an object, shouldn't DeepReadonlyObject do? Why is the ` T extends Function ? T ` necessary? Lets not remove functions, but couldn't we just leave this condition out?
    – Ben Carp
    Dec 19, 2018 at 10:18
  • @BenCarp While in JS Arrays are indeed just objects with numeric keys, TS has typed Arrays as more strict interfaces and makes them not directly interchangeable. The subscript operators for each are different, etc. The separate clause for functions is there as they are just passed through this type transformation as is, and is needed as otherwise the object test following it will try to transform the function value. It's mostly that the quirks of JS as expressed in TS types are very visible in this type :)
    – zenmumbler
    Jan 24, 2019 at 17:00
  • oh, btw, for anyone interested, I've codified this interface and some helpers in an NPM package here: npmjs.com/package/@stardazed/deep-readonly
    – zenmumbler
    Jan 24, 2019 at 17:03
22

In addition to zenmumbler answer, since TypeScript 3.7 is released, recursive type aliases are now supported and it allows us to improve the solution:

type ImmutablePrimitive = undefined | null | boolean | string | number | Function;

export type Immutable<T> =
    T extends ImmutablePrimitive ? T :
    T extends Array<infer U> ? ImmutableArray<U> :
    T extends Map<infer K, infer V> ? ImmutableMap<K, V> :
    T extends Set<infer M> ? ImmutableSet<M> : ImmutableObject<T>;

export type ImmutableArray<T> = ReadonlyArray<Immutable<T>>;
export type ImmutableMap<K, V> = ReadonlyMap<Immutable<K>, Immutable<V>>;
export type ImmutableSet<T> = ReadonlySet<Immutable<T>>;
export type ImmutableObject<T> = { readonly [K in keyof T]: Immutable<T[K]> };

You may notice that instead of extending the base interfaces, as the old solution does, like interface ImmutableArray<T> extends ReadonlyArray<Immutable<T>> {}, we refer them directly like type ImmutableArray<T> = ReadonlyArray<Immutable<T>>.

The old solution works pretty well in most cases, but there are few problems because of replacing original types. For example, if you use immer and pass the old implementation of ImmutableArray to the produce function, the draft will lack of array methods like push().

There is also the issue on GitHub about adding DeepReadonly type to TypeScript.

16

You might want to use ts-essentials package for that:

import { DeepReadonly } from "ts-essentials";

const myDeepReadonlyObject: DeepReadonly<A> = {
  B: { C: 1 },
  D: [ { E: 2 } ],
}
0
5

I think this is a better solution:

type DeepReadonly<T> = {
    readonly [P in keyof T]: DeepReadonly<T[P]>
}
3
  • 2
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Nov 25, 2021 at 0:13
  • Can someone explain why this works?
    – James
    Aug 18, 2022 at 13:00
  • 1
    This works because it recursivly calls the type-'function' on the key-property... there is a pretty neat 5min youtube video explaining pretty much this exact usecase... although his solution is a bit better with an additional check, like type MyReadonly<TInput> = { readonly [Key in keyof TInput]: TInput[Key] extends object ? MyReadonly<TInput[Key]>: TInput[Key]; } youtube.com/watch?v=U1EygIpjAEM
    – Florian
    Oct 6, 2022 at 15:29
2
export type DR<T> = DeepReadonly<T>

type DeepReadonly<T> =
// tslint:disable-next-line: ban-types
    T extends  AnyFunction | Primitive ? T :
    T extends ReadonlyArray<infer R> ? IDRArray<R> :
    T extends ReadonlyMap<infer K, infer V> ? IDRMap<K, V> :
    T extends ReadonlySet<infer ItemType>? ReadonlySetDeep<ItemType>:
    T extends object ? DRObject<T> :
    T


export type Primitive =
| null
| undefined
| string
| number
| boolean
| symbol
| bigint

export type AnyFunction = (...args: any[]) => any

interface IDRArray<T> extends ReadonlyArray<DeepReadonly<T>> {}

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

interface IDRMap<K, V> extends ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> {}

interface ReadonlySetDeep<ItemType>
    extends ReadonlySet<DeepReadonly<ItemType>> {}

DeepReadonly generic is a valuable tool that can help enforce immutability.

  • I use the short DR name since I use this generic so often.
  • T extends ReadonlyArray<infer R> ? will be true for both Array<any> and ReadonlyArray<any>.
1

You can have a readonly array:

interface ReadonlyArray<T> extends Array<T> {
    readonly [n: number]: T;
}
let a = [] as ReadonlyArray<string>;
a[0] = "moo"; // error: Index signature in type 'ReadonlyArray<string>' only permits reading

But you can't use it with your solution:

interface A {
    B: { C: number; };
    D: ReadonlyArray<{ E: number; }>;
}

myDeepReadonlyObject.D[0] = { E: 3 }; // still fine

The type of D is DeepReadonly<ReadonlyArray<{ E: number; }>> and it won't allow the ReadonlyArray to kick in.

I doubt that you'll manage to make it work to objects with arrays in them, you can have either deep read only for arrays or for objects if you want a generic interface/type and not specific ones.
For example, this will work fine:

interface A {
    readonly B: { readonly C: number; };
    D: ReadonlyArray<{ E: number; }>;
}

const myDeepReadonlyObject = {
    B: { C: 1 },
    D: [{ E: 2 }],
} as A;

myDeepReadonlyObject.B = { C: 2 }; // error
myDeepReadonlyObject.B.C = 2; // error
myDeepReadonlyObject1.D[0] = { E: 3 }; // error

But it has a specific interface to it (A) instead of a generic one DeepReadonly.

Another option is to use Immutable.js which comes with a builtin definition file and it's pretty easy to use.

1
  • Thanks. It's a real shame this doesn't appear to be possible yet. Anyone have any idea if it's in the works? Jan 27, 2017 at 20:59
1

You can use ts-toolbelt, it can do operations on types at any depth

In your case, it would be:

import {O} from 'ts-toolbelt'

interface A {
  B: { C: number; };
  D: { E: number; }[];
}

type optional = O.Readonly<A, keyof A, 'deep'>

And if you want to compute it deeply (for display purposes), you can use Compute for that

-1

Now you can just use as const as it makes readonly for all nested objects

According to https://github.com/microsoft/TypeScript/issues/31856

here is an example https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhjAvDA3gKBpmY4FsCmAXDAIwA0GWcA5kapVljgceQ4-LcQEwUdYATOFDjEA2gF12AXzTT4EGKEhQ0auADoa+DUJEaADgFcIACwAUJAJQBuNJu0bm+JDADMdoA

1
  • 2
    as const is for literals, but the question is about generic types. May 21, 2022 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.