Reading TypeScript Errors

It, sometimes, can be a little hard to understand Typescript’s errors. They can be a bit verbose and not that straight forward, but after you get used to them, the errors become less confusing and easier to read.

I often see developers that ignore the error message and just try to figure out what is wrong by re-reading the code. It might be a bit hard to follow the error messaged at first, but you should still try to understand what they are saying, even if that means taking them apart and reading sentence by sentence trying to identify what how it maps to what you are doing on your code. The more you do it the better you get and the more useful the error messages will become to you. I hope this short description of some of the ones I struggled a bit with will be helpful to you as well.

Type ‘x’ is not assignable to type ‘y’

This is an issue with

type compatibility

Type Compatibility And Type Casting

Type compatibility

In TypeScript, two types are considered compatible if they have the same structure. This means that, for two types to be compatible, they must have the same properties with the same names and types.

For example, if you have the following two types:

interface Person {
  name: string;
  age: number;
}
interface Employee {
  name: string;
  age: number;
  salary: number;
}

These two types are considered compatible because they both have the same name and age properties with the same types. This means that you can assign a value of type Person to a variable of type Employee and vice versa.

On the other hand, if you have the following two types:

interface Person {
  name: string;
  age: number;
}
interface Employee {
  name: string;
  salary: number;
}

These two types are not considered compatible because they do not have the same structure. In this case, the Employee type is missing the age property that is present in the Person type. This means that you cannot assign a value of type Person to a variable of Employee , but you can still assign a value of type Employee to a variable of type Person because the Employee type has all the properties of the Person type.

In summary, TypeScript’s type compatibility is based on the structure of the types, and two types are considered compatible if they have the same properties with the same names and types.

Type Casting

Type casting is a way to convert a value from one type to another. This is useful when you know that a value has a certain type, but TypeScript is unable to infer it.

For example, if you have the following code:

let someValue: any = "Hello, world!";
let strLength: number = (someValue as string).length;

In this code, someValue is declared as type any , which means that it can hold a value of any type. However, you know that someValue contains a string value, so you want to use the string method length to get the length of the string.

To do this, you can use type casting to tell TypeScript that someValue is actually a string. This is done by using the as keyword before the someValue variable. This tells TypeScript to treat someValue as a string instead of an any type.

The parentheses around someValue as string are necessary because the . operator has a higher precedence than the as keyword. Without the parentheses, the code would be interpreted as (someValue as string.length) , which is not valid. The parentheses ensure that the as keyword is applied to the someValue variable before the . operator is applied to the result.

Overall, type casting in TypeScript allows you to convert a value from one type to another when TypeScript is unable to infer the correct type. This is done using the as keyword and parentheses to ensure that the type casting is applied to the correct value.

. You can follow the link for a better explanation, but check your code and make sure the variable you are assigning or parameter you are passing is compatible with what is expected. They can be of different types, but those types need to have a signature that matches with each others requirements.

Property ‘x’ does not exist on type ‘y’

This error occurs when you try to access a property that does no exist on a given object type. This can happen when you misspell a property name or when the object doesn’t have that property. Often you have the wrong object or you are not deep enough on it, such as when parsing an API response where you though you could response.someProperty when you actually need to response.data.someProperty.

Argument of type ‘x’ is not assignable to parameter of type ‘y’

This one occurs when you pass an argument of the wrong type to a function. This can happen when you pass a string to a function that expects a number or pass an object that doesn’t match the expected interface.

Cannot redeclare block-scoped variable ‘x’

Kinda straight-frward really, you are trying to declare a variable that has already been declared. This can happen when you declare a variable twice within the same function or module.

Module ‘“x”’ has no exported member ‘y’

This happens when you try to import something out of a module and it’s not there. This can happen when you misspell what you are trying to import or when you forgot to add the export keyword to make it accessible.

Property ‘x’ is missing in type ‘y’

This error occurs when you try to assign an object that does not match the expected interface. This can happen when you forget to include a required property or when you include an extra property that doesn’t exist in the interface.

Function lacks ending return statement and return type does not include ‘undefined’

When a function does not have a return statement or when the return type does not include ‘undefined’. This can happen when you forget to add a return statement or when the function should return a value but doesn’t. Check both that you do have a return statement and that it matches the return type you declared for the function. Sometimes you have an if that means your function is not returning a value in every possible outcome.