Aprende Common Pitfalls When Switching | Transitioning from JavaScript to TypeScript

When you start transitioning from JavaScript to TypeScript, you are likely to encounter several common pitfalls. Understanding these will help you avoid frustration and write safer, more maintainable code. Here are some of the most frequent issues:

Misunderstanding type inference: assuming TypeScript always infers the type you expect;
Overusing the any type: using any everywhere defeats the benefits of TypeScript's type system;
Issues with third-party libraries: some libraries do not have TypeScript type definitions, leading to type errors or missing types;
Implicit any types: forgetting to annotate variables or function parameters, causing TypeScript to infer any and potentially hide bugs;
Treating TypeScript as just "typed JavaScript" and not leveraging its advanced features;
Relying on JavaScript patterns that do not translate well to TypeScript's stricter type system.


              123456789101112131415161718
            
// JavaScript code that works fine
function add(a, b) {
  return a + b;
}

// You can call add with any type of argument in JavaScript
console.log(add(1, 2));        // 3
console.log(add("a", "b"));    // "ab"
console.log(add(1, "b"));      // "1b"

// TypeScript version
function add(a: number, b: number): number {
  return a + b;
}

// The following will now cause errors in TypeScript:
// add("a", "b"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
// add(1, "b");   // Error: Argument of type 'string' is not assignable to parameter of type 'number'.


              1234567891011121314151617181920212223
            
// Legacy JavaScript pattern
function updateUser(user, updates) {
  for (let key in updates) {
    user[key] = updates[key];
  }
  return user;
}

// Usage
const user = { name: "Alice", age: 30 };
updateUser(user, { age: 31, city: "Paris" });

// TypeScript migration
function updateUser(user: any, updates: any): any {
  for (let key in updates) {
    user[key] = updates[key];
  }
  return user;
}

// Problem: TypeScript will complain about implicit 'any' for 'key' unless you add a type annotation.
// The use of 'any' here also defeats the purpose of TypeScript's type checking.
// A better approach is to define explicit types for user and updates, or use index signatures.

Study More

TypeScript Migration Guide (Official)

1. What is a common mistake when migrating JavaScript code to TypeScript?

2. Why can third-party libraries cause issues during TypeScript migration?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 3

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 7.14

Desliza para mostrar el menú

Misunderstanding type inference: assuming TypeScript always infers the type you expect;
Overusing the any type: using any everywhere defeats the benefits of TypeScript's type system;
Issues with third-party libraries: some libraries do not have TypeScript type definitions, leading to type errors or missing types;
Implicit any types: forgetting to annotate variables or function parameters, causing TypeScript to infer any and potentially hide bugs;
Treating TypeScript as just "typed JavaScript" and not leveraging its advanced features;
Relying on JavaScript patterns that do not translate well to TypeScript's stricter type system.


              123456789101112131415161718
            
// JavaScript code that works fine
function add(a, b) {
  return a + b;
}

// You can call add with any type of argument in JavaScript
console.log(add(1, 2));        // 3
console.log(add("a", "b"));    // "ab"
console.log(add(1, "b"));      // "1b"

// TypeScript version
function add(a: number, b: number): number {
  return a + b;
}

// The following will now cause errors in TypeScript:
// add("a", "b"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
// add(1, "b");   // Error: Argument of type 'string' is not assignable to parameter of type 'number'.