Optional elements in tuples in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of tuple with optional element

What is the output of this TypeScript code when compiled and run with console.log(result)?

Typescript

type MyTuple = [number, string?, boolean];
const result: MyTuple = [42, undefined, true];
console.log(result);

A [42, undefined, true]

B [42, "", true]

C [42, true]

D [42, undefined]

💡 Hint

Remember that optional elements can be explicitly set to undefined.

The tuple type allows the second element to be optional. Here it is explicitly set to undefined, so the output includes it as undefined.

❓ Predict Output

intermediate

Length of tuple with optional elements

What is the value of arr.length after this code runs?

Typescript

type TupleOpt = [string, number?, boolean?];
const arr: TupleOpt = ["hello"];
console.log(arr.length);

A 3

B 1

C 2

D 0

💡 Hint

Optional elements may be missing in the actual array instance.

The array has only one element assigned, so its length is 1 even though the tuple type allows more elements.

🔧 Debug

advanced

Why does this tuple assignment cause an error?

This code causes a TypeScript error. What is the reason?

Typescript

type T = [number, string?, boolean?];
const val: T = [10, undefined, undefined, true];

A Boolean cannot be last element in tuple

B Cannot assign undefined to optional elements

C Missing required elements in tuple

D Too many elements assigned; tuple only allows up to 3 elements

💡 Hint

Check how many elements the tuple type allows.

The tuple type allows a maximum of 3 elements. The code tries to assign 4 elements, causing an error.

🧠 Conceptual

advanced

Behavior of optional elements in tuple destructuring

Given the tuple type T = [number, string?, boolean?] and const t: T = [5], what is the value of second after const [, second] = t;?

A undefined

B null

C empty string ""

D throws an error

💡 Hint

Optional elements may be missing and default to undefined when destructured.

Since the second element is optional and missing, destructuring assigns undefined to second.

❓ Predict Output

expert

Output of function using tuple with optional elements

What is the output of this TypeScript code?

Typescript

type MyTuple = [string, number?, boolean?];
function describe(t: MyTuple): string {
  const [name, age, active] = t;
  return `Name: ${name}, Age: ${age ?? "unknown"}, Active: ${active ?? false}`;
}
console.log(describe(["Alice", undefined, true]));

A Name: Alice, Age: , Active: true

B Name: Alice, Age: undefined, Active: true

C Name: Alice, Age: unknown, Active: true

D Name: Alice, Age: 0, Active: true

💡 Hint

The nullish coalescing operator (??) returns the right side if the left is null or undefined.

The age is undefined, so the expression age ?? "unknown" evaluates to "unknown". The active is true, so it stays true.