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.

Practice

1.

What does the ? symbol mean when used in a tuple type like [string, number?] in TypeScript?

easy

A. It means the element is required and must always be present.

B. It marks the element as optional, so it may be missing.

C. It indicates the element can be any type.

D. It makes the element readonly and unchangeable.

Solution

1. Step 1: Understand the ? in tuple types

   The ? after a type in a tuple means that element is optional and can be omitted.

2. Step 2: Compare with other options

   Options B, C, and D describe different concepts unrelated to optional tuple elements.

3. Final Answer:

   It marks the element as optional, so it may be missing. -> Option B

4. Quick Check:

   Optional element = marked with ? [OK]

Hint: Optional tuple elements have ? after type, meaning may be missing [OK]

Common Mistakes:

• Thinking ? means the element is required
• Confusing ? with union types
• Assuming ? makes element readonly

2.

Which of the following is the correct syntax for a tuple with a required string and an optional number in TypeScript?

easy

A. [string, number?]

B. [string?, number]

C. [number?, string]

D. [string?, number?]

Solution

1. Step 1: Identify correct order and optional placement

   Optional elements must come after required ones. So string required first, then optional number.

2. Step 2: Check each option

   [string, number?] has required string then optional number. Others put optional before required or both optional incorrectly.

3. Final Answer:

   [string, number?] -> Option A

4. Quick Check:

   Required first, optional after = [string, number?] [OK]

Hint: Put optional elements after required ones in tuple [OK]

Common Mistakes:

• Placing optional element before required one
• Marking required element as optional
• Using wrong syntax like ? before type

3.

What will be the output of this TypeScript code?

type MyTuple = [string, number?];

const a: MyTuple = ['hello'];
const b: MyTuple = ['world', 42];

console.log(a.length, b.length);

medium

A. Error: missing element

B. 2 2

C. 1 2

D. 1 1

Solution

1. Step 1: Understand tuple with optional element

   Tuple [string, number?] means second element can be missing. So a has length 1, b has length 2.

2. Step 2: Check console.log output

   Logging a.length is 1, b.length is 2, so output is "1 2".

3. Final Answer:

   1 2 -> Option C

4. Quick Check:

   Optional element missing means shorter tuple length [OK]

Hint: Optional tuple elements can be omitted, affecting length [OK]

Common Mistakes:

• Assuming tuple length is fixed always
• Expecting error when optional element missing
• Confusing array length with tuple length

4.

Identify the error in this tuple type declaration:

type Data = [number?, string];

medium

A. The syntax for optional elements is incorrect.

B. Tuple cannot have optional elements.

C. Tuple elements must be of the same type.

D. Optional element cannot come before required element.

Solution

1. Step 1: Analyze tuple element order

   Optional elements must come after all required elements in tuples.

2. Step 2: Check given tuple

   Here, number? is optional but placed before required string, which is invalid.

3. Final Answer:

   Optional element cannot come before required element. -> Option D

4. Quick Check:

   Optional elements must be last in tuple [OK]

Hint: Optional tuple elements must be after required ones [OK]

Common Mistakes:

• Placing optional element before required one
• Thinking optional elements are not allowed
• Misusing ? syntax

5.

Given this tuple type with multiple optional elements:

type Config = [string, number?, boolean?];

Which of these assignments is invalid?

const c1: Config = ['mode'];
const c2: Config = ['mode', 10];
const c3: Config = ['mode', undefined, true];
const c4: Config = ['mode', true];

hard

A. const c4: Config = ['mode', true];

B. const c1: Config = ['mode'];

C. const c3: Config = ['mode', undefined, true];

D. const c2: Config = ['mode', 10];

Solution

1. Step 1: Understand tuple element types and order

   Tuple is [string, number?, boolean?]. The second element must be a number or omitted, third a boolean or omitted.

2. Step 2: Check each assignment

   • c1 has only required string - valid.
   • c2 has string and number - valid.
   • c3 has string, undefined (allowed for optional), and boolean - valid.
   • c4 has string and boolean in second position - invalid because second element must be number or omitted.

3. Final Answer:

   const c4: Config = ['mode', true]; -> Option A

4. Quick Check:

   Optional elements must match declared types in order [OK]

Hint: Optional elements must be correct type or omitted in order [OK]

Common Mistakes:

• Putting boolean in number position
• Using undefined incorrectly
• Ignoring element order in tuples