Gotchas and Antipatterns

🧑‍🏫 Sabse pehle — simple mein samjho#

TypeScript sikhna aasan hai, par usko practically sahi dhang se use karna mushkil hota hai. Naye log jaldi mein errors fix karne ke liye kuch aisi cheezein kar dete hain jo long-term mein code ko kharab (buggy) banati hain. Ye kuch typical "Antipatterns" (galat tareeqe) hain jinse bachna chahiye.

1. Overusing any (The Ultimate Sin)#

As discussed earlier, using any is practically equivalent to deleting TypeScript from that specific line of code. If you face an error, properly define your types instead of taking the easy way out!

Antipattern ❌:

const fetchUser = (id: any): any => {
  return data;
}

The Right Way ✅: Explicitly define the types, or use unknown accompanied by a type guard.

2. Non-Null Assertion Operator (!) Abuse#

Sometimes, querying the DOM returns a type that could be null. Developers often hastily append a ! to tell TS, "Listen to me, I guarantee this will never be null!". This is dangerous and can lead to runtime crashes.

Antipattern ❌:

const button = document.getElementById('my-btn')!;
button.click(); // What if the button was deleted or failed to load? The app crashes!

The Right Way ✅: Use optional chaining (?) or a standard if statement.

const button = document.getElementById('my-btn');
button?.click(); // Safest approach

3. Ignoring Type Inference (Redundant Types)#

Manually declaring types while initializing variables is a very common beginner mistake. It makes the codebase unnecessarily verbose and tedious to read.

Antipattern ❌:

const isUserLoggedIn: boolean = true;
const defaultNames: string[] = ["Tarun"];

The Right Way ✅: Let TS do its job!

const isUserLoggedIn = true;
const defaultNames = ["Tarun"];

4. Improper Use of Generic Constraints#

When using Generics, if you fail to apply a constraint, TS treats them as any and behaves unexpectedly.

Antipattern ❌:

function printLength<T>(item: T) {
  // console.log(item.length); // Error: length property doesn't exist on T.
}

The Right Way ✅:

function printLength<T extends { length: number }>(item: T) {
  console.log(item.length); 
}

5. Accidental Interface Over-Merging#

The most powerful (and potentially problematic) feature of Interfaces is Declaration Merging. If two interfaces with the exact same name are created in the same file or global scope, TS doesn't throw an error; instead, it silently merges them!

interface UserData { id: number; }
// ... thousands of lines later ...
interface UserData { name: string; }

// Result: The UserData interface now mandatorily requires both {id, name}.
// This is exactly why many developers prefer using 'type' for React Props, as 'type' will always throw an explicit Error on name clashes.

6. Blindly casting as unknown as Type#

Just as using any is terrible practice, deceiving TS with forceful type assertions is equally dangerous. Use this only when it is absolutely, 100% unavoidable.