Common Mistakes

Learn from Others' TypeScript Pitfalls

Don't Worry - Everyone Makes These Mistakes!

Learning TypeScript means making mistakes. Here are the most common ones developers make (and how to fix them). Remember: these mistakes are part of the learning process!

We"ve all been thereEasy to fixLearn once, avoid forever

The "Big 5" TypeScript Mistakes

Mistake #1: Overusing `any`
The most common TypeScript mistake
Very Common

❌ What NOT to do:

.ts
// This defeats the purpose of TypeScript!
let user: any = getData()
let response: any = await fetch('/api')

function process(data: any): any {
  return data.whatever // No safety!
}

Why it"s bad: You lose all type safety, autocomplete, and error checking.

✅ Better approach:

.ts
// Define proper types
interface User {
  id: number
  name: string
  email: string
}

let user: User = getData()
function process(data: User): string {
  return data.name // Type safe!
}

Why it"s better: Full type safety, autocomplete, and clear contracts.

When `any` is actually OK:
  • • Migrating JavaScript code gradually
  • • Working with truly dynamic content (like JSON.parse results)
  • • Third-party libraries without type definitions (temporarily)
  • • Prototyping (but replace it later!)

Quick Fixes for Common Issues

object is possibly 'null'
.ts
// Add null check
if (element) {  
  element.click()
}

// Or use optional chaining
element?.click()

Always check for null/undefined before using objects.

Property doesnt exist
.ts
// Check your interface
interface User {
  name: string
  email: string
  age?: number // Add missing prop
}

Update your interface to match the actual data structure.

Argument not assignable
.ts
// Check function signature
function greet(name: string) {
}

// Make sure types match
greet(user.name) // string
greet(String(user.id)) // convert

Ensure the argument type matches the parameter type.

How to Avoid These Mistakes

Development Habits

  • Start with interfaces - Define your data shapes before writing functions
  • Use strict mode - Enable all strict TypeScript checks from the beginning
  • Trust the compiler - If TypeScript complains, there"s usually a good reason
  • Read error messages - TypeScript errors are usually very helpful

Code Quality

  • Avoid `any` unless necessary - Use `unknown` or proper types instead
  • Handle optional properties - Always check for undefined values
  • Use type guards - Validate data before using type assertions
  • Import types correctly - Use `import type` for type-only imports

Remember: Mistakes Are Learning Opportunities!

Every TypeScript developer has made these mistakes. The key is learning from them and gradually building better habits. Don't be discouraged - you're on the right path!

Everyone starts herePractice makes perfectYou've got this!