Interface declaration syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using interface?

Consider this TypeScript code snippet. What will be logged to the console?

Typescript

interface Person {
  name: string;
  age: number;
}

const user: Person = { name: "Alice", age: 30 };
console.log(user.name + " is " + user.age + " years old.");

A TypeError at runtime

B "Alice is 30 years old."

C "user.name is 30 years old."

D "Alice is age years old."

💡 Hint

Look at how the user object is created and how properties are accessed.

The interface Person defines the shape of the object. The user variable matches this shape. Accessing user.name and user.age prints the expected string.

📝 Syntax

intermediate

Which option correctly declares an interface with optional properties?

Which of the following interface declarations correctly defines an interface with an optional property email?

A interface User { name: string; email?: string; }

B interface User { name: string; email: string?; }

C interface User { name: string; optional email: string; }

D interface User { name: string; email: optional string; }

💡 Hint

In TypeScript, optional properties use a question mark after the property name.

Option A uses the correct syntax email?: string; to mark email as optional. Other options are invalid syntax.

🔧 Debug

advanced

What error does this interface declaration cause?

Examine the following TypeScript code. What error will the compiler report?

Typescript

interface Product {
  id: number;
  name: string;
  id: string;
}

A Property 'id' must be a string.

B Missing semicolon after 'name' property.

C Duplicate identifier 'id'.

D No error, code compiles fine.

💡 Hint

Check if property names can be repeated in an interface.

Interfaces cannot have duplicate property names. Declaring 'id' twice causes a duplicate identifier error.

🧠 Conceptual

advanced

What is the result of extending interfaces with conflicting property types?

Given these interfaces, what will happen if you declare a variable of type Combined?

interface A { value: string; }
interface B { value: number; }
interface Combined extends A, B {}

A TypeScript will report a conflict error for property 'value'.

B The property 'value' will be of type 'string | number'.

C The property 'value' will be of type 'any'.

D No error; 'value' will be of type 'string'.

💡 Hint

Think about how TypeScript handles interface inheritance with conflicting property types.

When interfaces extend others with the same property but different types, TypeScript reports a conflict error because it cannot unify the types.

🚀 Application

expert

How many properties does this interface have after merging declarations?

Consider these two interface declarations in the same scope:

interface Config {
  host: string;
}
interface Config {
  port: number;
}

How many properties does the merged Config interface have?

A 1

B 3

C 0

D 2

💡 Hint

TypeScript allows interface merging. Properties from both declarations combine.

TypeScript merges interface declarations with the same name by combining their properties. Here, Config has both host and port.