Confusing syntax when creating function with generic return type

I'm trying to get more comfortable using generics in TypeScript.

In the example below I understand the majority of what's going on:

Firstly I create a Person object type

type Person = {
  name: string,
  age: number,
  location: string
}

I then create a getUsers function which accepts 2 generics, T and K.

const getUsers = <T extends Person, K extends keyof T>(users: T[], key: K): T[K][] => {
  users.map(user => console.log(`${user[key]}`));
}

T extends my Person type because I want this to be an object, and K extends the keys of T because I want the keys index signature from the Person object.

I then have two arguments users which is an array of T, and key which will be a key of T.

My confusion is here:

T[K][]

This looks weird to me because in TypeScript if you want to set a type to be a multi-dimension array you do double brackets [][].

And here [K][] this to me looks like nested array, could someone please explain in more detail why the syntax is like this?

I understand it's just saying an array of objects but I only know that because I watched a video using this example, if I saw this without that example I wouldn't have come to that conclusion.

You are incorrectly reading T[K][] as something like T([K][]) when it is actually (T[K])[]. There are a few distinct and not-completely related uses of the square bracket characters ([ and ]) in TypeScript's type system:

• T[]: if you have a type T, then "T[]" is a synonym for Array<T>. There's also readonly T[] which is a synonym for ReadonlyArray<T>

• T[K]: if you have an object-like type T and a key-like type K, then T[K] is the indexed access type representing the type of value you'd get when indexing into an object of type T with a key of type K.

• [], [T], [T, U], [T, U, V], [T, U, V, ...W[]], [T, ...A, U], [T, U?], readonly [T, U], etc: there are all tuple types of some form or other. Some of that syntax has to do involves optional elements, readonly tuples, and rest elements, as well as variadic tuple types. In particular you should be careful to distinguish between the empty tuple [] and an array like T[], and to distinguish between a single-element tuple [K] and an indexed access like T[K]. They look similar (if you ignore what's happening before the opening bracket) but they are not related.

• {[k]: T}, {["x"]: T}, {[k: string]: T}, {[K in P]: T}, {[T in U as K<T>]: V}, etc. these all use square brackets to correspond to keylike things inside an object type. There are important distinctions between computed property keys (like {[k]: T} and {["x"]: T}, index signatures (like {[k: string]: T}), and mapped types (like {[K in P]: T} and {[T in U as K<T>]: V}). Hopefully these aren't as easy to confuse with the others, since they are surrounded by curly braces.

Anyway, T[K][] is equivalent to Array<T[K]>, which means: the type of an array whose elements are of type you get when reading a property from type T with a key of type K. In your example code, the call signature {<T extends Person, K extends keyof T>(users: T[], key: K): T[K][]} means a function which accepts a users array of some subtype T of Person, as well as a key key of a type K known to be a key of T, and which returns an array of values corresponding to the key-keyed property of the elements of the users array. Indeed, just by that signature, it would be a plausible guess that the implementation of such a call signature would be return users.map(user => user[key]), which works:

const getUsers = <T extends Person, K extends keyof T>(
    users: T[], key: K
): T[K][] => users.map(user => user[key]); // okay

Playground link to code