In TypeScript, what do the annotations `string | number[]` and `(string | number)[]` each describe, and how would you write the second one using the `Array<...>` form?

## Precedence, not semantics The confusion here is purely syntactic. In TypeScript's type grammar, the array suffix `[]` is a postfix operator that binds more tightly than the union operator `|`. So: ```typescript type A = string | number[]; // parses as: string | (number[]) type B = (string | number)[]; // parses as: (string | number)[] ``` `A` is a union of two types. A value of type `A` is either a string, or an array whose elements are all numbers. It is never an array containing both. `B` is one type: an array, whose element type happens to be a union, so any individual slot may hold a string or a number. ```typescript let a: string | number[]; a = 'hello'; // ok a = [1, 2]; // ok // a = ['x', 1]; // error: not assignable to string | number[] let b: (string | number)[] = ['x', 1]; // ok ``` ## The generic form removes the ambiguity Because `Array<T>` puts the element type inside angle brackets, there is nothing to mis-group: ```typescript type B2 = Array<string | number>; // identical to (string | number)[] ``` This is the strongest concrete argument for the generic spelling: with a union, an intersection, or a function element type, the bracket form needs parentheses you can forget, and forgetting them produces a type that still compiles and still looks plausible. `() => void[]` versus `(() => void)[]` is the same trap with a function element type — the first is a function returning an array of `void`, the second an array of functions. ## A third type people conflate with both ```typescript type C = string[] | number[]; ``` `C` is a union of two array types: a homogeneous array of strings, or a homogeneous array of numbers. It is not the same as `(string | number)[]`. A mixed literal like `['x', 1]` is assignable to `(string | number)[]` but not to `string[] | number[]`, since it matches neither branch. And a `string[]` is assignable to both `C` and `(string | number)[]`, so the difference only shows up when you try to mix. Which you want is a modelling decision. If your data genuinely cannot mix — a column of values that is either all numeric or all textual — `string[] | number[]` encodes that invariant and `(string | number)[]` throws it away. If elements are independently typed, the element union is the right shape. ```typescript function render(values: (string | number)[]) { /* per-element handling */ } function sum(values: number[] | string[]) { /* two whole-array cases */ } ``` ## Stacking readonly on top The readonly modifier sits outside the whole array literal syntax, so it composes with the parentheses rather than replacing them: ```typescript type D = readonly (string | number)[]; type D2 = ReadonlyArray<string | number>; // same type ``` Writing `readonly string | number[]` would be a syntax error, because the modifier has to attach to an array or tuple literal type, not to a union. ## Reading an annotation you did not write A practical habit: when you meet `X | Y[]` in someone else's signature, read the `[]` as attaching to `Y` alone until you see parentheses proving otherwise. That single reflex catches most of these. If the surrounding code then treats the parameter as "an array of X-or-Y", the annotation is wrong and the compiler has been quietly agreeing with the typo — it will reject the mixed call sites rather than the declaration, so the error appears far from the mistake. The interviewer's real target with this question is whether you read type syntax precisely rather than by shape. The answer is short; the follow-up is usually to hand you a signature and ask what it accepts.