Why can't I make an Array readonly this way in TypeScript?

Question

The documentation shows (#ReadOnlyArray) how to do it using an interface, but as I am exploring the language I wondered why does this not work as well ?

type TraverseTuple<T extends Array<unknown>> = {
     readonly [P in keyof T]: T[P];
}

const test: TraverseTuple<[string, number, string, number]> = ['s', 1, 'o', 2];

test[1] = 0; // not readonly !

Answer 1

This behavior is specifically not supported. The ability to map tuples was just recently introduces to typescript 3.1 with this PR. From the PR:

A readonly, -readonly, or +readonly annotation in a homomorphic mapped type currently has no effect on array or tuple elements (we might consider mapping from Array to ReadonlyArray and vice versa, although that technically isn't structure preserving because it adds or removes methods).

Answer 2

There is a built-in read-only array type, which makes arrays read only (unless asserted back to a plain array).

const test: ReadonlyArray<string|number> = ['s', 1, 'o', 2];

test[1] = 0;

But, for tuples you need to create an explicit type, like this:

const test: Readonly<{ 0: string, 1: number, 2: string, 3: number }> = ['s', 1, 'o', 2];

test[1] = 1;