Interface vs type alias decision in Typescript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an interface named Person with a name property.

Typescript

interface Person [1] {
  name: string;
}

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

A[]

B()

C{}

D<>

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses or angle brackets instead of curly braces.

The correct syntax to declare an interface body is with curly braces {}.

2fill in blank

medium

Complete the code to declare a type alias named Point with x and y as numbers.

Typescript

type Point = [1] {
  x: number;
  y: number;
};

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

A{

B(

Cinterface

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'interface' keyword or parentheses instead of curly braces.

Type aliases use an equals sign followed by an object type enclosed in curly braces {}.

3fill in blank

hard

Fix the error in extending an interface named Animal with a new interface Dog.

Typescript

interface Dog [1] Animal {
  breed: string;
}

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

Aimplements

Buses

Cinherits

Dextends

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' or 'inherits' which are incorrect for interfaces.

Interfaces extend other interfaces using the extends keyword.

4fill in blank

hard

Fill both blanks to create a type alias named ID that can be a string or a number.

Typescript

type ID = [1] | [2];

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

Astring

Bnumber

Cboolean

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using types like boolean or object which are not valid for this ID.

The type alias uses a union type with string or number separated by a pipe |.

5fill in blank

hard

Complete the code to declare an interface named Vehicle with optional wheels and readonly brand properties.

Typescript

interface Vehicle {
   wheels?: number;
  [1] brand: string;
  drive(): void;
}

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

Areadonly

Boptional

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'optional' keyword which does not exist in TypeScript.

Forgetting the question mark for optional properties.

The wheels property is optional using ? without extra keywords. The brand property is readonly using the readonly keyword. The drive method has no modifier.