Interface declaration syntax in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an interface named Person.

Typescript

interface [1] {
  name: string;
  age: number;
}

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

APerson

Bperson

Cclass

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'person' instead of 'Person'.

Using 'class' or 'type' instead of an interface name.

The keyword interface is followed by the interface name, which should be Person with a capital P by convention.

2fill in blank

medium

Complete the code to add an optional property 'email' to the interface.

Typescript

interface User {
  id: number;
  username: string;
  [1]?: string;
}

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

Aemail?

Bemail!

Cemail

Demail:

Attempts:

3 left

💡 Hint

Common Mistakes

Putting '?' inside the property name like 'email?'.

Using 'email!' which is not valid syntax here.

To declare an optional property in an interface, add a question mark ? after the property name. Here, the property name is email, and the question mark is placed after it in the code.

3fill in blank

hard

Fix the error in the interface declaration by completing the code.

Typescript

interface Product {
  id: number;
  name: string[1]
  price: number;
}

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

A,

B.

C:

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas instead of semicolons.

Forgetting to put any punctuation at the end of property lines.

In TypeScript interfaces, each property declaration must end with a semicolon ;. The missing semicolon after name: string causes a syntax error.

4fill in blank

hard

Fill both blanks to declare an interface with a method that returns a string.

Typescript

interface Logger {
  log[1]: [2];
}

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

A()

Bstring

Cnumber

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting parentheses after method name.

Using incorrect return types like number or empty braces.

The method log needs parentheses () to show it is a function, and the return type is string.

5fill in blank

hard

Fill all three blanks to declare an interface with an index signature for string keys and number values.

Typescript

interface Scores {
  [[1]: [2]]: [3];
}

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

Akey

Bstring

Cnumber

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid variable names or types inside the brackets.

Mixing up key and value types.

An index signature uses a variable name (like key) with a type (here string) inside square brackets, followed by the value type (number) after the colon.