What is TS2304?
TS2304 occurs when TypeScript encounters a name (variable, function, class, type, etc.) that it doesn't recognize in the current scope. This usually means the name hasn't been declared, imported, or is misspelled.
// Example of TS2304 error console.log(userName); // Error: Cannot find name 'userName' // Variable was never declared
Common Causes
1. Variable Not Declared
// ❌ Using variable before declaration console.log(message); // Error! // ✅ Declare first const message = "Hello"; console.log(message);
2. Missing Import
// ❌ Using React without importing const App = () => <div>Hello</div>; // Error: Cannot find name 'React' // ✅ Add import import React from 'react'; const App = () => <div>Hello</div>;
3. Typo in Name
const userName = "John"; // ❌ Typo console.log(username); // Error! (lowercase 'n') // ✅ Correct spelling console.log(userName);
4. Missing Type Definitions
// ❌ Using Node.js globals without types console.log(process.env.NODE_ENV); // Error: Cannot find name 'process' // ✅ Install @types/node // npm install --save-dev @types/node
5. Scope Issues
function outer() { const localVar = "I'm local"; } // ❌ Accessing variable outside its scope console.log(localVar); // Error!
6. Browser/DOM Globals
// ❌ In Node.js or non-browser environment const element = document.getElementById('app'); // Error: Cannot find name 'document' // ✅ Add 'dom' to lib in tsconfig.json // Or check if running in browser if (typeof document !== 'undefined') { const element = document.getElementById('app'); }
Solutions
1. Declare the Variable
// Use let, const, or var let count = 0; const API_URL = "https://api.example.com"; var legacyVar = "old style";
2. Add Missing Import
// Import named exports import { useState, useEffect } from 'react'; // Import default export import axios from 'axios'; // Import types import type { User } from './types';
3. Install Type Definitions
# For Node.js npm install --save-dev @types/node # For jQuery npm install --save-dev @types/jquery # For Express npm install --save-dev @types/express
4. Update tsconfig.json
{
"compilerOptions": {
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"types": ["node", "jest"]
}
}
5. Declare Global Variables
// For global variables from scripts declare var $: typeof jQuery; declare var google: typeof google.maps; // Or in a .d.ts file declare global { interface Window { myGlobal: string; } }
💡 Pro Tip
Most IDEs (VS Code, WebStorm) can auto-import missing dependencies. Use the quick-fix feature (Ctrl/Cmd + .) when you see TS2304 to add imports automatically.
Real-World Examples
React with TypeScript
// ❌ Common mistake in React 17+ const App = () => { const [count, setCount] = useState(0); // Error: Cannot find name 'useState' return <div>{count}</div>; }; // ✅ Import the hook import { useState } from 'react'; const App = () => { const [count, setCount] = useState(0); return <div>{count}</div>; };
Jest Testing
// ❌ Jest globals not recognized describe('MyTest', () => { // Error: Cannot find name 'describe' it('works', () => { expect(true).toBe(true); }); }); // ✅ Install and configure Jest types // npm install --save-dev @types/jest // Add "jest" to types in tsconfig.json
Environment Variables
// ❌ process.env in browser code const apiKey = process.env.API_KEY; // Error! // ✅ For Vite/Next.js, use their specific patterns // Vite const apiKey = import.meta.env.VITE_API_KEY; // Next.js const apiKey = process.env.NEXT_PUBLIC_API_KEY;
⚠️ Watch Out
If you're seeing TS2304 for types like Promise, Map, or Set, your tsconfig.json might be targeting an older ES version. Update "target" or "lib" to include modern JavaScript features.
Summary
- TS2304 means TypeScript can't find a name in the current scope
- Check for typos first
- Add missing imports
- Install @types packages for third-party libraries
- Update tsconfig.json lib array for browser/Node APIs
- Declare global variables when needed