What's the meaning of typeof Array[number] in Typescript?

Question

const names = ['jacob', 'master jung', 'kyuhyun'] as const;
type Names = typeof names[number];

I got the results I wanted, but I don't understand typeof names[number].

What does typeof Array[number] in Typescript mean?

Answer 1

There is a comment made by the user @jcalz that explains how it works. It refers to the following code, which is similar to the OP code:

const fruit = ["apple", "banana", "grape"] as const;
export type Fruit = (typeof fruit)[number]; 'apple'|'banana'|'grape';

typeof fruit is Array<"apple" | "banana" | "grape">, so Fruit is equivalent to (Array<"apple" | "banana" | "grape">)[number]. The syntax T[K] means: the type of the properties of T whose keys are of type K. So (Array<"apple" | "banana" | "grape">)[number] means "the types of the properties of Array<"apple" | "banana" | "grape"> whose keys are of type number", or: "the array elements of Array<"apple" | "banana" | "grape">, or: "apple" | "banana" | "grape".

And another similar comment by that user that adds a bit more technical terms:

The type T[K] is a lookup type which gets the type of the property of T whose key is K. In (typeof list)[number], you're getting the types of the properties of (typeof list) whose keys are number. Arrays like typeof list have numeric index signatures, so their number key yields the union of all numerically-indexed properties.

Answer 2

typeof gets the type of names variable (which is readonly ['jacob', 'master jung', 'kyuhyun']) then array/tuple member type is resolved. This is called indexed access types or lookup types.

Syntactically, they look exactly like an element access, but are written as types

In this case we "query" the type of tuple member (tuple/array at index) which is 'jacob' | 'master jung' | 'kyuhyun'

Playground