Object type annotation inline in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of inline object type annotation with optional property

What is the output of this TypeScript code when compiled and run with Node.js (ignoring type errors)?

Typescript

function greet(user: { name: string; age?: number }) {
  return `Hello, ${user.name}` + (user.age !== undefined ? `, age ${user.age}` : '');
}

console.log(greet({ name: 'Alice' }));

A "Hello, Alice, age 0"

B "Hello, Alice, age undefined"

C TypeError at runtime

D "Hello, Alice"

💡 Hint

Look at how the optional property age is checked before use.

The function checks if user.age is truthy before adding it to the string. Since age is undefined, it is skipped, so output is "Hello, Alice".

❓ Predict Output

intermediate

Output of inline object type annotation with nested object

What is the output of this TypeScript code?

Typescript

function getFullName(user: { name: { first: string; last: string } }) {
  return `${user.name.first} ${user.name.last}`;
}

console.log(getFullName({ name: { first: 'John', last: 'Doe' } }));

A "John Doe"

B "[object Object]"

C TypeError: Cannot read property 'first' of undefined

D "John undefined"

💡 Hint

Check how nested object properties are accessed.

The function accesses first and last properties correctly from the nested name object, so it returns "John Doe".

🔧 Debug

advanced

Identify the error in inline object type annotation

What error will this TypeScript code produce?

Typescript

function printUser(user: { name: string; age: number }) {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}

printUser({ name: 'Bob' });

A Error: Property 'age' is missing in type '{ name: string; }' but required in type '{ name: string; age: number; }'.

B Runtime error: Cannot read property 'age' of undefined

C No error, prints: Name: Bob, Age: undefined

D SyntaxError: Unexpected token

💡 Hint

Check if all required properties are provided in the argument.

The age property is required but missing in the argument object, so TypeScript reports a compile-time error.

❓ Predict Output

advanced

Output of inline object type annotation with readonly property

What is the output of this TypeScript code?

Typescript

function updateUser(user: { readonly id: number; name: string }) {
  // user.id = 10; // Uncommenting this line causes error
  return `User ${user.id}: ${user.name}`;
}

console.log(updateUser({ id: 5, name: 'Eve' }));

A "User undefined: Eve"

B TypeError: Cannot assign to read only property 'id'

C "User 5: Eve"

D SyntaxError: Unexpected token

💡 Hint

Readonly means the property cannot be changed after creation.

The code does not try to change the readonly property, so it prints "User 5: Eve" without error.

❓ Predict Output

expert

Output of inline object type annotation with index signature

What is the output of this TypeScript code?

Typescript

function sumScores(scores: { [key: string]: number }) {
  let total = 0;
  for (const key in scores) {
    total += scores[key];
  }
  return total;
}

console.log(sumScores({ math: 10, science: 20, english: 15 }));

A TypeError: scores[key] is not a number

B 45

C NaN

D SyntaxError: Unexpected token

💡 Hint

Index signature allows any string key with number values.

The function sums all values in the object and returns 45.

Practice

1. What does inline object type annotation in TypeScript do?
let user: { name: string; age: number };

easy

A. It defines the shape of the object directly where it is used.

B. It creates a new class named user.

C. It converts the object to a JSON string.

D. It declares a function that returns an object.

Solution

1. Step 1: Understand inline object type annotation

   Inline object type annotation specifies the properties and their types directly in the variable declaration.

2. Step 2: Analyze the example

   The example { name: string; age: number } tells TypeScript that user must have a string name and a number age.

3. Final Answer:

   It defines the shape of the object directly where it is used. -> Option A

4. Quick Check:

   Inline type annotation = direct object shape [OK]

Hint: Inline means type right where variable is declared [OK]

Common Mistakes:

• Thinking it creates a class
• Confusing with JSON conversion
• Assuming it declares a function

2. Which of the following is the correct syntax for inline object type annotation in TypeScript?

easy

A. let data: (id: number, title: string) = { id: 1, title: 'Book' };

B. let data = { id: number, title: string } = { id: 1, title: 'Book' };

C. let data: { id: number; title: string } = { id: 1, title: 'Book' };

D. let data: [number, string] = { id: 1, title: 'Book' };

Solution

1. Step 1: Identify correct inline object type syntax

   Inline object type annotation uses curly braces with property names and types, like { id: number; title: string }.

2. Step 2: Check each option

   let data: { id: number; title: string } = { id: 1, title: 'Book' }; correctly uses this syntax and assigns a matching object. Options A, B, and D use incorrect syntax or types.

3. Final Answer:

   let data: { id: number; title: string } = { id: 1, title: 'Book' }; -> Option C

4. Quick Check:

   Curly braces with property types = correct syntax [OK]

Hint: Use curly braces with property: type pairs [OK]

Common Mistakes:

• Using parentheses instead of braces
• Assigning types inside object literal
• Confusing arrays with objects

3. What will be the output of this TypeScript code?

function printUser(user: { name: string; age: number }) {
  console.log(`${user.name} is ${user.age} years old.`);
}
printUser({ name: 'Alice', age: 30 });

medium

A. Alice is 30 years old.

B. Error: Missing property age

C. Alice is undefined years old.

D. Error: Type mismatch in function argument

Solution

1. Step 1: Understand the function parameter type

   The function expects an object with name as string and age as number.

2. Step 2: Check the argument passed

   The argument { name: 'Alice', age: 30 } matches the expected type exactly.

3. Final Answer:

   Alice is 30 years old. -> Option A

4. Quick Check:

   Matching object type = correct output [OK]

Hint: Match object shape exactly to avoid errors [OK]

Common Mistakes:

• Passing missing or extra properties
• Using wrong types for properties
• Ignoring inline type annotation

4. Identify the error in this TypeScript code snippet:

let product: { id: number; name: string } = { id: 101, name: 'Pen', price: 5 };

medium

A. Missing semicolon after object declaration.

B. Extra property 'price' not allowed in inline type annotation.

C. Property 'id' should be a string, not number.

D. Object must be assigned to a function, not a variable.

Solution

1. Step 1: Check the declared type

   The type annotation allows only id and name properties.

2. Step 2: Compare with assigned object

   The object has an extra property price which is not declared in the type, causing an error.

3. Final Answer:

   Extra property 'price' not allowed in inline type annotation. -> Option B

4. Quick Check:

   Extra properties cause errors in inline types [OK]

Hint: Only use declared properties in inline object types [OK]

Common Mistakes:

• Adding extra properties not in type
• Ignoring TypeScript error messages
• Confusing semicolon placement

5. You want to write a function that accepts an object with a string title and an optional number year. Which inline type annotation is correct?

hard

A. function showBook(book: { title: string; year: number | undefined }) { console.log(book.title); }

B. function showBook(book: { title: string | number; year: number }) { console.log(book.title); }

C. function showBook(book: { title?: string; year: number }) { console.log(book.title); }

D. function showBook(book: { title: string; year?: number }) { console.log(book.title); }

Solution

1. Step 1: Understand optional properties in inline types

   Optional properties are marked with a question mark ? after the property name.

2. Step 2: Analyze each option

   function showBook(book: { title: string; year?: number }) { console.log(book.title); } correctly marks year as optional with year?: number. Other options either make title optional or use incorrect types.

3. Final Answer:

   function showBook(book: { title: string; year?: number }) { console.log(book.title); } -> Option D

4. Quick Check:

   Optional property uses ? after name [OK]

Hint: Use ? after property name for optional fields [OK]

Common Mistakes:

• Making required properties optional
• Using union types incorrectly
• Confusing optional with undefined type