Covariance and contravariance in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Covariance in TypeScript arrays

What is the output of this TypeScript code snippet?

Typescript

class Animal { name: string = 'animal'; }
class Dog extends Animal { bark() { return 'woof'; } }

let dogs: Dog[] = [new Dog()];
let animals: Animal[] = dogs;
animals.push(new Animal());
console.log(dogs.length);

A Compilation error

B 1

C 0

D 2

💡 Hint

Arrays in TypeScript are covariant, so assigning Dog[] to Animal[] is allowed.

The array dogs is assigned to animals (Animal[]). Pushing a new Animal into animals also affects dogs because they reference the same array. So dogs.length becomes 2.

❓ Predict Output

intermediate

Contravariance in function parameters

What is the output of this TypeScript code?

Typescript

class Animal { name = 'animal'; }
class Dog extends Animal { bark() { return 'woof'; } }

function feedAnimal(feed: (a: Animal) => void) {
  feed(new Animal());
}

function feedDog(dog: Dog) {
  console.log('Feeding dog:', dog.name);
}

feedAnimal(feedDog);

A Compilation error

B Runtime error

C Feeding dog: animal

D No output

💡 Hint

Function parameter types are contravariant in TypeScript.

feedDog expects a Dog parameter, but feedAnimal calls feed with an Animal. Passing feedDog to feedAnimal is not allowed because Dog is not a supertype of Animal.

🔧 Debug

advanced

Fix the type error with function assignment

Which option correctly fixes the type error in this code snippet?

Typescript

class Animal { name = 'animal'; }
class Dog extends Animal { bark() { return 'woof'; } }

let feedAnimal: (a: Animal) => void;
let feedDog: (d: Dog) => void = (d) => console.log(d.bark());

feedAnimal = feedDog; // Error here

A Change feedDog type to (d: Animal) => void

B Change feedAnimal type to (a: Dog) => void

C Use type assertion: feedAnimal = feedDog as (a: Animal) => void

D Swap the assignment: feedDog = feedAnimal

💡 Hint

Function parameter types must be contravariant for assignment.

Assigning feedDog to feedAnimal requires feedDog to accept a supertype of Animal, so changing feedDog to accept Animal fixes the error.

❓ Predict Output

advanced

Covariance with readonly arrays

What is the output of this TypeScript code?

Typescript

class Animal { name = 'animal'; }
class Dog extends Animal { bark() { return 'woof'; } }

let dogs: ReadonlyArray<Dog> = [new Dog()];
let animals: ReadonlyArray<Animal> = dogs;
console.log(animals.length);

A Compilation error

B 1

C 0

D Runtime error

💡 Hint

ReadonlyArray is covariant in TypeScript.

ReadonlyArray can be assigned to ReadonlyArray because no mutation is allowed, so covariance is safe.

❓ Predict Output

expert

Complex variance with generics and function types

What is the output of this TypeScript code?

Typescript

class Animal { name = 'animal'; }
class Dog extends Animal { bark() { return 'woof'; } }

interface Processor<T> {
  process: (input: T) => T;
}

let dogProcessor: Processor<Dog> = {
  process: (d) => { console.log(d.bark()); return d; }
};

let animalProcessor: Processor<Animal> = dogProcessor;

const result = animalProcessor.process(new Animal());
console.log(result.name);

A animal

B woof\nanimal

C Compilation error

D Runtime error

💡 Hint

Generic interfaces with function properties are invariant by default.

Processor is invariant in T because process uses T as both input and output. Assigning Processor to Processor is not allowed, causing a compilation error.