Type compatibility with classes in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of class instance assignment compatibility

Consider these two classes and the assignment below. What will be the output when running this code?

Typescript

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  breed: string;
  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }
}

let animal: Animal = new Dog('Buddy', 'Golden Retriever');
console.log(animal.name);

A Error: Property 'name' does not exist on type 'Animal'

B undefined

C "Golden Retriever"

D "Buddy"

💡 Hint

Think about inheritance and what properties are available on the base class reference.

The variable animal is typed as Animal but holds an instance of Dog. Since Dog extends Animal, it has the name property. So, animal.name outputs "Buddy".

❓ Predict Output

intermediate

Assigning incompatible class instances

What error will this TypeScript code produce?

Typescript

class Car {
  wheels: number = 4;
}

class Boat {
  sails: number = 2;
}

let vehicle: Car = new Boat();

A No error, assignment is allowed.

B Type 'Boat' is not assignable to type 'Car'. Property 'wheels' is missing in type 'Boat'.

C Runtime error: Cannot read property 'wheels' of undefined.

D Type 'Car' is not assignable to type 'Boat'.

💡 Hint

Check if the properties of the assigned object match the target type.

TypeScript checks structural compatibility. Boat does not have the wheels property required by Car. So, the assignment causes a type error.

🔧 Debug

advanced

Why does this class assignment cause an error?

Given these classes, why does the assignment cause a TypeScript error? Identify the reason.

Typescript

class Person {
  private id: number;
  constructor(id: number) {
    this.id = id;
  }
}

class Employee {
  private id: number;
  constructor(id: number) {
    this.id = id;
  }
}

let p: Person = new Employee(123);

A Because private members with the same name but declared in different classes make the types incompatible.

B Because the classes have different constructors.

C Because TypeScript does not allow assignment between any classes.

D Because the classes have different property types.

💡 Hint

Check how private members affect type compatibility in TypeScript.

In TypeScript, classes with private or protected members are only compatible if they originate from the same declaration. Here, Person and Employee have private id members declared separately, so they are incompatible.

📝 Syntax

advanced

Which class assignment is valid in TypeScript?

Given these classes, which assignment will NOT cause a TypeScript error?

Typescript

class Alpha {
  x: number = 1;
}

class Beta extends Alpha {
  y: number = 2;
}

class Gamma {
  y: number = 2;
}

let a: Alpha;
let b: Beta;
let g: Gamma;

A a = b;

B b = a;

C g = a;

D a = g;

💡 Hint

Remember that a subclass instance can be assigned to a base class variable.

Since Beta extends Alpha, an instance of Beta can be assigned to a variable of type Alpha. The reverse is not true. Gamma is unrelated structurally to Alpha and Beta.

🚀 Application

expert

Predict the output of method compatibility in class assignment

What will be the output of this TypeScript code when executed?

Typescript

class Base {
  greet(): string {
    return "Hello from Base";
  }
}

class Derived {
  greet(): string {
    return "Hello from Derived";
  }
}

let base: Base = new Derived();
console.log(base.greet());

A "Hello from Base"

B Type error: Type 'Derived' is not assignable to type 'Base'.

C "Hello from Derived"

D Runtime error: base.greet is not a function.

💡 Hint

Think about method overriding and how TypeScript handles structural typing for classes.

TypeScript uses structural typing. Derived has the same method greet as Base. So, Derived is compatible with Base. At runtime, the greet method of Derived is called, printing "Hello from Derived".