Covariance and contravariance in Typescript - Step-by-Step Execution

Concept Flow - Covariance and contravariance

Start with types

↓

Check assignment compatibility

↓

Covariance: output types compatible?

Yes→Allow assignment

↓

Error

↓

Contravariance: input types compatible?

Yes→Allow assignment

No↓

Error

This flow shows how TypeScript checks if one type can be assigned to another by comparing output types (covariance) and input types (contravariance).

Execution Sample

Typescript

interface Animal { name: string }
interface Dog extends Animal { bark(): void }

let dogFunc: (d: Dog) => Dog;
let animalFunc: (a: Animal) => Animal;

animalFunc = dogFunc; // Contravariance check

dogFunc = animalFunc; // Covariance check

This code tests assigning functions with parameters and return types to see covariance and contravariance in action.

Execution Table

Step	Action	Input Type Check	Output Type Check	Assignment Allowed	Reason
1	Assign dogFunc to animalFunc	Dog parameter to Animal parameter?	Dog return to Animal return?	Yes	Parameter types must be contravariant (Animal assignable to Dog), and Dog is assignable to Animal for return types
2	Assign animalFunc to dogFunc	Animal parameter to Dog parameter?	Animal return to Dog return?	No	Parameter types must be contravariant (Dog not assignable to Animal), or return types must be covariant (Animal not assignable to Dog)
3	Assign compatible function types	Parameter types contravariant	Return types covariant	Yes	Both input and output types satisfy variance rules
4	End	-	-	-	No more assignments to check

💡 Assignments stop when type compatibility rules fail or all checks pass

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
dogFunc	function (Dog) => Dog	unchanged	unchanged	assigned animalFunc if compatible	final assigned value
animalFunc	function (Animal) => Animal	assigned dogFunc	unchanged	unchanged	final assigned value

Key Moments - 2 Insights

Why can't we assign a function with parameter type Dog to a variable expecting a function with parameter type Animal?

Because function parameters are contravariant, the assigned function must accept all inputs the variable expects. A Dog parameter is more specific than Animal, so it can't accept all Animals. See execution_table step 2.

Why can't we assign a function returning Animal to a variable expecting a function returning Dog?

Because return types are covariant, the assigned function must return a type compatible with the variable's expected return. Animal is more general than Dog, so it may return something missing Dog's features. See execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution table, at which step is the assignment rejected due to parameter type incompatibility?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Check the 'Input Type Check' and 'Assignment Allowed' columns in execution_table rows

According to variable_tracker, what is the state of dogFunc after step 2?

A Unchanged

B Undefined

C Assigned animalFunc

D Null

💡 Hint

Look at dogFunc row and After Step 2 column in variable_tracker

If we change Dog to extend Animal with no extra methods, how would step 2's output type check change?

A No change, assignment rejected

B Assignment still rejected due to parameter types

C Assignment allowed because return types match

D Assignment allowed due to contravariance

💡 Hint

Consider covariance rules for return types in execution_table step 2

Concept Snapshot

Covariance and contravariance control function type assignments.
- Covariance: output (return) types can be more specific.
- Contravariance: input (parameter) types can be more general.
- TypeScript enforces these rules to keep assignments safe.
- Function parameters are contravariant; returns are covariant.
- Violations cause assignment errors.

Full Transcript

This visual execution shows how TypeScript checks function type assignments using covariance and contravariance. It starts by comparing input parameter types contravariantly and output return types covariantly. The execution table traces assignment attempts step-by-step, showing when assignments fail due to incompatible parameter or return types. The variable tracker records how function variables change or stay the same after each step. Key moments clarify why parameter types are contravariant and return types covariant, helping beginners avoid confusion. The quiz tests understanding by referencing the execution table and variable tracker. The snapshot summarizes the core rules for safe function type assignments in TypeScript.