Type compatibility with classes in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a class named Person.

Typescript

class [1] {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

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

AAnimal

BUser

CEmployee

DPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different class name than Person.

Forgetting to capitalize the class name.

The class is named Person as required.

2fill in blank

medium

Complete the code to create an instance of the class Person.

Typescript

const person = new [1]('Alice');

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

APerson

BAnimal

CUser

DEmployee

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name that does not exist.

Forgetting to use the new keyword.

The instance is created from the Person class.

3fill in blank

hard

Fix the error in the assignment by choosing the correct class type.

Typescript

let p: Person;
p = new [1]('Bob');

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

AAnimal

BPerson

CUser

DEmployee

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning an instance of a different class to a variable typed as Person.

Using a class name that does not match the variable type.

The variable p is of type Person, so the instance must be created from the Person class.

4fill in blank

hard

Fill both blanks to create a compatible assignment between classes.

Typescript

class [1] {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let employee: [2];
employee = new Employee('Eve');

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

AEmployee

BPerson

CUser

DAnimal

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same class name for both declaration and variable type.

Assigning incompatible types.

The class Employee extends Person compatibility. The variable employee is typed as Person to allow assignment of an Employee instance.

5fill in blank

hard

Fill all three blanks to complete the code demonstrating type compatibility with classes.

Typescript

class [1] {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class [2] extends [3] {
  department: string;
  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
}

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

APerson

BEmployee

DUser

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up base and derived class names.

Using unrelated class names.

The base class is Person. The derived class is Employee which extends Person. This shows type compatibility through inheritance.