Optional elements in tuples in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a tuple with an optional second element.

Typescript

let tuple: [number, string[1]];

Drag options to blanks, or click blank then click option'

A?

B!

C:

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using a colon or semicolon instead of a question mark.

Forgetting to mark the element as optional.

The question mark ? marks the second element as optional in the tuple.

2fill in blank

medium

Complete the code to create a tuple type where the last element is optional and of type boolean.

Typescript

type MyTuple = [string, number, boolean[1]];

Drag options to blanks, or click blank then click option'

A?

B!

C:

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using exclamation mark or colon instead of question mark.

Placing the question mark before the type.

The ? after boolean marks the last element as optional in the tuple type.

3fill in blank

hard

Fix the error in the tuple type declaration to make the second element optional.

Typescript

let data: [string, number[1]];

Drag options to blanks, or click blank then click option'

A;

B!

C:

D?

Attempts:

3 left

💡 Hint

Common Mistakes

Using exclamation mark or colon instead of question mark.

Not placing the question mark immediately after the type.

Adding ? after number makes the second element optional.

4fill in blank

hard

Fill both blanks to declare a tuple with an optional second element of type string and an optional third element of type boolean.

Typescript

let tuple: [number, string[1], boolean[2]];

Drag options to blanks, or click blank then click option'

A?

B!

C:

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using exclamation marks or colons instead of question marks.

Marking only one element as optional.

Both the second and third elements are optional, so both have ? after their types.

5fill in blank

hard

Fill both blanks to create a tuple type with an optional first element of type string, a required second element of type number, and an optional third element of type boolean.

Typescript

type CustomTuple = [string[1], number, boolean[2]];

Drag options to blanks, or click blank then click option'

A?

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Marking the required element as optional.

Using exclamation marks instead of question marks.

The first and third elements are optional, so they have ?. The second element is required, so it has no symbol.

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