Fix Common TypeScript Compiler Errors

TypeScript compiler errors can look intimidating at first. A wall of red text with long type names and line references. But every error follows a consistent pattern: it tells you what went wrong, where, and often what the expected and actual types are.

This article covers the five most common error categories, what they mean, and how to fix TypeScript errors of each kind. You will see these errors frequently, so learning to read them quickly pays off every day.

"Type X is not assignable to type Y"

This is the most common error in TypeScript. It means you are trying to use a value where a different type is expected.

typescript

function greet(name: string) {
  return `Hello, ${name}`;
}
 
greet(42);

The compiler tells you exactly which type is wrong and what it expected instead. The error message names both the source type and the target type so you can compare them directly:

text

Argument of type 'number' is not assignable to parameter of type 'string'.

The fix depends on intent. If the value is wrong, pass the correct type. If the function should accept multiple types, change the parameter type to a union. For cases where you are certain of the runtime type and TypeScript cannot know, a type assertion works, but use it sparingly.

"Object is possibly undefined"

This error appears when strictNullChecks is enabled and you try to use a value that might be missing. It is most common with array methods like .find() and Map.get():

typescript

const users = [{ name: "Alice" }, { name: "Bob" }];
const user = users.find((u) => u.name === "Charlie");
console.log(user.name);

The compiler knows that .find() can return undefined when no element matches the predicate. It warns you before you dereference a potentially missing value. Here is the exact error it produces:

text

'user' is possibly 'undefined'.

The fix is to check for undefined before using the value. Use an if statement, optional chaining, or nullish coalescing. For a deep dive on this topic, see strictNullChecks in TypeScript.

"Cannot find module X or its corresponding type declarations"

This error means TypeScript cannot resolve an import path. Here is what it looks like for a package with no type declarations:

text

Cannot find module 'left-pad' or its corresponding type declarations.

It happens for three common reasons: a wrong import path, a package with no type declarations, or a .js import without allowJs enabled.

First, the path is wrong. Check that the relative path or package name is spelled correctly.

Second, the package you imported has no type declarations. Many npm packages do not ship their own types. The fix is to install community-maintained types from the DefinitelyTyped project. This adds type declarations for the package without changing the package itself:

bash

npm install --save-dev @types/package-name

If no types exist on DefinitelyTyped, create a small declaration file anywhere in your project so TypeScript stops treating the import as an error:

typescript

declare module "left-pad";

This is a minimal approach that gives you an untyped module whose default export is any. It removes the error without adding real type safety for that package.

Third, you are importing a .js file but have not enabled the allowJs option. Enable it in your tsconfig if you need to import JavaScript files alongside TypeScript.

"Property X does not exist on type Y"

You are accessing a property that the type definition does not include. This often means the type is too narrow or the code has a typo:

typescript

const element = document.querySelector(".my-class");
element.value = "hello";

The error tells you exactly what is wrong. The general Element type does not have a value property because only specific element types like HTMLInputElement do. The compiler shows which type it checked and which property was missing:

text

Property 'value' does not exist on type 'Element'.

Element is the general base type. The .value property only exists on more specific types like HTMLInputElement. The fix is to narrow the type. You can use a type assertion if you know the element type, or use a type guard with instanceof to narrow safely.

"Parameter X implicitly has an any type"

This error from noImplicitAny means TypeScript cannot figure out the type of a parameter and needs you to annotate it:

typescript

function calculate(x, y) {
  return x + y;
}

With noImplicitAny enabled, tsc checks every parameter independently and reports one error for each one it cannot infer a usable type for:

text

Parameter 'x' implicitly has an any type.
Parameter 'y' implicitly has an any type.

The fix is to add type annotations to every untyped parameter, matching the values the function actually receives. This is covered in detail in noImplicitAny in TypeScript.

How to read a TypeScript error effectively

Every error has the same structure. First, the file path and line number tell you where. Then the error category tells you what kind of problem it is. Finally, the detailed message shows the relevant types.

When you see "Type A is not assignable to type B," look at both A and B. The difference between them is the problem. When you see "Property X does not exist," look at the type Y. It tells you what TypeScript thinks the value is, which is often narrower than what you expected.

The most common fixes across all error types are adding a type annotation, adding a null check, installing type declarations, or narrowing a union type before accessing specific properties. Once you learn these four patterns, you can resolve most errors in seconds.