Search⌘ K
AI Features
Home
Courses
Advanced TypeScript Masterclass

Debugging Errors: Type Assignability

Explore TypeScript type assignability errors, focusing on debugging and interpreting complex error messages. Understand how to identify mismatched types including deeply nested properties to resolve common compile-time issues effectively.

We'll cover the following...

Overview

The most common TypeScript error is related to type assignability. We get them whenever we want to use a value of some type when a different type is required. These are the bread and butter of TypeScript. The main goal of the type checker is to ensure that you provide values with correct types wherever required.

Most of the time, type assignability errors are straightforward. The error message says that the type of the right-hand side of the assignment is not assignable to the type of the left-hand side.

TypeScript 3.3.4
// 🔴 Type '5' is not assignable to type 'string'.
const foo: string = 5;

Deeply nested properties #

However, these errors can get tricky, especially with type incompatibility of deeply nested properties.

TypeScript 3.3.4
export interface Foo {
    a: {
        b: {
            c: {
                d: number;
            }
        }
    }
}
function woooot(foo: Foo) {}
const foo = {
    a: {
        b: {
            c: {
                d: 'abc',
            }
        }
    }
};
 // 🔴 Error!
woooot(foo);

Let’s ...