Ad Space — Top Banner

TS2304

TypeScript Programming Language

Severity: Minor

What Does This Error Mean?

TypeScript error TS2304 means your code uses a name — a variable, function, class, or type — that TypeScript cannot find. This is TypeScript's version of an 'undefined variable' error, but checked at compile time before your code ever runs. The name may not be declared, the wrong file may be missing, or a type definition package may need to be installed. Fix it by declaring the missing name, installing the right type definitions, or adding a reference to the file that contains it.

Affected Models

  • TypeScript 1.0 and later
  • All TypeScript versions
  • tsc compiler, ts-node, webpack, Vite, Next.js

Common Causes

  • Using a variable or function that was never declared in scope
  • Referencing a global browser API (like document or window) without the 'dom' lib in tsconfig.json
  • Using a type or interface from a package without installing its @types definition file
  • Misspelling a variable, function, or type name
  • Using a name from a module without importing it at the top of the file

How to Fix It

  1. Read the error to find the exact name TypeScript cannot find. Check for typos, especially capitalization differences.

    TypeScript is case-sensitive. MyComponent and myComponent are different names.

  2. If the name is from another module, add an import at the top of your file: import { MyClass } from './my-module';

    Your IDE (VS Code) will often suggest the correct import automatically. Press Ctrl+. on the red-underlined name.

  3. If the error is about a browser global like document, window, or HTMLElement, add 'dom' to the lib array in tsconfig.json: "lib": ["es6", "dom"]

    The 'dom' library tells TypeScript that your code runs in a browser and has access to browser APIs.

  4. If the name comes from an npm package, install its type definitions: npm install --save-dev @types/package-name

    For example, for lodash: npm install --save-dev @types/lodash. Many packages now include types built-in and do not need @types.

  5. If the name is a global variable declared elsewhere (like a config injected by a build tool), declare it in a .d.ts file: declare const MY_VAR: string;

    Create a file like global.d.ts and add your declare statements there. TypeScript will pick it up automatically.

When to Call a Professional

TS2304 is always a compile-time error. TypeScript will not produce output until it is resolved. The error message includes the name that could not be found — start there. Most cases are quick fixes: a missing import, a missing @types package, or a typo.

Frequently Asked Questions

Why does TypeScript check names at compile time when JavaScript does not?

JavaScript only finds undefined variable errors when that specific line runs, which might be after a user interaction. TypeScript catches these errors before the code ever runs, so you find the bug during development instead of production. This is one of the main reasons teams adopt TypeScript — fewer runtime surprises.

What is a @types package and do I always need one?

A @types package adds TypeScript type information for a JavaScript library that does not include types itself. For example, @types/react provides type information for the React library. Many modern packages (like axios and zod) include their own TypeScript types, so you do not need a separate @types package for them.

VS Code does not show the error but tsc does — why?

VS Code uses its own TypeScript language server which may have a different configuration than your tsc command. Make sure your tsconfig.json is at the root of the project and that VS Code is using your project's TypeScript version. You can select the TypeScript version in VS Code via the bottom status bar when a .ts file is open.