Respuesta

En TypeScript, el tipo this se puede especificar explícitamente en la firma de las funciones. Esto se utiliza para los métodos de objetos y clases, con el fin de garantizar la correcta tipificación del contexto de llamada.

Ejemplo de asignación del tipo this:

interface Person {
  name: string;
  greet(this: Person): void;
}
const person: Person = {
  name: 'Max',
  greet() {
    console.log(`¡Hola, ${this.name}!`);
  }
};

Para las funciones, se puede indicar el tipo this explícitamente: se coloca como el primer parámetro no nombrado:

function showName(this: { name: string }) {
  console.log(this.name);
}

Particularidades de las funciones flecha:

• Las funciones flecha no tienen su propio contexto de this. El valor de this se toma del ámbito circundante.
• Por lo tanto, no se puede especificar explícitamente el tipo this en una función flecha: la firma será ignorada.

¿Por qué es esto necesario? Permite capturar errores en el uso incorrecto de los métodos de los objetos, ayuda en el "binding" de tiempo de ejecución (por ejemplo, en controladores de eventos).

Pregunta capciosa

¿Se puede indicar explícitamente el tipo this en una función flecha? ¿Cuál es la trampa?

Respuesta: No se puede. La función flecha captura this del contexto externo, y la especificación de ECMAScript no contempla un valor propio de this dentro de ella.

const foo = (this: any) => {} // Error de compilación

Si es necesario controlar this, use funciones normales (function).

Ejemplos de errores reales debido al desconocimiento de los matices del tema

---

Historia

En una aplicación web, los métodos de los controladores de eventos se escribieron como funciones flecha con this. Se esperaba que TypeScript capturara errores de enlace, pero las funciones flecha no tienen su propio this. Resultado: pérdida de contexto, errores extraños al trabajar con controladores DOM.

Historia

En las clases, los métodos se declararon con un tipo explícito de this a través de una función normal, pero al pasar el método como callback (setTimeout(obj.method, 1000)) se perdía this, generando un error en tiempo de ejecución. Se olvidaron de fijar el contexto mediante bind o una función flecha.

Historia

En una biblioteca para trabajar con modelos de datos, se olvidaron de especificar el tipo this para los métodos de la interfaz. TypeScript no mostraba un error al llamar al método con un contexto inadecuado, pero la aplicación fallaba en producción al intentar acceder a propiedades inexistentes.