TypeScript 'Property Does Not Exist on Type' - 7 Solutions

The Error

Property 'name' does not exist on type '{}'.

7 Solutions

1. Define Proper Interface

interface User {
  name: string
  email: string
}

const user: User = {
  name: 'John',
  email: 'john@example.com'
}

console.log(user.name) // ✅ Works!

2. Type Assertion

const response = await fetch('/api/user')
const data = await response.json() as { name: string }

console.log(data.name) // ✅ Works!

3. Use 'any' Type (Quick Fix, Not Recommended)

const data: any = await response.json()
console.log(data.name) // ✅ Works but loses type safety

4. Index Signature

interface DynamicObject {
  [key: string]: any
}

const obj: DynamicObject = {
  name: 'John',
  age: 30
}

console.log(obj.name) // ✅ Works!

5. Optional Chaining

const user: any = getUserData()
console.log(user?.name) // ✅ Returns undefined if name doesn't exist

6. Type Guard

function hasName(obj: any): obj is { name: string } {
  return 'name' in obj && typeof obj.name === 'string'
}

const data = getUserData()
if (hasName(data)) {
  console.log(data.name) // ✅ TypeScript knows name exists
}

7. Extend Window or Global Objects

// For window object properties
declare global {
  interface Window {
    customProperty: string
  }
}

window.customProperty = 'value' // ✅ Works!

Best Practices

• Always define interfaces for your data structures
• Use type assertions sparingly and only when you're sure
• Avoid 'any' type in production code
• Use optional chaining for potentially undefined properties
• Create type guards for runtime type checking
• Keep TypeScript strict mode enabled

API Response Example

interface ApiResponse {
  data: {
    user: {
      id: number
      name: string
      email: string
    }
  }
  status: number
}

async function fetchUser() {
  const response = await fetch('/api/user')
  const result = await response.json() as ApiResponse

  console.log(result.data.user.name) // ✅ Fully typed!
}