Parentheses in types are just for grouping and to resolve ambiguities; they do not modify the type that they surround. For example, given the types
type A = { a: 1, c: 3 };
type B = { b: 2, c: 3 };
Then what does this type resolve to?
type Z = keyof A | B; // ??
With parentheses you can be explicit about how you mean for that to be interpreted:
type X = (keyof A) | B; // "a" | "c" | B
type Y = keyof (A | B); // "c"
It turns out that keyof
binds more tightly to A
than the union operator |
does, so Z
is equivalent to X
... so if you mean Y
you need those parentheses.
The (increasingly outdated) TypeScript Specification document says:
Parentheses are required around union, intersection, function, or constructor types when they are used as array element types; around union, function, or constructor types in intersection types; and around function or constructor types in union types.
When in doubt, add parentheses.
Square brackets in types actually have a variety of different meanings:
When a type T
is immediately followed by a pair of empty square brackets, it means an array whose elements are of type T
, and is equivalent to Array<T>
. So {a: string}[]
is an array whose elements are of type {a: string}
, and is equivalent to Array<{a: string}>
. (Similarly, if such a type is immediately preceded by the readonly
modifier, like readonly T[]
, then it is equivalent to ReadonlyArray<T>
.)
When a type T
is immediately followed by another type U
encased in square brackets, (i.e., T[U]
)... the brackets are not empty, it means you are looking up or indexing the type of the property of T
whose key is of type U
. So {a: string}["a"]
is the type of the a
property of {a: string}
... namely, string
. And Array<boolean>[number]
is the type you get when you index into an Array<boolean>
with a number
key... namely boolean
.
When square brackets contain a comma-delimited list of zero or more types like []
or [T]
or [T,U]
or [T,U,V]
, etc., (and if it's zero or one you need to be careful not to confuse it for the array or lookup notation above), then you are specifying a tuple type, an array with a fixed number of possibly differently-typed elements in a fixed order. Tuple types can also be preceded with readonly
to make readonly tuples, and there are other fun things going on with tuples, like rest and optional elements in tuple types and variadic tuple types, so readonly [0, ...[1, 2, 3], 4?, ...[5?, 6?, 7?], ...8[]]
is a valid TS type (in TS4.0+).
Armed with that, let's look at these examples:
type ArrayTypes<T> =
T extends (infer U)[]
? U
: never
This is saying: given a type T
, if it extends some array type U[]
where U
is to be inferred, then return U
, otherwise return never
. The infer
needs to attach to U
. For whatever reason, []
binds more tightly than infer
, and so T extends infer U[]
would be interpreted as T extends infer (U[])
... which is invalid because you can only infer
a new type variable, not a function of such a variable. That's why you need the parentheses.
let arr = [1, "2", []];
type test = ArrayTypes<typeof arr> // type test = string | number | never[]
That makes sense, right? arr
is inferred to be of type Array<string | number | Array<never>>
or the equivalent (string | number | never[])[]
, and thus ArrayTypes<typeof arr>
infers U
to be string | number | never[]
and that's what you get. (Note that the value []
is inferred as type never[]
in the TS version I'm using and not any[]
).
Also note, as an aside, that the lookup type above with a number
key does the same thing without needing infer
:
type ArrayTypes<T> = T extends any[] ? T[number]: never;
Next example:
type ArrayTypes<T> =
T extends (infer U)
? U
: never
Here the parentheses aren't necessary because there is no ambiguity. You could write T extends infer U ? U : never
. This means: given a type T
that extends some inferred type U
, return U
; otherwise return never
. But this seems a bit silly, since U
will always be inferred to be T
, and thus ArrayTypes<T>
will always be T
, no matter what:
let arr = [1, "2", []];
type test = ArrayTypes<typeof arr> // type test = (string | number | never[])[]
The type test
is going to be just the same as typeof arr
, which is Array<string | number | Array<never>>
, or equivalently, (string | number | never[])[]
.
I hope that clarifies things for you. Good luck!
Playground link to code