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.

Practice

1. What is the purpose of an interface in TypeScript?

easy

A. To import external modules

B. To execute code conditionally

C. To define the shape of an object with properties and methods

D. To create a new variable

Solution

1. Step 1: Understand the role of interfaces

   Interfaces describe how an object should look by specifying its properties and methods.

2. Step 2: Compare with other options

   Options A, B, and C describe unrelated concepts like control flow, variables, and modules.

3. Final Answer:

   To define the shape of an object with properties and methods -> Option C

4. Quick Check:

   Interface = Object shape definition [OK]

Hint: Interfaces define object structure, not code execution [OK]

Common Mistakes:

• Confusing interfaces with classes
• Thinking interfaces run code
• Mixing interfaces with variables

2. Which of the following is the correct syntax to declare an interface named Person with a string property name?

easy

A. interface Person { name = string; }

B. interface Person = { name: string; }

C. interface Person (name: string);

D. interface Person { name: string; }

Solution

1. Step 1: Recall interface declaration syntax

   Interfaces use the keyword interface, followed by the name and curly braces with property declarations using colon syntax.

2. Step 2: Check each option

   interface Person { name: string; } uses correct syntax: interface Person { name: string; }. Options B, C, and D have syntax errors like using equals, parentheses, or assignment instead of colon.

3. Final Answer:

   interface Person { name: string; } -> Option D

4. Quick Check:

   Interface syntax uses colon for properties [OK]

Hint: Use colon, not equals, to declare properties in interfaces [OK]

Common Mistakes:

• Using '=' instead of ':' for properties
• Using parentheses instead of braces
• Assigning values inside interface

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

interface Car {
  brand: string;
  year: number;
}

const myCar: Car = { brand: "Toyota", year: 2020 };
console.log(myCar.brand + " " + myCar.year);

medium

A. Toyota 2020

B. undefined 2020

C. Error: Property 'brand' missing

D. Toyota undefined

Solution

1. Step 1: Understand the interface and object assignment

   The interface Car requires brand (string) and year (number). The object myCar correctly provides both.

2. Step 2: Analyze the console.log output

   Concatenating myCar.brand and myCar.year with a space results in Toyota 2020.

3. Final Answer:

   Toyota 2020 -> Option A

4. Quick Check:

   Correct object matches interface = "Toyota 2020" [OK]

Hint: Check if object matches interface properties exactly [OK]

Common Mistakes:

• Missing required properties in object
• Confusing property names
• Expecting runtime errors for correct code

4. Identify the error in this interface declaration and object assignment:

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

const user: User = { id: 1 };

medium

A. Interface name should be lowercase

B. Missing property 'name' in object assigned to User

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

D. Object should use parentheses instead of braces

Solution

1. Step 1: Check interface properties

   The interface User requires both id (number) and name (string).

2. Step 2: Check object assignment

   The object assigned to user only has id, missing the required name property, causing a TypeScript error.

3. Final Answer:

   Missing property 'name' in object assigned to User -> Option B

4. Quick Check:

   All interface properties must be present in object [OK]

Hint: All interface properties must appear in assigned objects [OK]

Common Mistakes:

• Ignoring missing required properties
• Thinking interface names must be lowercase
• Confusing property types

5. Given the interface declaration below, which object correctly implements Product with an optional description property?

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

hard

A. { id: 101, name: "Book" }

B. { id: 101, description: "A book" }

C. { name: "Book", description: "A book" }

D. { id: "101", name: "Book" }

Solution

1. Step 1: Understand optional properties in interfaces

   The description property is optional (marked with ?), so it can be omitted.

2. Step 2: Check each object against the interface

   { id: 101, name: "Book" } has required id (number) and name (string), no description, which is valid.
   { id: 101, description: "A book" } misses required name.
   { name: "Book", description: "A book" } misses required id.
   { id: "101", name: "Book" } has id as string instead of number.

3. Final Answer:

   { id: 101, name: "Book" } -> Option A

4. Quick Check:

   Optional properties can be omitted safely [OK]

Hint: Optional properties can be left out without error [OK]

Common Mistakes:

• Omitting required properties
• Using wrong types for properties
• Confusing optional with required